Shopify – ImageEngine

In Shopify, users can create impressive webshops using self-contained code snippets. In order to implement ImageEngine, a web developer will have to manually edit the image tags in the various templates that comprise the webstore.
Please note that you should only entrust this job to an experienced developer. Modifying the template code improperly can lead to conflicts that may cause the theme to improperly display images or otherwise break.

ImageEngine does not perform this integration as a service. However, we provide the steps below that can be used to enable ImageEngine's optimization in Shopify:

1. Sign up for an ImageEngine account:

To implement ImageEngine’s Image Optimization for Shopify, you will first need to sign up for an ImageEngine account if you do not already have an ImageEngine account {sign-up link}. During the signup process, you’ll be asked for your Domain and Origin. For more information about signing up, please refer to this article: Sign up.

Once signed up, you will be issued a brand-new unique delivery address following this pattern: “aabbcc.CDN.imgeng.in.” Custom delivery addresses may also be made after the initial signup process is complete. For more information, see our article here:https://imageengine.io/docs/implementation/domain-name
Please take note of your delivery address, as we will need it throughout the implementation.

2. Log into your Shopify account:

Next, we need to change your website to serve images through the ImageEngine delivery address that you have just created instead of the default Shopify CDN. Log in to your Shopify account to get started.

3. Backup

Before you begin editing, please make sure to back up the current theme. Log into your Shopify admin account, select the “Themes” section for the store you wish to modify.

To back up the theme, click “Download theme file” from the ‘Actions’ menu. Shopify will send the backup of the site to you by email.

With the backup created, we are ready to begin editing.

Select “Edit code” from the Actions dropdown.

The website file editor will open:

4. Add Client and Resource hints

To begin, you should enable Client Hints and a Preconnect Resource hint for ImageEngine. Client hints instruct the browser to pass some additional device information along with the image requests- enabling ImageEngine to more effectively provide optimized images. The preconnect is used to indicate an origin (in this case, the ImageEngine delivery address) that you will use to fetch the required resources. It allows for the Initiation of an early connection, which includes the DNS lookup, TCP handshake, and optional TLS negotiation, allows the user to reduce latency while establishing a connection.
You complete both tasks by editing the “theme.liquid” file in the “Layout” folder.

For the Client Hint, Just below the <head> tag, add this line:

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

Along with the other preconnect links, add the following Preconnect Resource Hint. Please ensure that you substitute your ImageEngine delivery address for the placeholder in the example ("yourimageenginedeliveryaddress"):

 <link rel="preconnect" href="https://yourimageenginedeliveryaddress">

For an example of how these may look when added to your theme:

5. Modify Templates to use ImageEngine for the images

Now we need to begin making changes to the URLs of your product images. Don’t worry; if you have 10,000 product images, we will not have to change 10,000 URLs. That's the beauty of template systems. Shopify's system uses code fragments included elsewhere in the theme depending on the type of page or layout. How many files you need to edit entirely depends on your theme.
Some examples of templates that commonly contain images are:

Product listings templates
Search template
Product details template
Cart template
Landing page templates

The template files should be located under the “Sections” folder in the file editor. There may be templates in other locations, depending on how your theme is configured.

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 your ImageEngine delivery address. 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

Note: keep in mind that if images are used within a data-src attribute, it’s important to remember to prefix these as well. Each point in the code that would reference an image will need to be modified. Where these will occur depends on your theme. For example, if the product details template uses data-zoom, the image tag must also have its src modified so that ImageEngine will serve it.

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

Please note that if you have additional 3rd party tools for caching, you may need to force them to refresh or disable them.

6. 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 have "cdn.shopify.com" exchanged with your ImageEngine hostname.

For example https://images.yoursite.com.imgeng.in/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. If You are using a Delivery address with our shared domain, search for “imgeng.in” and you’ll see the requests made; otherwise, search for the domain that you have configured to be the Delivery Address. For more information on locating ImageEngine served content, see this blog article: How to Inspect Images And See ImageEngine Optimization.

If some images are not being served, note whether the image is served from Shopify or an external source. If it is a Shopify-served image, you will need to find which template contains it and modify it to replace the original domain with the ImageEngine delivery address. You will need to do the same for external images, but you may also need to create a new Engine to handle these through an additional Delivery address, as each Engine may have only one Image Origin.