LogoLogo
BlogHelp CenterPrivacyLoginRegister
  • Let's optimize your images
  • Transformations
    • Input formats
    • Image operations
      • Width and height
      • Prevent enlargement
      • Crop
        • Automatic gravity crop
        • Positionable crop
        • Focal point crop
        • Face crop
        • Face hide
        • Aspect ratio crop
      • Fit
      • Cropfit
      • Bound
      • Boundmin
      • Cover
      • Device pixel ratio
      • Flip
      • Rotate
      • Trim
      • Rounded corners
      • Background removal
    • Image filters
      • Adjustment
        • Brightness
        • Contrast
        • Saturate
      • Color manipulation
        • Color overlay
        • Grayscale
        • Duotone
        • Sepia
        • Invert
      • Blur
      • Pixelate
      • Sharpen
      • Face blur
    • Image watermarking
      • Static watermark
      • Dynamic watermark
      • Text watermark
        • Text watermark fonts
    • Image compression
      • Image formats
      • Optipress
      • SVG compression
      • Color management
    • Static content
      • PDF to image
      • JS/CSS optimization
    • Video operations
  • Setup
    • Shortening URLs
      • Origin URL prefix
      • Aliases
      • Presets
      • Rules
    • Connecting storage bucket
      • Amazon S3
      • Google Cloud Storage
      • Microsoft Azure Blob
      • Basic authentication HTTP
    • Security
      • Token security
        • Domain whitelisting
        • URL signature
        • URL sealing
      • Account security
      • Origin security
  • Implementation
    • URL API implementation
    • Responsive images JS plugin
    • CMS plugins
      • Spryker
      • Drupal
      • Kontent.ai
      • Contentful
      • Adobe Commerce (Magento)
        • Basic implementation
        • Advanced implementation
      • Opencart
      • Prestashop
        • Prestashop tutorial
      • Shopware
      • Sylius
      • Wordpress
      • Shopify tutorial
        • Shopify integration
        • Theme files
        • FAQ
      • Commercetools tutorial
      • Ruby wrapper
    • Migrating from another image CDN
  • Caching and acceleration
    • CDN basics
    • Caching interval
    • Invalidation API
    • Warmup API
  • Analytics
    • Dashboards
      • Overview
      • Volumetry
      • Optimization
      • Delivery
      • Top-Ranking
      • RUM
      • Logs API
  • Cloudimage_v6 EOL
Powered by GitBook
LogoLogo

Resources

  • Help center
  • Contact support
  • Developers
  • cloudimage.io

Solutions

  • Media optimization
  • DAM
  • Performance report

Company

  • Blog
  • Service status
  • About us

Legal stuff

  • Terms & conditions
  • Privacy center
  • DMCA

Copyright © 2023 Scaleflex

On this page
  • Step 1. Configure an origin HTTP-Storage in Cloudimage
  • Step 2. Verify alias
  • Step 3. Create settings_schema.json
  • Step 4. Create cloudimage.liquid and cloudimage-video-tag.liquid file
  • Step 5. Enable Cloudimage
  • Step 6. Edit your theme files

Was this helpful?

Export as PDF
  1. Implementation
  2. CMS plugins
  3. Shopify tutorial

Shopify integration

Shopify integration

PreviousShopify tutorialNextTheme files

Last updated 4 months ago

Was this helpful?

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:

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

Replace {token} with your Cloudimage token.

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

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

{% 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

{% 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

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.

Step 6. Edit your theme files

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

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.

For more information, please see the Theme files and FAQ sections.

Unable to delivery images over your Cloudimage URL? Contact 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.

https://cdn.shopify.com/shopifycloud/brochure/assets/home/hero-stock-small-72c1242fc5bbf6cfe135968110e9c52435af1e389c0fd4fe68208d21427e21e0.jpg
hello@cloudimage.io