Shopify

​
 
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.
Integration steps
Integrating ImageKit on Shopify store allows you to improve your image quality and delivery speed.
The integration with Shopify involves making some changes to your website’s theme files.
Here are the steps to optimize images on your Shopify website
Step 1: Configure origin in ImageKit.io dashboard
Configure a web server origin based on where your images are stored. In Shopify, this is your CDN base URL i.e. https://cdn.shopify.com, https://cdn2.shopify.com or https://cdn.shopifycloud.com. You can check this under the network panel tab in Chrome like shown in the screenshot below:
Step 2: Fetch image through ImageKit.io endpoint
Let's quickly fetch the image using ImageKit.io URL-endpoint and see if it's working.
When you add the first origin in your account, it automatically becomes accessible through the default URL-endpoint, that is https://ik.imagekit.io/your_imagekit_id. Otherwise, you will have to configure an existing URL endpoint or create a new one to fetch images from this newly added origin.
If your old image URL was https://cdn.shopify.com/img/s/files/1/1510/6482/t/22/assets/logo-mobile.png , then the same image should be accessible through ImageKit.io URL-endpoint, i.e., https://ik.imagekit.io/your_imagekit_id/img/s/files/1/1510/6482/t/22/assets/logo-mobile.png​
Unable to fetch image?
Contact [email protected] if you are not able to fetch the image as explained above. In such a situation, do not move to step 3 as this could break your website images.
Step 3: Create settings_schema.json
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.
From your Shopify admin, click Online Store ➡
Themes. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.
Under Config, click settings_schema.json and copy the code below as the last section of config file and hit save.
1
{
2
    "name": "ImageKit",
3
    "settings": [
4
        {
5
            "type": "paragraph",
6
            "content": "Check out ImageKit's [ImageKit.io and Shopify integration](https://docs.imagekit.io/imagekit-docs/shopify) to learn more about this."
7
        },
8
        {
9
            "type": "checkbox",
10
            "id": "enableImageKit",
11
            "label": "Enable Imagekit"
12
        },
13
        {
14
            "type": "text",
15
            "id": "imagekitUrl",
16
            "label": "ImageKit url endpoint",
17
            "info":"The url endpoint you set within ImageKit. Example: `https://ik.imagekit.io/your_imagekit_id/`."
18
        },
19
        {
20
            "type": "text",
21
            "id": "imagekitShopifyCdnUrl",
22
            "label": "Shopify CDN domain",
23
            "default":"//cdn.shopify.com",
24
            "info":"Do not change this unless you have a proxy in place. Not sure? Leave it as is."
25
        }
26
    ]
27
}
Copied!
Step 4: Create imagekit.liquid file
Create a new file imagekit.liquid under Snippets directory. Copy the code below into that file, and save it.
1
{% capture IMAGEKIT %}
2
  {% if settings.enableImageKit %}
3
    {% for i in (1..1) %}
4
      {% unless src or settings.imagekitUrl != blank %}
5
        {{ src }}
6
        {% break %}
7
      {% endunless %}
8
      {% assign cdnUrls = settings.imagekitShopifyCdnUrl | split: ',' %}
9
    {% if cdnUrls.size  == 0 %}
10
    {{ src }}
11
        {% break %}
12
    {% endif %}
13
      {% assign cdnUrl = cdnUrls[0] %}
14
      {% for temp in cdnUrls %}
15
        {% if src contains temp %}
16
          {% assign cdnUrl = temp %}
17
          {% break %}
18
        {% endif %}
19
      {% endfor %}
20
    {% assign cdnUrl = cdnUrl | strip %}
21
    {% unless src contains cdnUrl %}
22
        {{ src }}
23
        {% break %}
24
      {% endunless %}
25
    {% assign imagekitUrl = settings.imagekitUrl | strip %}
26
      {% assign tempImagekitUrl = imagekitUrl %}
27
      {% assign lastChar = imagekitUrl | slice:-1 %}
28
      {% assign imagekitUrlLength = imagekitUrl | size %}
29
      {% assign newImagekitUrl = imagekitUrlLength | minus:1 %}
30
      {% if lastChar == "/" %}
31
        {% assign tempImagekitUrl = imagekitUrl | slice:0,newImagekitUrl %}
32
      {% endif %}
33
    {% assign newSrc = src | strip | replace:cdnUrl,tempImagekitUrl %}
34
    {{ newSrc | default:src }}
35
    {% endfor %}
36
  {% else %}
37
    {{ src }}
38
  {% endif %}
39
{% endcapture %}{{ IMAGEKIT | strip | replace:'  ' | strip_newlines }}
Copied!
Step 5: Enable ImageKit.io
Navigate to Online store ➡
Themes ➡
Customize theme. In the sidebar, under general settings open ImageKit and enable it. Fill out the below two fields:
Default URL endpoint - It should be https://ik.imagekit.io/your_imagekit_id
Shopify CDN domain - Its value should be //cdn2.shopify.com,//cdn.shopify.com
Hit the "Save" button.
Step 6: Edit theme files
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.
Backup your theme files
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
1
Before
2
<img class="grid-view-item__image" src="{% product.featured_image.src | img_url: grid_image_width %}" alt="{{ product.featured_image.alt }}">
3
​
4
After
5
{% assign old_img_url = product.featured_image.src | img_url:grid_image_width %}
6
<img class="grid-view-item__image" src="{% include 'imagekit' src:old_img_url %}" alt="{{ product.featured_image.alt }}">
Copied!
Example 2
1
Before:
2
<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 %}">
3
​
4
After:
5
{% assign old_img_url = featured_img_src | img_url: product_image_size %}
6
<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 %}">
Copied!
Example 3
If there is a tag inside image URL and you cannot simply assign it, use capture​
1
Before:
2
<img width="{{ image.width }}" height="{{ image.height }}" src="{{ image | img_url: '50x50' }}" class="lazyload attachment-shop_single size-shop_single sp-post-image" alt="{{image.alt}}" title="{{product.title}}" 
3
data-src="{{ img_url }}" 
4
data-large_image="{%-include 'gl_image_format',cache:true, src: image.src, size: product_image_photowipe -%}" data-large_image_width="{{ image.width }}" data-large_image_height="{{ image.height }}" 
5
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ image.aspect_ratio }}" data-sizes="auto">
6
​
7
After:
8
{% assign old_img_src = image | img_url: '50x50' %}
9
{% assign old_img_data_src = img_url %}
10
​
11
{% capture old_img_data_large_image %}
12
{%-include 'gl_image_format',cache:true, src: image.src, size: product_image_photowipe -%}
13
{% endcapture %}
14
<img width="{{ image.width }}" height="{{ image.height }}" src="{% include 'imagekit' src:old_img_src %}" class="lazyload attachment-shop_single size-shop_single sp-post-image" alt="{{image.alt}}" title="{{product.title}}" 
15
data-src="{% include 'imagekit' src:old_img_data_src %}" 
16
data-large_image="{% include 'imagekit' src:old_img_data_large_image %}" data-large_image_width="{{ image.width }}" data-large_image_height="{{ image.height }}" 
17
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ image.aspect_ratio }}" data-sizes="auto">
Copied!
FAQ
Can I disable ImageKit.io with a single click?
Yes you can enable and disable ImageKit.io on your Shopify store with a single click. Navigate to Online store > Themes > Customize theme. In the sidebar, under general settings open ImageKit.io and enable/disable it.
Can ImageKit.io automatically detect the right image dimension and load it?
No ImageKit.io only changes the base URL of your images because there is no way the server would have knowledge of your website layout. However, just by loading images through ImageKit.io URL-endpoint, your images are automatically optimized for format and quality.
How do I make sure my integration is working?
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_imagekit_id. You can use the Chrome Developer Tools to check that all the images are being loaded via ImageKit.io and that all images are loading correctly. 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.