How to use Shopify CDN

Shopify CDN is a cloud server system powered by Cloudflare that hosts and serves static files for Shopify stores around the world. It ensures your online store loads as fast as possible, no matter where your customers are.

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

Want to learn more about 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 to host images for your store on Shopify CDN.

Recommendation: How to sell music on Shopify

What is CDN?

A CDN or Content Delivery Network is a network of servers distributed around the world that is used to store and deliver web content such as images, videos, and website files. Instead of relying on a single server, a CDN uses multiple servers located in different locations.

The following figure demonstrates how CDN works:

CDN The inner workings of how this works are far more complex than that. But here’s the gist: when a user visits a website, a CDN serves static files to that site from the nearest server, speeding up delivery, reducing latency, and improving the online experience.

Let’s say you’re visiting this site from the UK. Instead of serving you content from the US, where this site is hosted, the CDN will serve you content from its cloud servers in London. This will help save bandwidth, minimize latency, and load your pages in seconds.

Main features of a CDN include content replication, DNS resolution, CDN routing, content distribution, caching, and load balancing. However, some CDNs also offer DDoS protection, web application firewalls, and analytics tools.

Now that you know the basics of CDNs, let’s talk about Shopify’s CDN.

What is Shopify CDN?

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

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

The best part is that despite hosting over 20 billion files, Shopify CDN is free to use and included with all Shopify plans. You get unlimited bandwidth and storage at no extra cost. This is extremely useful when you are building a Shopify store yourself.

How does Shopify CDN work?

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

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

When you upload a file to your Shopify store, Shopify appends (adds) a version number to the hosted file URL using the hosted file filter. asset_url

For example, when you upload a file named white-tee.jpg , Shopify adds a version number to it. ?v=123456789

The next time you update or edit an image, Shopify will add a new version number to the image URL to notify the CDN that the file in its cache has expired. The CDN will then delete the old file and cache the updated file with the new version number to serve customers around the world.

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

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

Now that you understand how Shopify CDN works, let’s talk about its benefits.

Recommendation: WordPress Analysis Plugin AnalyticsWP

5 major advantages of Shopify CDN

Shopify CDN is more than just a content delivery service. It’s a fundamental part of Shopify’s infrastructure, ensuring fast and reliable access to Shopify stores around the world.

Here are five ways Shopify CDN can benefit you.

1. File Compression

When you upload files to Shopify, they are automatically optimized to be smaller. This optimization is invisible to the naked eye, but it significantly increases the speed at which your pages load.

2. File format conversion

Shopify checks file format compatibility on your visitor’s device and sends the best format to each user, ensuring everyone gets the fastest experience. For example, it might convert images to WebP for some users and JPG for others, always aiming for the fastest load time.

3. Dynamic Editing

Shopify CDN can also edit your images on the fly without changing the original files. It’s like magic! You can crop, transform, or resize images with simple URL commands, and the changes will happen instantly without harming the original image.

4. Real-time Performance Enhancements

Shopify CDN does everything in real time. Whether it’s dynamic editing, compression, or file format conversion, when someone hits your site, they don’t have to wait for ages for it to load. Shopify’s global servers ensure your content is delivered at super-fast speeds.

5. Better Load Balancing

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

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 assets, including theme assets and images, from the Shopify CDN.

Although Shopify does not automatically serve external code dependencies or hard-coded images, you can manually add them to the Shopify CDN to improve performance.

The process for uploading images and code files to the Shopify CDN is slightly different. I describe both below. First, let’s look at the process for adding images to the Shopify CDN.

Here’s how to serve images from the Shopify CDN:

Open your Shopify admin panel and go to Content > Files.
Click Upload Files and select the images you want to upload to the Shopify CDN.
After uploading the image, hover over the image listing and click the link icon to copy the Shopify CDN image URL.
Enter the copied URL into your theme code to serve the file from the Shopify CDN.

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

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

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

Open your Shopify admin panel and go to Sales Channels > Online Store > Themes.
Select the three dots icon next to the theme and choose Edit code.
Find the Assets folder in the left sidebar and choose Add new asset.
Choose Create a blank file to add your code file.
Update the code file references in your template code, save your changes, and verify that everything works on the front end.

Great! You have successfully moved your code files to the Shopify CDN. This small change should immediately improve your store’s performance.

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 dynamically apply transformations like cropping and padding.

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

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

Go to the Shopify Imagery website and paste the URL of your Shopify-hosted image.
Enter a width, height, and cropping options. (Optional) Choose a color to fill any white space created by cropping.
Copy the URL, Liquid code, or Hydrogen code from the corresponding block and paste it into your template code to add a dynamically edited image to your store.

That’s it. Shopify CDN will now edit your images based on the parameters you selected without affecting the source images. It will also serve images in a smaller file size and in an optimized format for compatible browsers.

How to check if your store is using the Shopify CDN

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

Open your Shopify store’s page in a web browser.
Right-click the page and choose Inspect.
In the Elements tab, use Ctrl + F or Cmd + F search for or . cdn.shopify.comcdn/shop
You should see one or more lines of code containing or . <link href="//cdn.shopify.com/s/files/...">cdn/shop
(Optional) Open the Sources tab and find a folder named cdn.shopify.comcdn
Confirm that you are using the Shopify CDN by checking Elements and Sources tabs for or. cdn.shopify.comcdn

Note

Shopify previously rendered most static content from . As of 2023, it has started using the URL format. Your store may contain one or both of these. cdn.shopify.com/cdn/shop/...

Recommendation: Multiple Suppliers Auction WooCommerce Theme iBid

Can you use a different CDN with Shopify?

You can use other CDNs 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 will increase connection overhead during page loads, which can hurt your Shopify store’s 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 Cloudflare’s Orange to Orange (O2O). O2O is a special traffic routing configuration that allows you to route traffic through Cloudflare zones before it reaches Shopify’s CDN.

O2O acts as a middleman, allowing you to leverage Cloudflare’s capabilities to optimize the performance and security of your Shopify store when 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 how to use it.

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

The best part is that Shopify CDN is free to use and included by default with all Shopify plans. There’s nothing to set up manually; everything just works out of the box from day one. It doesn’t get better than this.