Skip to main content
Autorender Native is one <script> tag, so adding it to a hosted platform means pasting that tag into the site’s head. This page shows where the head is on each platform, and when a server-side integration is the better fit instead.
There are two ways to run Autorender on a CMS. Native (this section) is client-side: you mark elements with data-ar-src and the runtime delivers images from your Autorender workspace. A platform integration (Shopify, WordPress) is server-side: it rewrites the platform’s existing media URLs in place, with no client JavaScript. Pick one per site — see Native or a platform integration? below.

​
Where does the tag go?

On every platform the rule is the same: load the tag once, in the document <head>, with defer.

​
Shopify

Add the tag to layout/theme.liquid, just before </head>, under Online Store → Themes → Edit code.
If you want to optimize the store images you already upload to Shopify, use the Shopify integration instead — it rewrites your theme’s image URLs server-side and needs no client script. Reach for Native only when you are placing images from an Autorender workspace into the theme yourself.

​
WordPress

Add the tag to your theme’s header.php before </head>, or through a header-snippet plugin so a theme update never removes it.
To optimize the media in your WordPress library automatically, use the WordPress plugin instead — it rewrites src and srcset on the front end and adds an Autorender media picker. Use Native when you are hand-placing workspace images in templates.

​
Webflow

Open Site settings → Custom code → Head code, paste the tag, and publish. For a single page instead of the whole site, use the page’s Custom code → Inside head tag field. Webflow images set through the Designer keep their own URLs, so mark the elements you want Autorender to size with data-ar-src in an embed or via custom attributes.

​
Google Tag Manager

Create a Custom HTML tag, paste the script, and set the trigger to Initialization – All Pages so it loads as early as GTM allows. Because GTM injects the tag after the initial parse, use the hero pattern for your Largest Contentful Paint image rather than relying on the runtime.

​
Plain HTML or a static site

Add the tag to the <head> of your template or layout. That is the whole install:

​
Native or a platform integration?

Both deliver optimized images; they differ in what they optimize and how. Run one approach per site. Using both on the same images means two systems rewriting the same URLs.

​
Next steps

Introduction

Add the tag and mark your first image.

Hero and LCP

Preload the largest image, which GTM and late-injected tags can delay.

Shopify integration

The server-side alternative for optimizing existing Shopify media.

WordPress integration

The plugin alternative for optimizing an existing WordPress library.