A Guide on setting up Custom Thumbnails on Shopify Cart

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
  1. Template > cart.liquid
  2. Sections > cart-template.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).
  1. Debut
  2. Boundless
  3. Venture
  4. Narrative
  5. Minimal
  6. Brooklyn
  7. Simple

Debut

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

Search for <div class="cart__image-wrapper"> and replace the highlighted code
<div class="cart__image-wrapper">
       <img class="cart__image{% if item.image == null %} hide{% endif %}" src="{{ item | img_url: 'x190' }}" alt="{{ item.image.alt | escape }}" data-cart-item-image>
                  </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 -%}
        <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 -%}  
  {%- 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 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
<td class="cart__cell--image text-center">
                  <a href="{{ item.url }}" class="cart__image">
                    <img src="{{ item | img_url: '240x240' }}" 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 -%}
{%- 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 %}
                    <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 -%} 

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
<div class="grid__item one-third">
    <a href="{{ item.url }}">
    {% 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 %}
    <div id="{{ wrapper_id }}" class="cart__image-wrapper supports-js">
        <div style="padding-top:{{ 1 | divided_by: item.image.aspect_ratio | times: 100}}%;">
            <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>
    </div>
    {% else %}
        <p><img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}"></p>
    {% endunless %}
    <noscript>
       <p><img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}"></p>
    </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 %}
                <p><img src="{{ p.last }}" alt="{{ item.title | escape }}"></p>
                {% assign preview_image_found = false %}              
            {%- endif -%}                 
    {%else%}
            <p><img src="{{ item | img_url: 'medium'}}" alt="{{ item.title | escape }}"}</p>                            
        {%- 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


<div class="grid__item one-third">
    <a href="{{ item.url }}" class="cart__image">
        {% comment %}
        More image size options at:
        {% endcomment %}
        <img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">
    </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 %}
                <p><img src="{{ p.last }}" alt="{{ item.title | escape }}"></p>
                {% assign preview_image_found = false %}              
            {%- endif -%}                 
    {%else%}
            <p><img src="{{ item | img_url: 'medium'}}" alt="{{ item.title | escape }}"}</p>                            
        {%- 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
<td class="cart__table-cell--image small--text-center">
    {% 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 %}
        <div id="{{ wrapper_id }}" class="cart__image-wrapper supports-js">
          <a class="cart__image-container" href="{{ item.url }}" style="padding-top:{{ 1 | divided_by: item.image.aspect_ratio | times: 100}}%;">
            <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 class="supports-js" href="{{ item.url }}">
          <img src="{{ item | img_url: 'grande' }}" alt="{{ item.title | escape }}">
       </a>
   {% endunless %}
   <noscript>
    <a href="{{ item.url }}">
     <img class="cart__image" src="{{ item | img_url: 'grande' }}" alt="{{ item.title | escape }}">
    </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 %}
                    <img class="cart__image-container{% if item.image == null %} hide{% endif %}" src="{{ p.last }}" alt="{{ item.title | escape }}">
                    {% assign preview_image_found = false %}      
                {% endif %}                 
            {%else%}
                <img class="cart__image-container{% if item.image == null %} hide{% endif %}" src="{{ item | img_url: 'medium' }}" alt="{{ item.image.alt | escape }}">
            {%- endif -%}                   
         {%- 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 ...
    • Custom Gateway Shopify Apps

      Introduction A whitelabel shopify app from Custom Gateway is a great way to enable Shopify sites to integrate with Custom Gateway and easily sell personalised and print on demand products. If suppliers want to allow retailers to install and use their ...
    • CPPv2 | 2d Product Creation User Guide: Introduction

      1.1 Overview This user guide is intended to provide a comprehensive reference document for 2d product creation on the Custom Product Platform.  This is not a step-by-step how-to guide; instead it should be used for reference to learn how certain ...
    • 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 ...
    • CPP | Getting Started Guide | Contents

      Contents Section 1: Introduction >> 1.1 Guide Overview 1.2 What is the CPP? 1.3 Common Terminology   Section 2: Accessing CPP >> 2.1 Signing In 2.2 Logging Out 2.3 Forgotten Your Password?   Section 3: Home Screen >> 3.1 Home Screen Breakdown 3.2 ...