Theme files

Shopify integration - theme files

You need to adapt your individual theme files for the image URLs to be changed to Cloudimage URLs. Identify first which theme files are used by your shop and edit them one by one as detailled below.

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.

Here are a couple of examples indicating the change that needs to be made in the theme files. You can follow similar steps to change all of your theme files. List of some files that need to be changed (files may vary between themes):

• featured-product.liquid

• product-template.liquid

• collection-grid-item.liquid

• Product-grid-item.liquid

• header.liquid

• video.liquid

As general what you need to do is:

• assign new variable inheriting the original theme image url

• replace the old image invocation with inclusion of cloudimage

Example 1

You can make the changes inside product-template.liquid.

Before:

<img id="{{ img_id }}"
                class="product-single__photo lazyload{% unless featured_image == image %} lazypreload{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} lightbox{% endif %}"
                {% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024' }}"{% endif %}
                src="{{ image | img_url: '200x200' }}"
                data-src="{{ img_url }}"
                data-widths="[180, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
                data-aspectratio="{{ image.aspect_ratio }}"
                data-sizes="auto"
                alt="{{ image.alt | escape }}">

After:

Explained changes:
We assign new variables for every URL usage from the original theme file (visible above)
using 
{% assign meaningfull_name = the_entire_value_used_in_the_original_request %}

For example: src="{{ image | img_url: '200x200' }}"
we create new variable that equals the old src "image | img_url: '200x200'" 
{% assign old_img_src = image | img_url: '200x200' %}

Now we replace the src="{{ image | img_url: '200x200' }}" with src="{% include 'cloudimage' src:old_img_src %}"
Where wi replace the old value with {% include 'cloudimage' src:the_meaningful_name_we_assign_before_that %}-

This way we get the chance to switch between the original image path and the optimised one by using the implemented Cloudimage enable/disable option
Now we need to perform this change in all files that deliver image URLs being src, data-src, background-image, zoom-image

{% assign old_img_src = image | img_url: '200x200' %}
{% assign old_img_data_src = img_url %}
{% assign old_img_data_zoom = image | img_url: '1024x1024' %}

        <img id="{{ img_id }}"
             class="product-single__photo lazyload{% unless featured_image == image %} lazypreload{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} lightbox{% endif %}"
             {% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{% include 'cloudimage' src:old_img_data_zoom %}"{% endif %}
             src="{% include 'cloudimage' src:old_img_src %}"
             data-src="{% include 'cloudimage' src:old_img_data_src %}"
             data-widths="[180, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
             data-aspectratio="{{ image.aspect_ratio }}"
             data-sizes="auto"
             alt="{{ image.alt | escape }}">

Example 2

Before:

<noscript>
 <img src="{{ featured_image | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}">
</noscript>

After:

<noscript>
 {% assign old_img_url = featured_image | img_url: 'grande' %}
 <img src="{% include 'cloudimage' src:old_img_url %}" alt="{{ featured_image.alt | escape }}">
</noscript>

Example 3

Before:

<li class="grid__item {{ thumbnail_width }}">
 <a href="{{ image.src | img_url: 'grande' }}" class="product-single__thumbnail" data-image-id="{{ image.id }}">
   <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
 </a>
</li>

After:

<li class="grid__item {{ thumbnail_width }}">
 {% assign old_img_grande = image.src | img_url: 'grande' %}
 {% assign old_img_compact = image.src | img_url: 'compact' %}
 <a href="{% include 'cloudimage' src:old_img_grande %}" class="product-single__thumbnail" data-image-id="{{ image.id }}">
   <img src="{% include 'cloudimage' src:old_img_compact %}" alt="{{ image.alt | escape }}">
 </a>
</li>

Example 4

Before:

{% if section.settings.product_image_zoom_type == 'lightbox' %}
 <ul class="gallery hidden">
   {% for image in product.images %}
     <li data-image-id="{{ image.id }}" class="gallery__item" data-mfp-src="{{ image | img_url: '2048x2048' }}"></li>
   {% endfor %}
 </ul>

After:

{% if section.settings.product_image_zoom_type == 'lightbox' %}
  <ul class="gallery hidden">
    {% for image in product.images %}

    {% assign old_data-mfp-src = image | img_url: '2048x2048' %}
      <li data-image-id="{{ image.id }}" class="gallery__item" data-mfp-src="{% include 'cloudimage' src:old_data-mfp-src %}"></li>
    {% endfor %}
  </ul>

Example 5 - with capture

If there is a tag inside image URL and you cannot simply assign it, use capture

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 'cloudimage' src:old_img_src %}" class="lazyload attachment-shop_single size-shop_single sp-post-image" alt="{{image.alt}}" title="{{product.title}}"
data-src="{% include 'cloudimage' src:old_img_data_src %}"
data-large_image="{% include 'cloudimage' 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">

Example 6 - Video

Before:

{{ section.settings.video
  | video_tag:
    image_size: "1100x",
    autoplay: true,
    loop: section.settings.enable_video_looping,
    controls: true,
    muted: false
}}

After:

{% assign old_video_url = section.settings.video.sources.first.url %}
{% render 'cloudimage-video-tag', image_size: "1100x", autoplay: true, loop: loop, controls: true, url: old_video_url, muted: false %}

You can also take a look at the FAQ section.