How to integrate ImageKit on Shopify store

ImageKit.io is an image management service for online businesses. It provides intelligent real-time image optimization, resizing, cropping, and fast CDN delivery. 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.

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

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.

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.

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.

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:

Example 2:

Example 3:

If there is a tag inside image URL and you cannot simply assign it, use {% capture %}

Source: ImageKit

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *