I've noticed in my dev site (and other Shopify stores from a cursory Google search) that a new method of generating CDN URLs is causing issues.
All images and asset URLs generated by the appropriate liquid filter used to have a prefix like:
//cdn.shopify.com/s/files/.../products/
But now, for some stores (presumably this feature is getting slowly rolled out), they're all like this:
/cdn/shop/products/
The problem is many Shopify themes manipulate these URLs in Liquid or Javascript and expect them to start with "//".
So for instance, most themes I've come across implement a <meta property="og:image"> or <meta property="twitter:image"> tag so snippets can be displayed when posting links on social media, the content attribute has to be a fully qualified URL, so most themes do something like this:
<meta property="og:image" content="https:{{ image | image_url: width: 1280 }}">
This will now produce a broken URL, and I can see this is evident on several Shopify sites that I checked.
A very minor issue of course, but not to be overlooked.
In my theme however, the problem until I fixed it was much worse, I used a Javascript library to lazy load images and this new URL led to all of my images not loading.
The new CDN URLs have also broken image URLs for dev sites served with Shopify cli's theme dev command.
http://127.0.0.1:9292/cdn/shop/files/the-name-of-your-image.jpg will serve a 200 response but invalid image data.
However other assets like Javascript and stylesheets are served correctly.
This seems like a big oversight to implement this change quietly without informing devs or theme creators.
EDIT:
Just noticed this will also break many JSON-LD implementations, for example:
"@context": "http://schema.org/",
"@type": "Product",
...
"image": "https:{{ product.featured_image | image_url: width: 1500 }}",
...
This is a common implementation that Shopify stores so an image can display in rich text search results. With the new CDN URL it will output a bad URL:
https:/cdn/shop/products/...
I've noticed in my dev site (and other Shopify stores from a cursory Google search) that a new method of generating CDN URLs is causing issues.
All images and asset URLs generated by the appropriate liquid filter used to have a prefix like:
//cdn.shopify.com/s/files/.../products/But now, for some stores (presumably this feature is getting slowly rolled out), they're all like this:
/cdn/shop/products/The problem is many Shopify themes manipulate these URLs in Liquid or Javascript and expect them to start with "//".
So for instance, most themes I've come across implement a
<meta property="og:image">or<meta property="twitter:image">tag so snippets can be displayed when posting links on social media, the content attribute has to be a fully qualified URL, so most themes do something like this:<meta property="og:image" content="https:{{ image | image_url: width: 1280 }}">This will now produce a broken URL, and I can see this is evident on several Shopify sites that I checked.
A very minor issue of course, but not to be overlooked.
In my theme however, the problem until I fixed it was much worse, I used a Javascript library to lazy load images and this new URL led to all of my images not loading.
The new CDN URLs have also broken image URLs for dev sites served with Shopify cli's theme dev command.
http://127.0.0.1:9292/cdn/shop/files/the-name-of-your-image.jpgwill serve a 200 response but invalid image data.However other assets like Javascript and stylesheets are served correctly.
This seems like a big oversight to implement this change quietly without informing devs or theme creators.
EDIT:
Just noticed this will also break many JSON-LD implementations, for example:
This is a common implementation that Shopify stores so an image can display in rich text search results. With the new CDN URL it will output a bad URL:
https:/cdn/shop/products/...