Shopify CDN explained: What it is, how it works, & how to use it

The Shopify CDN is a system of cloud servers powered by Cloudflare that host and serve static files for Shopify stores across the globe. It ensures your online store loads as fast as possible, no matter where your customers may be.

The best part? You don’t have to pay anything extra to use Shopify’s content delivery network!

Want to learn more about the Shopify CDN and how it works? Keep reading.

I’ll explain everything you need to know, including what it is, how it works, and how you can host images on Shopify CDN for your store.

Let’s start with the basics.

What is a CDN?

A CDN, or Content Delivery Network, is a network of servers distributed worldwide that store and deliver web content like images, videos, and website files. Instead of relying on a single server, CDNs use multiple servers in various locations.

Here’s a graphic that demonstrates how CDNs work:

The inner workings of how CDNs work are much more complicated than that. But the gist is: when a user accesses a website, the CDN serves static files for that site from the nearest server, speeding up delivery, reducing latency, and improving the online experience.

Let’s say you visit this website from the UK. Instead of serving you content from the US, where this website is hosted, the CDN will serve you content from its cloud servers in London. That will help save bandwidth, minimize latency, and load the page in seconds for you.

The main functions of CDNs include content replication, DNS resolution, CDN routing, content delivery, caching, and load balancing. However, some CDNs also offer DDoS protection, Web Application Firewalls, and analytics tools.

Now that you understand the basics of a CDN let’s talk about Shopify’s CDN.

What is Shopify CDN?

Shopify CDN is a system of cloud servers powered by Cloudflare that host and serve static files like HTML, CSS, JS, and media files for Shopify stores. Shopify CDN serves content to users from the server closest to their physical location to reduce latency and improve performance.

Shopify CDN is an integral part of the Shopify platform infrastructure provided for free to all Shopify users. It powers more than 5.3 million live Shopify stores and processes an estimated 25 million requests per minute.

The best part is that despite hosting more than 20 billion files, Shopify CDN is free to use and included with all Shopify plans. You get unlimited bandwidth and storage at no extra costs.
That’s incredibly helpful when you’re building a Shopify store on your own.

How does Shopify CDN work?

Shopify CDN works by caching your static files, storing them across a distributed global network of cloud servers, and serving them to customers from the nearest server each time a browser request comes in.

Shopify also uses Brotli and Gzip compression to reduce file sizes and serves requests using HTTP/3 and TLS 1.3 to improve security and performance.

When you upload a file to your Shopify store, Shopify uses the asset_url hosted file filter to append (add) a version number to the hosted file URL.

For instance, when you upload a file called white-tee.jpg, Shopify will add a version number such as ?v=123456789 to it.

The next time you update or edit the image, Shopify will add a new version number to the image URL, which informs the CDN that the file in its cache is outdated. The CDN then removes the old file and caches the updated file with the new version number to serve customers globally.

It’s worth mentioning that until 2023, Shopify rendered most static content from the cdn.shopify.com domain, except images or stylesheets loaded on a storefront, which used the {shop}.myshopify.com/cdn format to maximize connection reuse and improve performance.

However, starting in 2023, Shopify has updated most CDN URLs to use the //example.com/cdn/shop/files/... format.

Now that you understand how Shopify CDN works let’s discuss its benefits.

5 key Shopify CDN benefits

Shopify CDN isn’t just a content delivery service. It’s a fundamental component of the Shopify infrastructure that ensures fast and reliable access to Shopify stores all over the world.

Here are five ways Shopify CDN benefits you.

1. File compression

When you upload files to Shopify, they are automatically optimized to be smaller in size. This optimization isn’t visible to the naked eye, but it significantly enhances the speed at which your web pages load.

2. File format conversion

Shopify checks for file format compatibility on visitor devices and sends the best possible format to each user, ensuring everyone gets the fastest experience. For instance, it might convert images to WebP for some users and JPG for others, always aiming for the quickest load times.

3. Dynamic editing

Shopify CDN also makes it possible to edit your images on the fly without altering the original file. It’s like magic! You can crop, transform, or adjust your images using simple URL commands, and the changes happen instantly without harming the original image.

4. Real-time performance enhancements

Shopify CDN does everything in real time. Whether it’s dynamic edits, compression, or file format conversions, when someone clicks on your website, they don’t have to wait ages for it to load. Shopify’s global servers ensure that your content is delivered ultra-fast.

5. Better load balancing

Shopify CDN doesn’t just stop at making your website faster; it also ensures it stays reliable. It fine-tunes how its traffic is divided between its servers to maintain performance and accuracy, all thanks to decisions made at the network’s edge by Cloudflare’s Load Balancing.

How to serve files from the Shopify CDN: Fix the ‘asset should be served by the Shopify CDN’ error

Shopify hosts and serves most static resources, including theme assets and images from the Shopify CDN.

Although Shopify doesn’t serve external code dependencies or hard-coded images automatically, you can manually add them to Shopify CDN to improve performance.

The process to upload images and code files to the Shopify CDN varies slightly. I’ve described both below. First, let’s look at the process to add images to Shopify CDN.

Here’s how you can serve images from the Shopify CDN:

1. Open the Shopify admin panel and go to Content > Files.
2. Click Upload files and select the images you want to upload to Shopify’s CDN.
3. Once the images are uploaded, hover over the image listing and click the link icon to copy the Shopify CDN image URL.
4. Enter the copied URL into your theme code to serve the file from the Shopify CDN.

That’s it! You’ve successfully uploaded images to the Shopify CDN and configured your theme to serve it.

The Files page in the Shopify admin only allows you to upload JPEG, PNG, WEBP, HEIC, and GIF files. If you want to upload code files to the Shopify CDN, you’ll need to do it from the Assets directory of your theme.

Here’s how you can upload code files to the Assets folder and serve them from the Shopify CDN:

1. Open the Shopify admin panel and go to Sales Channels > Online Store > Themes.
2. Select the three dots icon next to your theme and choose Edit code.
3. Find the Assets folder in the left-hand sidebar and select Add new asset.
4. Select Create a blank file to add your code files.
5. Update the code file references in your theme code, save your changes, and verify everything works correctly on the front end.

Great job! You’ve successfully moved your code files to the Shopify CDN. This little change should improve your store’s performance instantly.

How to use Shopify CDN to dynamically edit images for your store

Dynamic edits are one of the best features of Shopify CDN. They preserve the original image and apply transformations like cropping and padding on the fly.

Shopify even gives you a free tool to dynamically edit images and copy the relevant code snippet to paste in your theme code or product page custom fields as needed.

Follow these steps to use Shopify CDN to edit your Shopify store images dynamically:

1. Go to the Shopify Imagery website and paste the URL of your Shopify-hosted image.
2. Enter the width, height, and cropping options. Optionally, select a color to fill up any whitespace created due to the crop.
3. Copy the URL, Liquid code, or Hydrogen code from the corresponding block and paste it into your theme code to add the dynamically edited image to your store.

That’s it. Shopify CDN will now edit the image based on your selected parameters without affecting the source image. It’ll also serve the image in a lower file size and optimized format to compatible browsers.

How to check if your store is using the Shopify CDN

All Shopify stores use Shopify CDN by default. However, you can verify if your store is using the Shopify CDN by following these steps:

1. Open a page of your Shopify store in a web browser.
2. Right-click on the page and select Inspect.
3. In the Elements tab, use Ctrl + F or Cmd + F to search for cdn.shopify.com or cdn/shop.
4. You should see one or more lines of code containing <link href="//cdn.shopify.com/s/files/..."> or cdn/shop.
5. Optionally, open the Sources tab and look for a folder named cdn.shopify.com or cdn.
6. The presence of the cdn.shopify.com or cdn in the Elements and Sources tab confirms you’re using Shopify CDN.

Can you use a different CDN with Shopify?

You can use a different CDN with Shopify by editing your theme code to add references to your externally hosted CDN code and image files.

Keep in mind that using a third-party CDN with Shopify increases the connection overhead during page load, which can hurt your Shopify store performance. That’s why, I generally recommend using the default Shopify CDN.

If you want to improve Shopify CDN performance for your store, you can use Orange-to-Orange (O2O) by Cloudflare. O2O is a special traffic routing configuration that allows you to route traffic through your Cloudflare zone before it reaches Shopify’s CDN.

O2O acts as a middleman, allowing you to leverage Cloudflare’s capabilities to optimize your Shopify store’s performance and security while using Shopify CDN.

Final thoughts: Shopify CDN makes your store fly

There you have it. I’ve explained what Shopify CDN is, how it works, its benefits, and ways to use it.

Shopify CDN is a powerful tool that improves page load times by making files smaller, changing their format, and improving how they load on your website. 

The best part is that Shopify CDN is free to use and included with all Shopify plans by default. You don’t need to set it up manually; everything works straight out of the box from day one. It doesn’t get any better than that.

Have questions about Shopify or need help getting started? Reach out using the contact form!