Shopify Integration

Shopify is one of the more popular "webshops-in-a-box" solutions out there. It's very easy to get started and it includes all the functionality users need to start a ready-to-use web shop. Managing product images is quite easy. Images are served from Shopify's own CDN (Content Delivery Network). However, Shopify's CDN lacks the crucial functionality to fully optimize images – especially for mobile. These steps explain how to implement ImageEngine in your Shopify theme.

Shopify makes most of its standard functionality easy to use. However, if a web shop owner wants to do something slightly more advanced, then he or she will need to do some manual work and file editing. Below are the steps you need to follow to enable image optimization in Shopify:

    If you haven't done so already, go to and get setup for ImageEngine. Once you have registered, ImageEngine will ask you to set up your domain and an origin (ex. if you set your domain at we will generate, which you can then CNAME). If you are on the Pro plan, a solutions engineer will help set you up.

    Next, we need to change your website so that it serves images through the ImageEngine CDN, instead of the default Shopify CDN. Unfortunately, there is no magic button you can push. But if you follow the steps below, it's pretty easy if you're slightly familiar with HTML and file editing.

  3. EDIT YOUR SHOPIFY THEME: First, log in to your Shopify admin section, find your active theme and click "Edit code" from the Actions dropdown.


Then, you'll be presented with file editor. You'll need to enable Client Hints. You do this by editing the "theme.liquid" file in the "Layout" folder.

Just below the tag, add this line:

This will enable ImageEngine to optimize image even better.


Now we need to actually change the URLs of all your product images. Don't worry, if you have 10,000 product images, we don't have to change 10,000 URLs. Shopify has a template system with code fragments which are included elsewhere in the theme depending on the type of page or layout. How many files you need to edit depends on your theme. The most important templates are:

product listings template search template product details template cart template landing page templates

The files are usually located under the "Sections" folder in the file editor, depending on how your theme is configured.


Before we start editing, please make sure to backup the current theme. You do so by clicking "Download theme file" from the Actions menu.

Next, go into the template file and identify all image tags. You can search for <img> by hitting Cmd+f or Ctrl+f and type <img>.

In the src attribute of the image tag we need to add the ImageEngine domain you received in Step 1. The src attribute looks something like this by default:

src="{{ image | img_url: '300x300' }}"

If your ImageEngine domain is, for example, "", then we will replace the shopify CDN url with:

src="{{ image | product_img_url: 'medium' | replace:'', '' }}"

(Note the http: at the end. This is needed because Shopify use relative protocol references: "//")

When an image is fed through this template, the above change will produce an image source looking like this:


CONGRATULATIONS, THE IMAGE IS NOW SERVED THROUGH IMAGEENGINE But we're not quite done yet. In the image below, you see a data-src attribute too. It's important to remember to prefix every point in the code which would reference an image. Where this is depends on your theme. For example, on the product details template there is an attribute called data-zoom. This must also be prefixed.


When you have edited all your template files, save them and head to your site to see the changes.

  1. TEST
    There are many ways to check that images are being served through ImageEngine CDN. You need to check the URL of the image. The original image URL should be prefixed with your ImageEngine hostname. For example: //

One way to do this is to open Chrome developer tools and filter the requests under the Network tab. Search for "imgeng" and you'll see the requests made.


Congratulations! Your images are now optimized and will load swiftly on any device or browser.