Shopify

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.

This integration optimizes the images you already upload to Shopify, server-side. If instead you are hand-placing images from an Autorender workspace into a theme, Autorender Native sizes them client-side from a single script tag.

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
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.

Open Configurations → Sources in the Autorender dashboard (app.autorender.io/sources).
Click Create Source.
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.

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:

{
  "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:

{% 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 %}
    <img src="{% render 'autorender', src: img, width: 800 %}">

  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

In your Shopify admin, go to Online Store → Themes → Customize.
Open Theme settings (gear icon) → Autorender.
Enter your Workspace ID and Origin Name from step 1.
Check Enable Autorender.
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 <img> (product cards, the gallery, and so on) and replace it with this pattern:

{%- 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 -%}
<img
  src="{% render 'autorender', src: img, width: 800 %}"
  srcset="{{ srcset | strip_newlines | replace: '  ', ' ' | strip }}"
  sizes="(min-width: 990px) 25vw, 50vw"
  alt="{{ product.featured_media.alt | escape }}"
  loading="lazy"
  width="{{ product.featured_media.width }}"
  height="{{ product.featured_media.height }}"
>

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:

{% 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.

Wire up the Autorender Shopify integration — settings group, snippet, and templates.

Open in Cursor

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.

Get started

Storage

Native (HTML)

Transformations

Optimization

Video

Build with AI

Resources

How does it work?

Prerequisites

1. Create a source

2. Verify the URL mapping

3. Add Autorender settings to your theme

4. Create the Autorender snippet

5. Enable Autorender in your theme settings

6. Update your theme templates

Put the width in the path, not the query

Integrate with an AI coding agent

Troubleshooting

Next steps

Source path

Resize and aspect ratio

​How does it work?

​Prerequisites

​1. Create a source

​2. Verify the URL mapping

​3. Add Autorender settings to your theme

​4. Create the Autorender snippet

​5. Enable Autorender in your theme settings

​6. Update your theme templates

​Put the width in the path, not the query

​Integrate with an AI coding agent

​Troubleshooting

​Next steps

Source path

Resize and aspect ratio

How does it work?

Prerequisites

1. Create a source

2. Verify the URL mapping

3. Add Autorender settings to your theme

4. Create the Autorender snippet

5. Enable Autorender in your theme settings

6. Update your theme templates

Put the width in the path, not the query

Integrate with an AI coding agent

Troubleshooting

Next steps