search

Shopify / liquid

Liquid markup language. Safe, customer facing template language for flexible web apps.
https://shopify.github.io/liquid/
MIT License
11.13k stars 1.39k forks source link

Image CDN URLs returned from Section Rendering API differ from initial page render #1826

Closed leeuwis closed 1 month ago

leeuwis commented 2 months ago

Context

We are using the Section Rendering API to dynamically update images when a variant is selected. However, we’ve noticed that the image URLs returned by the Section Rendering API differ from those generated during the initial page load. This inconsistency causes the images to briefly flash and reload, even when the image itself remains unchanged.

Expected Behavior

The image URLs returned by the Section Rendering API should be identical to those generated during the initial page load, especially when the same Liquid code is used. This would prevent unnecessary image reloads.

Example

The following Liquid code in a section file:

{{ product.selected_or_first_available_variant.featured_image | image_url: width: 1280 }}

Results in the following URL on initial page render:

//instant-dev-store.myshopify.com/cdn/shop/products/teal-t-shirt.jpg?v=1707818104&width=1280

But the Section Rendering API returns the following URL:

https://cdn.shopify.com/s/files/1/0817/1234/9487/products/teal-t-shirt.jpg?v=1707818104&width=1280

Impact

This discrepancy causes unnecessary image reloads, leading to a flickering effect that negatively impacts performance and user experience. For consistency and better user experience, the URLs returned by the Section Rendering API should match those generated during the initial render.

aswamy commented 1 month ago

Hey @leeuwis, the Section Rendering API should return the shop domain URL instead of CDN one now. Cheers.