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. Mobile commerce will account for more than two billion transactions by the end of 2017 and will only increase in importance over time. Given this trend and the critical importance of mobile when researching and buying a product online, it’s a smart investment to ensure all your product images are optimized for mobile. This article will demonstrate 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:
Step 1: Sign up for an ImageEngine account
If you haven’t done so already, go to ImagEngine.io and sign up for a free trial. 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.
Step 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.
Step 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.
Just below the <head> tag, add this line:
<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width, Save-Data">
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, “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' }}`"
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.
Step 4: 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: //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. 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.
