Configure Shopping Cart To Display Custom Product Information

Configuring the shopping cart.

Here is a sample code snippet to use inside of the shopping cart. Please note that this code may differ depending on the theme.

In the shopping cart you can update the following fields:

• Edit product title to link back to custom product builder page with pre-selected options
• Display custom product image instead of the default product image
• Display All Views in Order Properties
• Display custom product properties that were selected by your customers

The first steps are the same for all of these customizations. We need to locate cart template file:

• Go to Online Store -> Themes
• Click Actions -> Duplicate (Create a backup just in case)
• Click Actions -> Edit Code:
  

• In the search field, look for a file called ‘cart-template.liquid’. If it does not exist, look for 'cart.liquid'.

Link back the Title to custom product builder page with pre-selected options

Please locate the code that links the title of the default products back to the product. I will looks something like this:

<a href="{{ item.url }}">
  {{ item.product.title }}
  {% if item.quantity > 1 %}
    {{ 'cart.label.quantity' | t }}(x{{ item.quantity }})
  {% endif %}
</a>

Now you need to add conditional logic that would check if the product is custom and it would replace the original link with the link that contains custom product builder configId.

                  
{% if item.properties and item.properties.configId %}
{% assign customlink = item.properties.productUrl | append: '?configid=' | append: item.properties.configId %}

  <a href="{{ customlink }}">
     {{ item.product.title  | split: " - Customer" | first }}
     {% if item.quantity > 1 %}
        {{ 'cart.label.quantity' | t }}(x{{ item.quantity }})
     {% endif %}
  </a>

{% else %}

  <a href="{{ item.url }}">
    {{ item.product.title | split: " - Customer" | first }}
    {% if item.quantity > 1 %}
       {{ 'cart.label.quantity' | t }}(x{{ item.quantity }})
    {% endif %}
  </a>

{% endif %}

Important: Your Title link code may differ from the above snippet. If it does, you may need to adjust the code to match your theme setup.

Display custom product image instead of the default product image

 Look for the following code

<img id="{{item.product.id}}" src="{{ item | img_url: '240x240' }}" alt="{{ item.title | escape }}">

and replace it with

{% if item.properties and item.properties._image %}
 {% if item.properties.configId %}
    <a href="{{ item.properties.productUrl | append: '?configid=' | append: item.properties.configId }}" class="cpb_image"> 
  {% else %}
    <a href="{{ item.url }}" class="cpb_image">
  {% endif %}
    <img id="{{ item.product.id }}" src="{{ item.properties._image }}" alt="{{ item.title | escape }}">
  </a>
{% else %}
<img id="{{ item.product.id }}" src="{{ item | img_url: '240x240' }}" alt="{{ item.title | escape }}">
{% endif %} 

Display All Views in Order Properties

By default, the cart displays one view of your product, as shown in screenshots.

If you want all views of your product to be displayed in the cart, then use the "Display All Views in Order Properties"

Additional options in General settings

Also in settings, you can set several options.

1. Prevent adding of additional technical information in the cart, such as producturl and configID

2. Able\disable weight of the product in the cart.

3. Switch the third one if you want to disable panels titles in the Cart.

Display custom product properties that were selected by your customers

Find for the following code:

{% for p in item.properties %}
  {% unless p.last == blank %}
   {% if p.last contains '/uploads/' %}
      <div>
          {{ p.first }}: <a class="lightbox" href="{{ p.last }}">{{ 'cart.general.uploaded_file' | t }}</a>
      </div>
   {% else %}
     <div>
       {{ p.first }}: {{ p.last }}
     </div>
   {% endif %}
  {% endunless %}
{% endfor %}

• Replace it with this snippet instead:

 {% for p in item.properties %}
    {% if p.last == blank or p.first == 'configId' or p.first == 'productUrl'%} 
       {% continue %}
    {% endif%} 
    {% unless p.first == '_image' or p.first contains 'customFile' or p.first contains 'View -' %}
      {{ p.first }}:
    {% endunless %}
    {% if p.first == '_image' %}
       <a href="{{ p.last }}" target="_blank" rel="noopener">View Product Image</a> 
    {% elsif p.first contains 'View -' %}
       <a href="{{ p.last }}" target="_blank" rel="noopener">{{ p.first }}</a>
    {% elsif p.first contains 'customFile' %}
       <a href="{{ p.last }}" target="_blank" rel="noopener">View Uploaded Logo {{ p.first }}</a> 
    {% elsif p.last contains 'Url -' %}
       <a href="{{ p.last | remove: 'Url -' | split: ' (' | first }}" target="_blank" rel="noopener">View Uploaded Image</a>    
    {% elsif p.last contains '/uploads/' %}
       <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
    {% else %}
       {{ p.last | split: '(' | first | newline_to_br }}
    {% endif %}
    <br/>
 
{% endfor %}

• Click Save
• Test Shopping Cart
• If there are any problems, revert back.

ADDITIONAL INFORMATION: 

By using Shopify liquid filters you can remove titles that are showing up excessively. 

For example by using  "remove" liquid code.

Removes all occurrences of a substring from a string.

{{ p.first | remove: "Tab name" }}:

Output

{{ p.last | split: '(' | first |remove: "Tab name" }}