We're Still Open!

We're still open for business during COVID-19. Contact us with any questions or concerns at contact@imageengine.io.

Documentation

Shopify ImageEngine Integration

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:

# 1. Sign up for an ImageEngine account:

If you haven’t done so already, 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 images.mysite.com we will generate images.mysite.com.imgeng.in, which you can then CNAME). If you are on the Pro plan, a solutions engineer will help set you up.

# 2. Log into your Shopify account:

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.

Shopify Theme Editor

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:

<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width">

This will allow ImageEngine to optimize images even better.

Shopify Enable Client Hints

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.

Shopify Theme Section Configuration

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, “images.yoursite.com.imgeng.in”, then we will replace the shopify CDN url with:

src="@{{ image | product_img_url: 'medium' | replace:'cdn.shopify.com', 'images.yoursite.com.imgeng.in' }}"

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

//images.yoursite.com.imgeng.in/s/files/1/2317/9343/products/car.jpg

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.

Shopify Template Edit Example

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

# 4. Test the site

There are many ways to check that images are being served through the ImageEngine CDN. You need to check the URL of the image. The original image URL should be prefixed with your ImageEngine hostname. For example: //images.yoursite.com.imgeng.in/http://cdn.shopify.com/s/files/1/2317/9343/products/car.jpg

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.

Chrome Inspector Network Tab

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