A CDN, also known as a content delivery network, is a system that optimizes content delivery to end users. The result is a smooth, streamlined, and headache-free customer browsing experience.
The Shopify content delivery network (Shopify CDN) allows merchants to organize content internally and deliver a blazing shopping experience for their potential customers. It also helps merchants scale their capacity by handling both small and large amounts of traffic across the globe.
Because of this, the Shopify CDN can be a Shopify merchant’s most handy tool.
Shopify Content Delivery Network: How does it work?
Source: Cloudflare
The Shopify CDN caches your online store’s files on geographically positioned servers. So whenever users try to access the site, regardless of where they are in the world, there will be an optimally positioned server ready to deliver data to the requesting user.
Where are Shopify servers located?
Source: Cloudflare
Cloudflare, one of the fastest and most reputable CDNs, runs the CDN for Shopify
Cloudflare has data centers in 330 cities across over 120 countries. These locations include, but are not limited to:
- San Francisco, US
- Montréal, CA
- Amsterdam, NL
- Madrid, ES
- Paris, FR
Having these widely dispersed data centers lets Cloudflare provide a smooth store experience for an online-active market (i.e., Shopify merchants’ potential customers).
What does the Shopify CDN do for your Shopify store?
The Shopify CDN results in an improved site speed, a better user experience, and reduced downtime for your online business.
These benefits, in turn, allow merchants to cater to various geographic markets.
Improved Site Speed
Cloudflare boasts being able to reach most of the world’s population in as little as 50 ms.
Due to a CDN’s globally placed system of servers, a CDN can reach and serve content to different corners of the globe. As a result, a site that’s cached on a CDN (like how a Shopify store is cached on Shopify’s CDN) has better load speeds than sites that aren’t cached on a CDN.
Related A Beginner's Guide to Improving Your Shopify Speed Score
Better User Experience
Source: Robin Worrall on Unsplash
An internet-active market expects content to arrive here and now.
When a website lags and struggles to load content, it can sour the shopping and browsing experience. Or worse, potential customers may bounce off your site and opt for the services of businesses with faster-loading sites.
The Shopify CDN can keep customers on the site by providing consistent and prompt service. As long as the merchant abides by crucial user experience principles as well, though.
Reduced Downtime
Site downtime is detrimental to the health of your online business.
Every hour your site is down is an hour out of business. Frequent downtimes can also harm SEO since Google can’t crawl your site during an outage.
CDNs can reduce your site downtime by servicing your cached content to visitors. So, even if the main hosting server is offline, visitors may still access the cached version of the website.
This doesn’t give you an excuse to be complacent with your site’s uptime, though.
Allows You to Cater to Different Geographic Markets
Source: Chuttersnap on Unsplash
An improved site speed, better user experience, and reduced downtime, paired with a CDN's ability to rapidly serve your site anywhere in the globe, gives you ample opportunity to expand your online business to a global market.
In addition to the Shopify CDN, Shopify has other tools (e.g., Shopify Markets) that optimize a merchant’s business for global success.
How to Use Shopify CDN
Merchants can’t tinker with the technical aspects and infrastructure of the Shopify CDN. Cloudflare manages and maintains this.
However, merchants may harness the power of the Shopify CDN to better manage their site and online business.
Uploading files to the Shopify CDN, managing and editing images, and improving SEO are some of the actions that merchants may take with the Shopify CDN.
Upload files to the Shopify CDN
Any file, whether media, custom font, or downloadable asset you place on your Shopify store is automatically uploaded to the Shopify CDN.
But you may upload files directly to the CDN instead of having to upload them from the theme editor, product management, or collection management first.
Read more: 7 Actionable Tips You Must Know for Shopify Speed Optimization
That way, you’ll have an organized repository of files and assets that you may quickly retrieve from, making page building (among other things) quicker and easier.
To upload files to the Shopify CDN,
Navigate to Content - Files from the Shopify admin.
Click on Upload Files.
Select the files from your computer that you wish to upload.
Wait for the selected files to upload.
Once the upload is done, your files are successfully stored on the Shopify CDN.
Note: Shopify has limitations to the files you may upload.
- You may upload any file type except HTML
- Generic files have a 20 MB file size limit for each file.
- The maximum file size and resolution for any single image file are 20 MB and 20 MP.
- Videos should be no more than 1 GB, should not have a resolution exceeding 4096 x 4096 pixels, and must not be longer than 10 minutes.
Manage files using the Shopify CDN
Simply click on a file from Shopify Files.
There, you may:
- edit the name and alt text of a file,
- view the file upload date,
- see which products are using a particular image.
Each file uploaded to the Shopify CDN has a link. This link is crucial for sharing assets and linking customers to crucial files and documents. Advanced users may use these links when building themes if they want their theme to retrieve information from the Shopify CDN.
To copy a file’s URL, click on its respective link icon from Content - Files.
Then paste it wherever it is needed.
Compared to generic files, the Shopify CDN has better utility for images.
Editing images using the Shopify CDN
You may perform basic image edits from the Shopify CDN — similar to the editing tools of popular social apps like Instagram.
When you click on an image from Shopify Files, the following actions are available:
- Crop and transform. This lets merchants crop the image, flip it horizontally and vertically, and rotate it.
- Resize. This lets merchants set a specific resolution for the image.
- Draw. This lets users draw on the image using a standard round brush.
- Color background. Shopify’s AI will first detect and distinguish the subject from the background. After this, merchants may set any solid color background as they want.
- Replace background. This is one of the more advanced utilities of the file editor. It functions similarly to color background, except Shopify lets users define and generate the background they want (e.g., a park with a bench).
- Set a focal point. This allows merchants to determine which part of an image should be highlighted. So when an image is placed in the theme editor, any crop functions will prioritize placing the user-set focal point in the frame.
In addition to images, the Shopify CDN also lets you edit certain attributes for 3D files, such as .OBJ and .GLB.
You may edit the following attributes for 3D files:
- Environment. You may tweak the environmental lighting for a 3D image. The lighting options include studio, city, and park, among others. You may also adjust the lighting exposure.
- Camera. You may adjust the default camera orientation of a 3D model. Perhaps you’d want a 45-degree view for more depth instead of a front and flat one. In that case, you may adjust the image’s X rotation, Y rotation, and zoom.
- Background. You may also choose the model’s background color.
Make sure to click Save after editing your media assets.
Pro tip: Click on the dropdown arrow and click Save as new to save the edited file as a new file. This will preserve the original file.
Improve SEO using the Shopify CDN
Search engine crawlers review a site’s files and retrieve information such as file name and alt text. From this data, search engines understand the contents of a media file and the context in which it’s used.
The Shopify CDN lets users edit the name and alt text of their files. By doing this, merchants can improve the SEO of their sites, provided it is done properly.
From Shopify files, click on any uploaded file.
Pay attention to the Name and Alt text fields.
Editing the Name field will change the name of the file. Editing the Alt text field will alter its alt tag.
Note: Make sure your file name and alt text provide deeper context to the picture. It’s always best SEO practice to be descriptive with your file name and alt tag. Furthermore, your alt text will appear in place of the image if the image doesn’t load.
After applying changes, click Save.
The tips and how-to’s mentioned above — uploading files to the Shopify CDN, managing and editing files, and upholding best SEO practices are some of the most basic yet most useful Shopify CDN functions.
For most merchants, this is all they’ll need to know on how to use Shopify CDN. But more advanced Shopify users may benefit from the succeeding tips.
Move files to the Shopify CDN for Better Site Performance
The files you use to build your Shopify site will be uploaded to the Shopify CDN by default. But there are instances where this isn’t the case.
Take hard-coded images, for example.
If your hard-coded image is hosted on an external domain, it helps to have that image instead on the Shopify CDN and reference it from there.
Step #1: Add the File to Shopify Assets
Add the hard-coded image to your Shopify theme’s assets.
To do that,
Navigate to Online Store - Themes from the Shopify admin
Select the three dots, then click Edit code.
Click on the assets folder dropdown, then click + Add a new asset.
Add the hardcoded image. You’d want to keep the file name the same as the hardcoded version.
Pro tip: If you’re creating a theme, place the hard-coded file in your theme’s assets folder.
Step #2: Update the Theme’s Code
Open your theme’s code.
If you’re developing the theme, open the code editor you’re using to develop the theme.
But if you’re using the theme, go to the Shopify theme code editor.
Now if you have a hardcoded image, you may have a line of code that looks like the one below:
Source: Shopify
Make sure to edit it so that it references the image version that you just uploaded to the Shopify CDN instead of an external domain. It should look similar to the line of code shown below:
Source: Shopify
Save your changes.
Step #3: Check if the Asset is Using the Shopify CDN
Lastly, you may check if the live site is retrieving the image from the Shopify CDN.
A simple way of doing that is:
- Right-click on the live site and click Inspect.
- Click on the Sources tab. On Microsoft Edge, this is represented with a bug icon.
- There should be a ‘cdn’ folder that appears.
- Navigate to cdn - shop - files.
- If the previously hardcoded image is now served from the Shopify CDN, the file should appear in this folder.
If you find the uploaded file in the ‘files’ folder, then you’ve successfully moved a hardcoded image to the Shopify CDN.
Conclusion
Due to Cloudflare's CDN, the Shopify platform provides users with exceptionally better performance than e-commerce platforms and websites without a CDN.
A content delivery network (CDN) can improve performance in terms of site speed, uptime, SEO, and overall user experience. As a result, your website becomes a potent asset for meeting marketing goals.
The Shopify CDN is also a management solution for your files, whether generic or media type. It acts as a basic yet complete photo editing tool suited for merchants' needs.
With these benefits in mind, it's crucial to serve content from the Shopify CDN as opposed to serving it from multiple domains. Optimize your business' website now with the Shopify CDN!
