A Guide on setting up Custom Thumbnails on Shopify Cart

Introduction

With Custom Gateway Whitelabel Shopify app, it is now easy for the store owners to integrate with Custom Gateway platform seamlessly. However, the app does not make any modifications to the Shopify liquid templates and hence cannot directly enable the personalised/custom thumbnails on cart.

This document gives a guideline on some code changes that can be made to enable the custom thumbnails on the Shopify cart. The code takes care of the non-Custom Gateway products in the cart as well.

How to access the code

1. Login to Shopify Store as Admin

2. Go to Online Store > Themes

3. Choose the theme. Click on Actions > Edit Code

4. The code needs to be applied to either of the 2, depending on the theme

Template > cart.liquid
Sections > cart-template.liquid
Sections > main-cart-items.liquid

Please note: The code changes suggested are theme based and should be used as a guideline. Any specific theme may require adjustments.

Themes

We are taking few free themes for demonstrating the code changes required to get the custom thumbnail (for CG products), along with the regular item thumbnail (for non-CG products).

Debut
Boundless
Venture
Narrative
Minimal
Brooklyn
Simple
Dawn, Refresh, Ride, Colorblock, Taste, Studio, Craft, Sense, Crave

Debut

This requires changes to be made to the cart-template.liquid

Search for <div class="cart__image-wrapper"> and replace the highlighted code

with

{%- assign variant_options = 'template ' | split: ' ' -%}
{%- if item.product.has_only_default_variant != true -%}
{%- assign variant_options = item.options_with_values -%}
{%- endif -%}

{%- assign property_size = item.properties | size -%}

{%- assign properties = 'template ' | split: ' ' -%}
{%- if property_size > 0 -%}
    {%- assign properties = item.properties -%}
{%- endif -%}
{%- for p in properties -%}
    {%- unless p.last == blank -%}
        <span data-cart-item-property-value>
            {%- if p != 'template' -%}

{%- if p.last contains 'thumbnail.png' -%}

                    {% assign preview_image_found = true %}
                {%- endif -%}
{% if preview_image_found == true %}
                    <img class="cart__image{% if item.image == null %} hide{% endif %}" src="{{ p.last }}" alt="{{ item.title | escape }}" data-cart-item-image >
                    {% assign preview_image_found = false %}
                {% endif %}
                {%else%}
                <img class="cart__image{% if item.image == null %} hide{% endif %}" src="{{ item | img_url: 'x190' }}" alt="{{ item.image.alt | escape }}" data-cart-item-image>
                {%- endif -%}
        </span>
    {%- endunless -%}
{%- endfor -%}

Boundless

This requires changes to be made to the cart-template.liquid

Search for <td class="cart__table-cell--image small--text-center"> and replace the highlighted code

<td class="cart__table-cell--image small--text-center">
                <a href="{{ item.url | within: collections.all }}">
                  {% comment %}
                    More image size options at:
                      - http://docs.shopify.com/themes/filters/product-img-url
                  {% endcomment %}
                  <img class="cart__image" src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">
                </a>
              </td>

with

{%- assign variant_options = 'template ' | split: ' ' -%}
{%- if item.product.has_only_default_variant != true -%}
{%- assign variant_options = item.options_with_values -%}
{%- endif -%}

{%- assign property_size = item.properties | size -%}

{%- if p.last contains 'thumbnail.png' -%}

{% assign preview_image_found = true %}
{%- endif -%}

{% if preview_image_found == true %}

                    <img class="cart__image{% if item.image == null %} hide{% endif %}" src="{{ p.last }}" alt="{{ item.title | escape }}" data-cart-item-image >
                    {% assign preview_image_found = false %}
                {% endif %}
                {%else%}
                <img class="cart__image{% if item.image == null %} hide{% endif %}" src="{{ item | img_url: 'x190' }}" alt="{{ item.image.alt | escape }}" data-cart-item-image>

{%- endif -%}

{%- endunless -%}
{%- endfor -%}

Venture

This requires changes to be made to the cart-template.liquid

Search for <td class="cart__cell--image text-center"> and replace the highlighted code

with

{%- assign variant_options = 'template ' | split: ' ' -%}
{%- if item.product.has_only_default_variant != true -%}
{%- assign variant_options = item.options_with_values -%}
{%- endif -%}

{%- assign property_size = item.properties | size -%}

{%- assign properties = 'template ' | split: ' ' -%}
{%- if property_size > 0 -%}
    {%- assign properties = item.properties -%}
{%- endif -%}
{% assign preview_image_found = false %}
    {%- for p in properties -%}
        {%- unless p.last == blank -%}
            <span data-cart-item-property-value>
                {%- if p != 'template' -%}
                    {%- if p.last contains 'thumbnail.png' -%}
                      {% assign preview_image_found = true %}
                    {%- endif -%}
                    {% if preview_image_found == true %}
                        <img class="cart__image{% if item.image == null %} hide{% endif %}" src="{{ p.last }}" alt="{{ item.title | escape }}">
                        {% assign preview_image_found = false %}
                    {% endif %}
                    {%else%}
                        <img class="cart__image{% if item.image == null %} hide{% endif %}" src="{{ item | img_url: 'x190' }}" alt="{{ item.image.alt | escape }}" data-cart-item-image>
                    {% endif %}
            </span>
        {%- endunless -%}
    {%- endfor -%}

Narrative

This requires changes to be made to the cart-template.liquid

Search for <td class="cart-item__image-wrapper"> and replace the highlighted code

<td class="cart-item__image-wrapper">
              {% assign itemImage = true %}
              {% if item.image == blank and item.product.featured_image == blank %}
                {% assign itemImage = false %}
              {% endif %}
              <a class="cart-item__image-link" href="{{ item.url }}" style="background-image: {% if itemImage %}url('{{ item | img_url: 'medium' }}'){% else %}none{% endif %};" data-cart-item-background-image data-cart-item-href>
                <img class="cart-item__image lazyload {% unless itemImage %}hide{% endunless %}" src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}" data-cart-item-image>
              </a>
            </td>

with

{%- assign variant_options = 'template ' | split: ' ' -%}

{%- if item.product.has_only_default_variant != true -%}

{%- assign variant_options = item.options_with_values -%}

{%- endif -%}

{%- assign property_size = item.properties | size -%}

{%- assign properties = 'template ' | split: ' ' -%}

{%- if property_size > 0 -%}

{%- assign properties = item.properties -%}

{%- endif -%}

{%- for p in properties -%}

{%- unless p.last == blank -%}

{%- if p != 'template' -%}

{%- if p.last contains 'thumbnail.png' -%}

{% assign preview_image_found = true %}

{%- endif -%}

{% if preview_image_found == true %}

{% assign preview_image_found = false %}

{% endif %}

{%else%}

{%- endif -%}

{%- endunless -%}

{%- endfor -%}

Minimal

This requires changes to be made to the cart-template.liquid

Search for <div class="grid__item one-third"> and replace the highlighted code

{% unless item.image == blank %}

{% capture img_id %}ProductImage-{{ item.id }}{% endcapture %}

{% capture wrapper_id %}ProductImageWrapper-{{ item.id }}{% endcapture %}

{%- assign img_url = item.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% include 'image-style' with image: item.image, width: 210, height: 245, wrapper_id: wrapper_id, img_id: img_id %}

<img id="{{ img_id }}"

class="cart__image lazyload"

data-src="{{ img_url }}"

data-widths="[40, 65, 90, 120, 150, 180, 360, 480, 600]"

data-aspectratio="{{ item.image.aspect_ratio }}"

data-sizes="auto"

alt="{{ item.title | escape }}">

</div>

{% else %}

{% endunless %}

</noscript>

</a>

</div>

with

{%- assign variant_options = 'template ' | split: ' ' -%}

{%- if item.product.has_only_default_variant != true -%}

{%- assign variant_options = item.options_with_values -%}

{%- endif -%}

{%- assign property_size = item.properties | size -%}

{%- assign properties = 'template ' | split: ' ' -%}

{%- if property_size > 0 -%}

{%- assign properties = item.properties -%}

{%- endif -%}

{%- for p in properties -%}

{%- unless p.last == blank -%}

{%- if p != 'template' -%}

{%- if p.last contains 'thumbnail.png' -%}

{% assign preview_image_found = true %}

{%- endif -%}

{% if preview_image_found == true %}

{% assign preview_image_found = false %}

{%- endif -%}

{%else%}

{%- endif -%}

{%- endunless -%}

{%- endfor -%}

Brooklyn

This requires the changes to be made to the cart.liquid

Search for <div class="grid__item one-third"> and replace the highlighted code

{% comment %}

More image size options at:

- http://docs.shopify.com/themes/filters/product-img-url

{% endcomment %}

</a>

</div>

with

{%- assign variant_options = 'template ' | split: ' ' -%}

{%- if item.product.has_only_default_variant != true -%}

{%- assign variant_options = item.options_with_values -%}

{%- endif -%}

{%- assign property_size = item.properties | size -%}

{%- assign properties = 'template ' | split: ' ' -%}

{%- if property_size > 0 -%}

{%- assign properties = item.properties -%}

{%- endif -%}

{%- for p in properties -%}

{%- unless p.last == blank -%}

{%- if p != 'template' -%}

{%- if p.last contains 'thumbnail.png' -%}

{% assign preview_image_found = true %}

{%- endif -%}

{% if preview_image_found == true %}

{% assign preview_image_found = false %}

{%- endif -%}

{%else%}

{%- endif -%}

{%- endunless -%}

{%- endfor -%}

Simple

This requires the changes to be made to the cart.liquid

Search for <td class="cart__table-cell--image small--text-center"> and replace the highlighted code

{% unless item.image == blank %}

{%- assign img_url = item.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{%- capture wrapper_id -%}CartImageWrapper--{{ item.image.id }}{%- endcapture -%}

{%- capture img_id -%}CartImage--{{ item.image.id }}{%- endcapture -%}

{% include 'image-style' with image: item.image, width: 720, height: 600, small_style: false, wrapper_id: wrapper_id, img_id: img_id %}

<img id="{{ img_id }}"

class="cart__image lazyload"

src="{{ item.image | img_url: '100x100' }}"

data-src="{{ img_url }}"

data-widths="[180, 230, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"

data-aspectratio="{{ item.image.aspect_ratio }}"

data-sizes="auto"

alt="{{ item.title | escape }}"

itemprop="image">

</a>

</div>

{% else %}

</a>

{% endunless %}

</a>

</noscript>

</td>

with

{%- assign variant_options = 'template ' | split: ' ' -%}

{%- if item.product.has_only_default_variant != true -%}

{%- assign variant_options = item.options_with_values -%}

{%- endif -%}

{%- assign property_size = item.properties | size -%}

{%- assign properties = 'template ' | split: ' ' -%}

{%- if property_size > 0 -%}

{%- assign properties = item.properties -%}

{%- endif -%}

{%- for p in properties -%}

{%- unless p.last == blank -%}

{%- if p != 'template' -%}

{%- if p.last contains 'thumbnail.png' -%}

{% assign preview_image_found = true %}

{%- endif -%}

{% if preview_image_found == true %}

{% assign preview_image_found = false %}

{% endif %}

{%else%}

{%- endif -%}

{%- endunless -%}

{%- endfor -%}

Dawn, Refresh, Ride, Colorblock, Taste, Studio, Craft, Sense, Crave

This requires the changes to be made to the main-cart-items.liquid

Search for <td class="cart-item__media"> and replace the highlighted code

{% if item.image %}

{% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}

<img src="{{ item.image | image_url: width: 300 }}"

class="cart-item__image"

alt="{{ item.image.alt | escape }}"

loading="lazy"

width="150"

height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"

</div>

{% endif %}

</td>

with

{%- assign property_size = item.properties | size -%}

{%- assign properties = 'template ' | split: ' ' -%}

{%- if property_size > 0 -%}

{%- assign properties = item.properties -%}

{%- endif -%}

{%- for p in properties -%}

{%- unless p.last == blank -%}

{%- if p != 'template' -%}

{%- if p.last contains 'thumbnail.png' -%}

{% assign preview_image_found = true %}

{%- endif -%}

{% if preview_image_found == true %}

<img src="{{ p.last }}"

class="cart-item__image"

alt="{{ item.image.alt | escape }}"

loading="lazy"

width="150"

height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"

</div>

{% assign preview_image_found = false %}

{% endif %}

{%else%}

<img src="{{ item.image | image_url: width: 300 }}"

class="cart-item__image"

alt="{{ item.image.alt | escape }}"

loading="lazy"

width="150"

height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"

</div>

{%- endif -%}

</span>

{%- endunless -%}

{%- endfor -%}

Related Articles
How to Install the Virtual Product Warehouse Shopify App
Please note that there are multiple Shopify apps each with their own method of creation, setup / installation. These instructions pertain only to the VPW Shopify App. The below Video shows the simple install process for the Content Gateway VPW ...
Kornit X Shopify Apps
Introduction A whitelabel shopify app from Kornit X is a great way to enable Shopify sites to integrate with Kornit X and easily sell personalised and print on demand products. Whilst Kornit X provides the app infrastructure, it is necessary for the ...
KornitX Platform Imports & Exports - How To Set Shopify Pricing Beta
This article will be cover the options available to add pricing information to products so that they work within the Shopify app. Pricing can be set manually or via a dedicated CSV data Import. Everyone who wishes to load their products within ...
Troubleshooting: Shopify adding to cart twice
We have seen before that in some cases when using our shopify module that when adding to cart from inside our personalisation iframe that 2 items are added to the cart. This is because of a setting in shopify which can be easily disabled When on the ...
Shopify Module: Troubleshooting the Add to Cart button
If when the module is added to your shopify site and you add some CPP products the "Add to Cart" button does not correctly change to "Personalise / Buy" it could be because you have ajax cart enabled on your theme. Navigate to your store themes ...

A Guide on setting up Custom Thumbnails on Shopify Cart

A Guide on setting up Custom Thumbnails on Shopify Cart

Themes

Debut

Boundless

Venture

Narrative

Minimal

Brooklyn

Simple

Dawn, Refresh, Ride, Colorblock, Taste, Studio, Craft, Sense, Crave

Related Articles

How to Install the Virtual Product Warehouse Shopify App

Kornit X Shopify Apps

KornitX Platform Imports & Exports - How To Set Shopify Pricing Beta

Troubleshooting: Shopify adding to cart twice

Shopify Module: Troubleshooting the Add to Cart button