Shopify is a e-commerce platform that has gained quite a lot of traction in the last few years given the great feature set, ease of use and nominal pricing that comes with starting an e-commerce store on Shopify.

Integrating ImageKit on Shopify store allows you to improve your image quality and delivery speed.

Here are the steps to optimize images on your Shopify website. The integration with Shopify involves making some changes to your website’s theme files. If you are not a technical person or are confident of making these changes on your own, you can get in touch with our team by creating a support ticket from your ImageKit dashboard and our team will be happy to assist you with integration of ImageKit on your Shopify website for a nominal one-time fee.

Steps to optimize images using ImageKit on your Shopify website

1. Currently, the images on your Shopify website will have a URL structure like

https://cdn.shopify.com/s/files/1/1510/6482/t/7/assets/my_image.jpg?14608454450021879749

To deliver this image via ImageKit, we will need to replace https://cdn.shopify.com in the URL with https://ik.imagekit.io/<your_imagekitId>

2. Create an account if you have not registered already. While creating an account, choose an appropriate ImageKit ID, as it will be a unique identifier in your image urls.

3. Log in to your ImageKit dashboard and go to the Integration section.

4. Add a new image origin by clicking on the "Add Origin" button.

5. To integrate ImageKit with the images on your server, you need to add your server as an origin for ImageKit. For this purpose, we need to set the origin type as "Web Server - HTTP(S) server and Magento, Shopify, Wordpress etc.". The value of the Base URL should be "https://cdn.shopify.com".

6. Click on Submit.

7. The first image origin that you add is automatically added to the list of origins accessible through the default URL endpoint i.e. https://ik.imagekit.io/your_imagekitId. You can modify this by editing "origin sequence". You can either continue to use the “Default URL endpoint” or create a new URL endpoint if you want to manage multiple image origins with ImageKit.

9. Before we move to the next step, we will verify if the images on your Shopify website are now accessible via ImageKit.

For example, if the image URL on your store looks like:

https://cdn.shopify.com/s/files/1/1510/6482/t/7/assets/my_image.jpg?14608454450021879749

and you added https://cdn.shopify.com/ as the base URL while adding the origin, then for this the URL via ImageKit will be

https://ik.imagekit.io/{your_imagekitId}/s/files/1/1510/6482/t/7/assets/my_image.jpg?14608454450021879749

Here, we have replaced the value of the base URL, https://cdn.shopify.com, with, https://ik.imagekit.io/<your_imagekitId>

You will need to replace {your_imagekitId} with your own ImageKit ID.

If the above change does not work for your images, then you can get in touch with our team to help you with the integration by creating a support ticket from your ImageKit dashboard. 

11. If the above image did work correctly, we can now proceed to make the changes in our Shopify settings and theme files to switch the image delivery and optimization to ImageKit.

12. From your Shopify admin, click Online Store, and then click Themes. Find the theme you want to edit, click the “..." button, and then click Edit HTML/CSS.

Under Config, click settings_schema.json. The settings_schema.json file contains the definitions for your theme settings, grouped into sections according to the setting type.

Copy the code below as the last section of config file and hit save.

{
    "name": "ImageKit",
    "settings": [
        {
            "type": "paragraph",
            "content": "Check out ImageKit's [ImageKit.io and Shopify integration](https://help.imagekit.io/integrating-imagekit/quick-integration/integrate-imagekit-on-shopify-store) to learn more about this."
        },
        {
            "type": "checkbox",
            "id": "enableImageKit",
            "label": "Enable Imagekit"
        },
        {
            "type": "text",
            "id": "imagekitUrl",
            "label": "ImageKit url endpoint",
            "info":"The url endpoint you set within ImageKit. Example: `https://ik.imagekit.io/your-imagekitId/`."
        },
        {
            "type": "text",
            "id": "imagekitShopifyCdnUrl",
            "label": "Shopify CDN domain",
            "default":"//cdn.shopify.com",
            "info":"Do not change this unless you have a proxy in place. Not sure? Leave it as is."
        }
    ]
}

13. Create a new file “imagekit.liquid” under Snippets directory. Copy the code below into that file, and save it.

{% capture IMAGEKIT %}
  {% comment %}
   
  {% endcomment %}
  {% if settings.enableImageKit %}
    {% for i in (1..1) %}  
      {% unless src or settings.imagekitUrl != blank %}
        #{{ src }}
        {% break %}
      {% endunless %}
      {% assign cdnUrl = settings.imagekitShopifyCdnUrl | strip %}
      {% unless src contains cdnUrl %}
        #{{ src }}
        {% break %}
      {% endunless %}
      {% assign imagekitUrl = settings.imagekitUrl | strip %}
      {% assign tempImagekitUrl = imagekitUrl %}
      {% assign lastChar = imagekitUrl | slice:-1 %}
      {% assign imagekitUrlLength = imagekitUrl | size %}
      {% assign newImagekitUrl = imagekitUrlLength | minus:1 %}
      {% if lastChar == "/" %}
        {% assign tempImagekitUrl = imagekitUrl | slice:0,newImagekitUrl %}
      {% endif %}
      {% assign newSrc = src | strip | replace:cdnUrl,tempImagekitUrl %}
    {% endfor %}
    #{{ newSrc | default:src }}
  {% else %}
    #{{ src }}
  {% endif %}
{% endcapture %}#{{ IMAGEKIT | strip | replace:'  ' | strip_newlines }}

14. Navigate to Online store > Themes > Customize theme. In the sidebar, under general settings open ImageKit and enable it. Fill out the default URL endpoint which would be https://ik.imagekit.io/<your_imagekitId>/ and then hit "Save"

15. Now we get to editing your theme files. We first need to find out the files which are responsible for the output of image on your store and start editing them.

Before making changes in these files, it is recommended that you download and save them securely to be able to restore it later, in case of error.

Here are a couple of examples indicating the change that needs to be made in the theme files. You can follow similar steps to change all of your theme files.

Example 1

Before
<img class="grid-view-item__image" src="{% product.featured_image.src | img_url: grid_image_width %}" alt="{{ product.featured_image.alt }}">

After
{% assign old_img_url = product.featured_image.src | img_url:grid_image_width %}
<img class="grid-view-item__image" src="{% include 'imagekit' src:old_img_url %}" alt="{{ product.featured_image.alt }}">

Example 2

Before:
<img src="{% featured_img_src | img_url: product_image_size %}" alt="{{ featured_img_alt }}" id="FeaturedImage-{{ section.id }}" class="product-featured-img{% if enable_zoom %} js-zoom-enabled{% endif %}">

After:
{% assign old_img_url = featured_img_src | img_url: product_image_size %}
<img src="{% include 'imagekit' src:old_img_url %}" alt="{{ featured_img_alt }}" id="FeaturedImage-{{ section.id }}" class="product-featured-img{% if enable_zoom %} js-zoom-enabled{% endif %}">

14. Once you are done editing these files, save these files. Now refresh the webpage for your Shopify store and check the image URLs. They should now load from URLs beginning with https://ik.imagekit.io/<your_imagekitId>/. You can use the Chrome Developer Tools to check that all the images are being loaded via ImageKit and that all images are loading correctly.

15. If you find that images on a particular page or section is still being served from Shopify, then find out the responsible theme file and edit it as well.

What next?

Now that you have successfully configured ImageKit to fetch images from your Shopify store, you might want to understand image url construction in ImageKit and start delivering resized and optimized images.

Questions?

In case you have any questions, please create a support ticket from your dashboard or if you are on a paid plan, start a conversation by clicking on the chat icon in the bottom right.

Did this answer your question?