> ## Documentation Index > Fetch the complete documentation index at: https://autorender.io/docs/llms.txt > Use this file to discover all available pages before exploring further. # Shopify > Route Shopify store images through Autorender for automatic optimization and modern format delivery. Route your Shopify store images through Autorender to serve them optimized and in modern formats, without changing how you upload images to Shopify. Autorender fetches each original from your store on demand, so no files are migrated or duplicated. ## How does it work? Shopify serves store images from URLs like: ``` https://your-store.myshopify.com/cdn/shop/files/product.jpg?v=123&width=360 ``` After setup, your theme rewrites those URLs to route through Autorender: ``` https://assets.autorender.io/{workspace}-{origin}/cdn/shop/files/product.jpg?v=123 ``` You apply Autorender's transform syntax directly in your template to control resizing and format. This sets the width to **360 px** (`w_360`): ``` https://assets.autorender.io/{workspace}-{origin}/w_360/cdn/shop/files/product.jpg?v=123 ``` Autorender fetches the original from Shopify, applies your transforms, and serves the result from its global edge network. ## Prerequisites * An Autorender account with a workspace — [sign up at app.autorender.io](https://app.autorender.io) * A Shopify store with theme editing access (**Online Store → Themes → Edit code**) *** ## 1. Create a source A source tells Autorender where to fetch your images from. 1. Open **Configurations → Sources** in the Autorender dashboard ([app.autorender.io/sources](https://app.autorender.io/sources)). 2. Click **Create Source**. 3. Fill in the form: | Field | Value | | :-------------- | :----------------------------------------------------------------------------------- | | **Origin Name** | A short identifier, e.g. `shopify` (letters, numbers, hyphens, and underscores only) | | **Origin Type** | Image Source | | **Base URL** | `https://your-store.myshopify.com` | Leave **Canonical Header** and **Forward Header** at their defaults unless your store requires otherwise. 4. Click **Create Source** and note your **workspace ID** and **origin name** — you need both below. Your workspace ID is visible in the dashboard URL and under workspace settings. It looks like `aqucPWk0NG`. *** ## 2. Verify the URL mapping Before touching any theme code, confirm the source works. Take any image URL from your store: ``` https://your-store.myshopify.com/cdn/shop/files/product.jpg?v=1776855235&width=360 ``` Swap the host for your Autorender delivery prefix: ``` https://assets.autorender.io/{workspace}-{origin}/cdn/shop/files/product.jpg?v=1776855235&width=360 ``` Open that URL in a browser. You should see the same image served by Autorender. If it loads, the source is working. Do not proceed to step 3 until this works. Continuing with a misconfigured source breaks images once you update your theme files. To find the correct image URL to test, open your store in a browser, right-click any product image, and copy the image address. The host in that URL is the value to use as the **Base URL** in your source. *** ## 3. Add Autorender settings to your theme These settings give store owners a toggle to enable or disable Autorender and a place to enter their workspace credentials — all from the Shopify admin, with no code edits. In your Shopify admin, go to **Online Store → Themes → Edit code**. Under `config/`, open (or create) `settings_schema.json`. Add the following object to the top-level array in that file: ```json theme={null} { "name": "Autorender", "settings": [ { "type": "paragraph", "content": "Serve images through Autorender for automatic optimization and modern format (AVIF/WebP) delivery. [Learn more](https://autorender.io)" }, { "type": "checkbox", "id": "autorender_enabled", "label": "Enable Autorender", "default": false }, { "type": "text", "id": "autorender_workspace_id", "label": "Workspace ID", "info": "Your Autorender workspace ID. Find it in your Autorender dashboard." }, { "type": "text", "id": "autorender_origin_name", "label": "Origin Name", "info": "The origin name you chose when creating the source in Autorender." } ] } ``` After you save, these fields appear under **Customize → Theme settings → Autorender** in your Shopify admin. *** ## 4. Create the Autorender snippet This snippet rewrites any Shopify image URL to serve through Autorender. It's a drop-in helper you call from other templates. Under `snippets/` in your theme, create a file named `autorender.liquid` and paste the following: ```liquid theme={null} {% comment %} Rewrites a Shopify image URL to serve through Autorender. Accepts: - src: {String} URL from the image_url filter. Pass the master image (image_url with no width). Required. - width: {Number} Delivered width in px. Adds /w_N so Autorender resizes from the master. Optional, but set it for every responsive image. Autorender fetches the master once and resizes from it, so Shopify never resizes twice and you keep the best quality. Call this one snippet everywhere — single images and each srcset entry — so the rewrite logic lives in one place. Usage (single image): {% assign img = product.featured_image | image_url %} When Autorender is disabled, the snippet falls back to a Shopify-sized URL, so responsive images keep working while the setting is off. {% endcomment -%} {% capture autorender %} {% if settings.autorender_enabled and src != blank and settings.autorender_workspace_id != blank and settings.autorender_origin_name != blank %} {% assign no_proto = src | remove_first: "//" %} {% assign host = no_proto | split: "/" | first %} {% assign path = no_proto | remove_first: host %} {% if width != blank %}{% assign transform = "/w_" | append: width %}{% else %}{% assign transform = "" %}{% endif %} {{ "https://assets.autorender.io/" | append: settings.autorender_workspace_id | append: "-" | append: settings.autorender_origin_name | append: transform | append: path }} {% elsif width != blank %} {% if src contains "?" %}{{ src | append: "&width=" | append: width }}{% else %}{{ src | append: "?width=" | append: width }}{% endif %} {% else %} {{ src }} {% endif %} {% endcapture %}{{ autorender | strip | replace:' ', '' | strip_newlines }} ``` Always pass the **master image** — `image_url` with no width — and let Autorender resize through the `width` param. The `/w_{width}` segment is what resizes, so a single image and every `srcset` entry call the same snippet. When Autorender is disabled, the snippet returns a Shopify-sized URL (falling back to Shopify's own `?width=` resize), so toggling the setting off never ships full-resolution images. *** ## 5. Enable Autorender in your theme settings 1. In your Shopify admin, go to **Online Store → Themes → Customize**. 2. Open **Theme settings** (gear icon) → **Autorender**. 3. Enter your **Workspace ID** and **Origin Name** from step 1. 4. Check **Enable Autorender**. 5. Save. Open a collection or product page and inspect an image URL in browser devtools. A correctly rewritten URL starts with your Autorender delivery prefix: ``` https://assets.autorender.io/{workspace}-{origin}/... ``` If the URL still points to Shopify's CDN, the theme template hasn't been updated yet. *** ## 6. Update your theme templates Back up your theme before changing any template files. In your Shopify admin, go to **Online Store → Themes → ⋯ → Duplicate** to create a copy you can restore from. Most Shopify themes render product images with `srcset` for responsive loading. Call the same `autorender.liquid` snippet for each entry — capture the master image once, then render the snippet per width. One snippet handles every image on the page, so the rewrite logic never gets duplicated or out of sync. Find where a template outputs its `` (product cards, the gallery, and so on) and replace it with this pattern: ```liquid theme={null} {%- assign img = product.featured_media | image_url -%} {%- capture srcset -%} {% render 'autorender', src: img, width: 400 %} 400w, {% render 'autorender', src: img, width: 800 %} 800w, {% render 'autorender', src: img, width: 1200 %} 1200w {%- endcapture -%} {{ product.featured_media.alt | escape }} ``` `img` is the master image (`image_url` with no width). Each `render` call adds its own `/w_{width}`, so Autorender resizes every candidate from the master. Match the width list and `sizes` value to what the original template used. Start with the snippets that render product cards and the product gallery — they cover most of the image traffic in a Shopify store. ### Put the width in the path, not the query Most themes already build a `srcset` from Shopify's own sized URLs. The tempting shortcut is to swap only the host and leave those URLs alone: ```liquid theme={null} {% comment %} Wrong: swaps the host, keeps Shopify's ?width= query {% endcomment %} {%- assign sized = media.preview_image | image_url: width: 600 -%} {{ sized | replace: shop.permanent_domain, 'assets.autorender.io/{workspace}-{origin}' }} {% comment %} → assets.autorender.io/{workspace}-{origin}/cdn/shop/files/product.jpg?v=123&width=600 {% endcomment %} ``` Autorender resizes from the **path** (`/w_600`), not from the `?width=` query. It drops the query, fetches the master, and serves it unresized — so every `srcset` candidate downloads the full master. A **1600 px** master then ships at **\~30 KB** for every size instead of **\~4.5 KB** at `w_246`, and the browser gains nothing from the `srcset`. The `render 'autorender'` pattern above puts the width in the path (`/w_600`), where Autorender reads it. Confirm it by copying one `srcset` URL from devtools — it must contain `/w_600/`, not `?width=600`. **Verify after each template change** After you save a file, reload your store and open browser devtools (Network tab, filter by image). Confirm the updated template's images come from `assets.autorender.io`. Any image still loading from Shopify's CDN points to a template file you haven't updated yet. *** ## Integrate with an AI coding agent If you edit your theme in an AI coding agent (Cursor, Claude Code, or similar), copy the prompt below. It carries the snippet contract and the rules that keep the integration correct, so the agent wires up the settings, snippet, and templates for you. You are integrating Autorender image delivery into a Shopify theme. SETUP 1. In config/settings\_schema.json, add an "Autorender" settings group with: autorender\_enabled (checkbox, default false), autorender\_workspace\_id (text), autorender\_origin\_name (text). 2. In snippets/, create autorender.liquid that rewrites a Shopify image URL to: [https://assets.autorender.io/WORKSPACE\_ID-ORIGIN\_NAME/w\_WIDTH/IMAGE\_PATH](https://assets.autorender.io/WORKSPACE_ID-ORIGIN_NAME/w_WIDTH/IMAGE_PATH) Guard it on settings.autorender\_enabled, non-blank workspace\_id + origin\_name, and a non-blank src. 3. In each template that renders images, call the snippet for the src and for every srcset entry. SNIPPET CONTRACT * src: master image URL — the image\_url filter with NO width * width: delivered width in px — the snippet adds /w\_WIDTH * Delivery URL: [https://assets.autorender.io/WORKSPACE\_ID-ORIGIN\_NAME/w\_WIDTH/cdn/shop/](https://assets.autorender.io/WORKSPACE_ID-ORIGIN_NAME/w_WIDTH/cdn/shop/)... ALWAYS 1. Pass the master image (image\_url with no width) and resize via the width param. 2. Add a width to every srcset entry so Autorender resizes each candidate. 3. Call render 'autorender' for the src and each srcset entry — never inline the URL build. 4. Guard on all three settings (autorender\_enabled, autorender\_workspace\_id, autorender\_origin\_name) and a non-blank src. 5. Keep the original sizes, width, height, and alt attributes. NEVER 1. Do not rely on Shopify's ?width= param to resize through Autorender — /w\_WIDTH is what resizes. 2. Do not swap the host without adding /w\_WIDTH; that ships full-resolution images. 3. Do not duplicate the rewrite logic inline when a snippet call works. 4. Do not hardcode the workspace ID or origin name — read them from theme settings. 5. Do not change the delivery host — it is always assets.autorender.io. VERIFY BEFORE RETURNING * Every rendered image URL starts with [https://assets.autorender.io/WORKSPACE\_ID-ORIGIN\_NAME/](https://assets.autorender.io/WORKSPACE_ID-ORIGIN_NAME/) * Each srcset candidate carries a distinct /w\_WIDTH (the master src may have none) * Toggling autorender\_enabled off restores the original Shopify URLs * The page's sizes attribute and image dimensions are unchanged Reference: [https://autorender.io/docs/llms.txt](https://autorender.io/docs/llms.txt) and [https://autorender.io/docs/llms-full.txt](https://autorender.io/docs/llms-full.txt) *** ## Troubleshooting If images aren't delivering as expected, work through this table by symptom. | What you see | What it means | Fix | | :------------------------------------------------- | :------------------------------------------------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Image returns a **404** through Autorender | The Base URL, origin name, or workspace ID doesn't match your source | Confirm the Base URL matches the exact host in a raw store image URL, and that the origin name and workspace ID in theme settings match your Autorender dashboard. | | Images still load from Shopify's CDN | The template still outputs the original Shopify URL | Check **Enable Autorender** is on, and that you've called `render 'autorender'` (or the inline `ar_prefix` pattern) in that template file. | | Images download at full resolution on every screen | The srcset entries swap the host but omit the `/w_{width}` transform, so Autorender never resizes | Add `/w_{width}` to each srcset entry as shown in step 6. Don't rely on Shopify's `?width=` param to resize through Autorender. | | Format is not WebP or AVIF | The client didn't send an `Accept` header advertising modern-format support | Test in a real browser. Tools that don't send browser-like `Accept` headers receive the original format. | ## Next steps How Autorender fetches originals from a remote host. Control width, height, and fit on every delivery URL.