# Shopify integration

Cloudimage will accelerate your Shopify shop by compressing images and delivering them over CDN.

## Step 1. Configure an origin HTTP-Storage in Cloudimage <a href="#od_34f9d7f4" id="od_34f9d7f4"></a>

After finding out your Shopify URL as shown below (i.e. `https://cdn.shopify.com`, `https://cdn2.shopify.com` or `https://cdn.shopifycloud.com`), you can create a HTTP-Storage in Cloudimage.

<figure><img src="/files/uwQhHKitnCIBDaF2STY2" alt=""><figcaption></figcaption></figure>

Create the Storage record in the Cloudimage admin as follows:

<figure><img src="/files/jWE2CJseCslqtQrs5CMu" alt=""><figcaption></figcaption></figure>

## Step 2. Verify alias <a href="#od_395625dc" id="od_395625dc"></a>

Adding an HTTP-based Storage will make you create a Cloudimage Alias. After saving the storage in Step 1 above, verify that images are delivered correctly over your Cloudimage URL with the Alias:

Origin image URL on Shopify:

<https://cdn.shopify.com/shopifycloud/brochure/assets/home/hero-stock-small-72c1242fc5bbf6cfe135968110e9c52435af1e389c0fd4fe68208d21427e21e0.jpg>

Cloudimage URL with Alias:

`https://{token}.cloudimg.io/_myshopify_/shopifycloud/brochure/assets/home/hero-stock-small-72c1242fc5bbf6cfe135968110e9c52435af1e389c0fd4fe68208d21427e21e0.jpg`

Replace `{token}` with your Cloudimage token.

Unable to delivery images over your Cloudimage URL? Contact <hello@cloudimage.io> 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 <a href="#od_bb1f2167" id="od_bb1f2167"></a>

Proceed with making the changes in our Shopify settings and theme files to switch the image delivery to Cloudimage.

From your Shopify admin, click **Online Store > Themes**. Find the theme you want to edit, click the **Actions** button and then **Edit code**.

Under Config, click `settings_schema.json` and append the code below after the last section of this file:

```json
{
  "name": "Cloudimage",
  "settings": [
    {
      "type": "paragraph",
      "content": "Check out Cloudimage's [Cloudimage and Shopify integration](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/dev-implementation/shopify-tutorial) to learn more about this."
    },
    {
      "type": "checkbox",
      "id": "enableCloudimage",
      "label": "Enable Cloudimage"
    },
    {
      "type": "text",
      "id": "cloudImageToken",
      "label": "Cloudimage Token",
      "info": "The token of Cloudimage"
    },
    {
      "type": "text",
      "id": "cloudImageUrl",
      "label": "Cloudimage url endpoint",
      "info": "The url endpoint you set within Cloudimage. Example: //token.cloudimg.io/v7/_myshopify_"
    },
    {
      "type": "text",
      "id": "cloudimageShopifyCdnUrl",
      "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."
    }
  ]
}
```

## Step 4. Create cloudimage.liquid and cloudimage-video-tag.liquid file <a href="#od_21f2b6a5" id="od_21f2b6a5"></a>

Create new files `cloudimage.liquid` and `cloudimage-video-tag.liquid` under the **Snippets** directory. Copy the code below into that file, and save it:

* cloudimage.liquid

```php
{% capture CLOUDIMAGE %}
 {% if settings.enableCloudimage%}
   {% for i in (1..1) %}
     {% unless src or settings.cloudImageUrl != blank %}
       {{ src }}
       {% break %}
     {% endunless %}
     {% assign cdnUrls = settings.cloudimageShopifyCdnUrl | 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 cloudImageUrl = settings.cloudImageUrl | strip %}
     {% assign tempCloudImageUrl = cloudImageUrl %}
     {% assign lastChar = cloudImageUrl | slice:-1 %}
     {% assign cloudImageUrlLength = cloudImageUrl | size %}
     {% assign newCloudImageUrl = cloudImageUrlLength | minus:1 %}
     {% if lastChar == "/" %}
       {% assign tempCloudImageUrl = cloudImageUrl | slice:0,newCloudImageUrl %}
     {% endif %}
   {% assign newSrc = src | strip | replace:cdnUrl,tempCloudImageUrl %}
   {{ newSrc | default:src }}
   {% endfor %}
 {% else %}
   {{ src }}
 {% endif %}
{% endcapture %}{{ CLOUDIMAGE | strip | replace:'  ' | strip_newlines }}
```

* cloudimage-video-tag.liquid

```php
{% comment %}
    Renders video tag

    Accepts:
    - image_size: {String} Size of media
    - autoplay: {Boolean} Video autoplay
    - loop: {String} Video loop
    - controls: {Boolean} Video controls
    - url: {String} Video url
    - muted: {Boolean} Video muted

    Usage:
    {% render 'cloudimage-video-tag',
      image_size: image_size,
      autoplay: autoplay,
      loop: loop,
      controls: controls,
      url: url,
      muted: muted
    %}
{% endcomment %}

{% if settings.enableCloudimage%}
 {% for i in (1..1) %}
   {% unless url or settings.cloudImageUrl != blank %}
     {% assign newSrc = url %}
     {% break %}
   {% endunless %}
   {% assign cdnUrls = settings.cloudimageShopifyCdnUrl | split: ',' %}
   {% if cdnUrls.size  == 0 %}
     {% assign newSrc = url %}
     {% break %}
   {% endif %}
   {% assign cdnUrl = cdnUrls[0] %}
   {% for temp in cdnUrls %}
     {% if url contains temp %}
       {% assign cdnUrl = temp %}
       {% break %}
     {% endif %}
   {% endfor %}
 {% assign cdnUrl = cdnUrl | strip %}
 {% unless url contains cdnUrl %}
     {% assign newSrc = url %}
     {% break %}
   {% endunless %}
   {% assign cloudImageUrl = settings.cloudImageUrl | strip %}
   {% assign tempCloudImageUrl = cloudImageUrl %}
   {% assign lastChar = cloudImageUrl | slice:-1 %}
   {% assign cloudImageUrlLength = cloudImageUrl | size %}
   {% assign newCloudImageUrl = cloudImageUrlLength | minus:1 %}
   {% if lastChar == "/" %}
     {% assign tempCloudImageUrl = cloudImageUrl | slice:0,newCloudImageUrl %}
   {% endif %}
 {% assign newSrc = url | strip | replace:cdnUrl,tempCloudImageUrl | append: '&func=proxy' %}
 {% endfor %}
{% else %}
  {% assign newSrc = url %}
{% endif %}

{%- if controls -%}
  {% assign videoControls = 'controls="controls"' %}
{%- else -%}
  {% assign videoControls = "" %}
{%- endif -%}

{%- if autoplay -%}
  {% assign videoAutoplay = 'autoplay="autoplay"' %}
{%- else -%}
  {% assign videoAutoplay = "" %}
{%- endif -%}

{%- if muted -%}
  {% assign videoMuted = 'muted="muted"' %}
{%- else -%}
  {% assign videoMuted = "" %}
{%- endif -%}

<video playsinline="playsinline" {{ videoControls }} {{ videoAutoplay }} {{ videoMuted }}>
  <source src="{{ newSrc }}" type="video/mp4">
</video>
```

## Step 5. Enable Cloudimage <a href="#od_62a9caec" id="od_62a9caec"></a>

Navigate to **Online store > Themes > Customize theme**. In the sidebar, under **Theme Settings** open **Cloudimage** and enable it. Fill out the below two fields:

* **Cloudimage Token** - It should be your Cloudimage Token
* **Default URL endpoint** - It should be `//{token}.cloudimg.io/`*`myshopify`* (where `token` is your Cloudimage token)
* **Shopify CDN domain** - Its value should be `//cdn2.shopify.com`, `//cdn.shopify.com`
* Hit the "Save" button.

<div><figure><img src="/files/0a8eQwpYAlVY0JMTfe1e" alt=""><figcaption></figcaption></figure> <figure><img src="/files/zbTRrwh3srRvkDGgZM3S" alt=""><figcaption></figcaption></figure></div>

## Step 6. Edit your theme files <a href="#od_8d36b33c" id="od_8d36b33c"></a>

The final step of this tutorial is to adapt your theme files to start delivering your images over Cloudimage.

{% hint style="info" %}
**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 them later in case of error.
{% endhint %}

For more information, please see the [Theme files](/implementation/cms-plugins/shopify-tutorial/theme-files.md) and [FAQ](/implementation/cms-plugins/shopify-tutorial/faq.md) sections.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cloudimage.io/implementation/cms-plugins/shopify-tutorial/shopify-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.