Optimize images on Shopify website with ImageKit

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 confident of making these changes on your own, you can get in touch with our team at developer@imagekit.ioand we will be happy to assist you with integration of ImageKit on your 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/{imagekitId} (Read about ImageKit’s URL structure here).

2. Log in to your ImageKit dashboard and go to the “Migration” section. Click on the “Add New Source” button.

3. Fill in the following values in the form that appears

Click on “Save”. In the “ImageKit URL Patterns” section,  you will find this new source added in “Sources preference” with the “Default URL pattern”.

4. Test any one of your website images by replacing https://cdn.shopify.com with https://ik.imagekit.io/{your_imagekitId}

5. Now to make this replacement for all images on your website, we need to make some changes to the Shopify settings and theme files. The change would instruct Shopify to make the above replacement in the URL every time.

6. 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://blog.imagekit.io/imagekit-io-and-shopify-integration-7db6555b8a56) to learn more about this."
        },
        {
            "type": "checkbox",
            "id": "enableImageKit",
            "label": "Enable Imagekit"
        },
        {
            "type": "text",
            "id": "imagekitUrl",
            "label": "ImageKit url pattern",
            "info":"The url pattern you set within ImageKit. Example: `https://ik.imagekit.io/my-website/`</a>."
        },
        {
            "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."
        }
    ]
}

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


{% capture IMAGEKIT %}
  {% comment %}
    <!--
      Convert a Shopify CDN path into an ImageKit path.
      * Check out ImageKit.io and Shopify integration blog post to learn more: https://blog.imagekit.io/imagekit-io-and-shopify-integration-7db6555b8a56
    -->
  {% 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 }}

8. Navigate to Online store > Themes > Customize theme. In the sidebar, under general settings open ImageKit and enable it. Fill out the ImageKit URL pattern which would normally be https://ik.imgekit.io/<imagekit id>/ if you are using the default URL pattern and then hit “Save”

9. 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 %}">

10. Once you are done editing files, visit your store, open developer tools and hit refresh.

11. Now to verify if the changes have taken place, find the URL of any image on your website and see that it begins with https://ik.imagekit.io/{your_imagekitId} and that the image loads properly.

12. 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.

Please reach out to us at developer@imagekit.io in case you have any questions or concerns about the above configuration or if you want our team to assist you with these changes.