Shopify Integration

Cachely has first-class support for Shopify. It proxies and caches your Shopify storefront asset URLs and provides a response transformer that rewrites them in your Storefront API responses.

Supported URL patterns

Shopify serves assets from your store domain under the /cdn/ path prefix:

Product images and files:

https://cdn.shopify.com/s/files/1/0123/4567/8901/files/product.jpg
https://your-store.myshopify.com/cdn/shop/files/product.jpg

With image transformations:

https://cdn.shopify.com/s/files/1/0123/4567/8901/files/product.jpg?v=123&width=1920

These are rewritten to:

https://your-tenant.cachely.io/cdn/shop/files/product.jpg

Tenant setup

When creating your tenant, select Shopify as the CMS type and provide your store domain:

The origin is automatically configured from your store domain:

• Origin: https://your-store.myshopify.com

You can also use a custom Shopify domain (e.g. shop.your-brand.com) as the store domain.

Bandwidth pricing

Shopify does not charge for CDN bandwidth, so the CMS bandwidth overage rate for Shopify tenants is $0/GB. You still benefit from edge caching and the unified asset domain that Cachely provides.

Cachely SDK

Install the Cachely SDK to route Shopify API and asset requests through your edge domain:

npm install @cachely-io/sdk

Basic usage

Shopify is supported via the SDK's generic provider. Configure it with your store's API host and Shopify CDN host:

import { createGenericProvider, createCachelyFetch } from '@cachely-io/sdk'

const shopify = createGenericProvider({
  id: 'shopify',
  apiHosts: ['your-store.myshopify.com'],
  assetHosts: ['cdn.shopify.com'],
})

const cachelyFetch = createCachelyFetch({
  tenant: 'your-tenant',
  provider: shopify,
})

// Use as a drop-in fetch — both Storefront API and asset URLs are rewritten

Rewriting URLs without intercepting fetch

If you can't replace the fetch implementation, use createCachelyUrlRewriter:

import { createCachelyUrlRewriter, createGenericProvider } from '@cachely-io/sdk'

const shopify = createGenericProvider({
  id: 'shopify',
  apiHosts: ['your-store.myshopify.com'],
  assetHosts: ['cdn.shopify.com'],
})

const rewrite = createCachelyUrlRewriter({ tenant: 'your-tenant', provider: shopify })

const { url } = rewrite('https://cdn.shopify.com/your-store/img.jpg?width=800')
// → https://your-tenant.cachely.io/your-store/img.jpg?width=800

Shopify Image Transformations

Shopify's CDN supports on-the-fly image transformations via query parameters like ?width=800&height=600&crop=center. When assets are proxied through Cachely:

• The edge cache strips query parameters from the cache key for image types
• This means all image transformation variants share the same cache entry
• If you rely on Shopify's CDN transformations, the first cached version will be served for all variants

If you need different image sizes, apply transformations on the client side or serve each size from a different path.

Advanced

For more control — disabling proxying selectively, classifying URLs by hand, registering custom providers — see the Cachely SDK reference.