Shopify / Shopify/liquid

New CDN URLs are a problem.

Open
#1,708 5 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Ruby
Stars
11.9k
Forks
1.5k
Avg merge
17h 55m
Merged PRs (30d)
3

Description

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/...

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the Liquid image_url filter and reproduce the reported /cdn/shop/ URLs in a development site and through Shopify CLI's theme dev command. Trace how these URLs are generated and verify that theme metadata produces fully qualified image URLs and that the development server returns valid image data.

Written by the indexing model from the issue text.

Assessment

Tech stack
ruby
Domain
web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.