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
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.
Create the Storage record in the Cloudimage admin as follows:
Step 2: verify alias
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:
Cloudimage URL with Alias:
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
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:
{
"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": "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 file
Create a new file cloudimage.liquid under the Snippets directory. Copy the code below into that file, and save it:
{% 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 }}Step 5: enable Cloudimage
Navigate to Online store > Themes > Customize theme. In the sidebar, under Theme Settings open Cloudimage and enable it. Fill out the below two fields:
- Default URL endpoint - It should be
//{token}.cloudimg.io/myshopify(wheretokenis your Cloudimage token)
- Shopify CDN domain - Its value should be
//cdn2.shopify.com,//cdn.shopify.com
- Hit the "Save" button.
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.