More Products
Menu

Cloudinary CDN for Shopify

Last updated: Nov-12-2025

This guide shows you how to set up Cloudinary's image and video optimization and delivery for your Shopify store using theme-level changes. This approach keeps Shopify as the origin for your media files, while Cloudinary acts as a caching proxy that optimizes and delivers them. You can typically complete this implementation in one day and boost site performance by up to 30%.

Notes
For full Digital Asset Management (DAM) capabilities, including centralized asset management and metadata-based syncing to Shopify, see the Shopify AssetLink integration.

On this page:

Prerequisites

  • A Cloudinary account with access to the Assets product???Is a free account sufficient? Where should I link to here? The sign-up page? Support?
  • At least one Shopify store where you want to sync assets

Overview

In order to set up your Shopify Cloudinary integration, you'll need to do the following:

  1. Set up your Cloudinary account to allow delivery of the Shopify store's images and videos
  2. Edit your store theme code to use Cloudinary image URLs instead of Shopify image URLs

Stage 1: Cloudinary account setup

Set up upload mapping

Upload mappings allow Cloudinary to fetch and deliver assets from your Shopify store. An upload mapping maps a Cloudinary folder to an external URL, enabling Cloudinary to act as a caching proxy for your Shopify media.

To set up an upload mapping:

  1. Go to the Auto Upload Mapping tab of the Upload page in Console Settings.
  2. Click Add Mapping.
  3. In the Source URL prefix field, enter your Shopify CDN URL: https://store-name.myshopify.com/cdn/shop/, replacing store-name with your actual Shopify store ID.
  4. In the Target folder field, enter a folder name, such as shop.

Important
You can't reuse the target folder name for other stores. In this setup, we recommend using one Cloudinary account per Shopify store.

Get your account details

You'll need your Cloudinary cloud name to build delivery URLs for your Shopify assets.

To find your cloud name:

  1. Go to the Product Environments page of the Console Settings.
  2. Locate the Cloud Name for the product environment you want to use (displayed as a random string when you first sign up).
  3. Record this value for use in the theme setup.

Tip
We recommend changing your cloud name to something memorable, such as your site name, since the cloud name appears in every delivery URL you build. You can edit the cloud name if you have fewer than 1000 files in your account. Use the Edit option in the product environment's 3-dots menu.

Test Cloudinary URL structure

To test delivering an optimized, resized image or video, take a URL from your store and test it.

For images, given a URL from your store:

If you want optimized delivery with width 1000, you'll need to convert the Shopify URL to:

For videos, given a video URL:

Replace it with the optimized delivery URL:

Notes
You must use <your_cloud_name>/video or <your_cloud_name>/image in the prefix, depending on which file type you want to optimize and deliver.

Stage 2: Theme setup

Add Cloudinary settings to theme configuration

Set Cloudinary Image and Video hostnames as theme variables in the Theme settings (settings_schema.json).

Edit the settings_schema.json and add the following global theme settings:

Add the cloudinary-url snippet

Add the cloudinary-url.liquid snippet to the /snippets/ directory of your theme. This snippet enables you to replace Shopify image and video URLs with Cloudinary URLs throughout your theme files.

For implementation examples showing how to use the cloudinary-url snippet in different themes, see the cloudinary-shopify-theme-delivery repository.

For additional assistance with your implementation, contact Cloudinary support.

✔️ Feedback sent!

Rate this page: