{
    "name": "ImageKit",
    "settings": [
        {
            "type": "paragraph",
            "content": "Check out ImageKit's [ImageKit.io and Shopify integration](https://docs.imagekit.io/imagekit-docs/shopify) 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_imagekit_id/`."
        },
        {
            "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."
        }
    ]
}

{% capture IMAGEKIT %}
  {% if settings.enableImageKit %}
    {% for i in (1..1) %}
      {% unless src or settings.imagekitUrl != blank %}
        {{ src }}
        {% break %}
      {% endunless %}
      {% assign cdnUrls = settings.imagekitShopifyCdnUrl | split: ',' %}
    {% if cdnUrls.size  == 0 %}
    {{ src }}
        {% break %}
    {% endif %}
      {% assign cdnUrl = cdnUrls[0] %}
      {% for temp in cdnUrls %}
        {% if src contains temp %}
          {% assign cdnUrl = temp %}
          {% break %}
        {% endif %}
      {% endfor %}
    {% assign cdnUrl = cdnUrl | 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 %}
    {{ newSrc | default:src }}
    {% endfor %}
  {% else %}
    {{ src }}
  {% endif %}
{% endcapture %}{{ IMAGEKIT | strip | replace:'  ' | strip_newlines }}

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 }}">

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

Before:
<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}}" 
data-src="{{ img_url }}" 
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 }}" 
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ image.aspect_ratio }}" data-sizes="auto">
​
After:
{% assign old_img_src = image | img_url: '50x50' %}
{% assign old_img_data_src = img_url %}
​
{% capture old_img_data_large_image %}
{%-include 'gl_image_format',cache:true, src: image.src, size: product_image_photowipe -%}
{% endcapture %}
<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}}" 
data-src="{% include 'imagekit' src:old_img_data_src %}" 
data-large_image="{% include 'imagekit' src:old_img_data_large_image %}" data-large_image_width="{{ image.width }}" data-large_image_height="{{ image.height }}" 
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ image.aspect_ratio }}" data-sizes="auto">