# 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="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/v4QUVs9KFYEixROJxwfK/si1.jpeg" alt=""><figcaption></figcaption></figure>

Create the Storage record in the Cloudimage admin as follows:

<figure><img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/0JXWWVkUm3WadutpdJNS/si2.png" 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="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/InnQ7FWGa2UYvBe0ytYv/si3.png" alt=""><figcaption></figcaption></figure> <figure><img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/Bs0OWvAXwUfI7fZxEiwK/screenshot_1720080033.png" 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](https://docs.cloudimage.io/implementation/cms-plugins/shopify-tutorial/theme-files "mention") and [faq](https://docs.cloudimage.io/implementation/cms-plugins/shopify-tutorial/faq "mention") sections.