Cart Page Integration

Replace Generic Product Image with custom designed image

If our automated install didn't work on your theme you can use the manual instructions below:

Go to cart-template.liquid page (make duplicate cart-template_backup.liquid before you make change for backup purposes)

Instead of showing the defualt product image, show the customer exactly what they designed in the cart.

Go to cart-template.liquid page

When you need {{item | img_url}} to replaced with custom product image, replace it with {{item.properties['Design Image URL']}}

For example, Replace this code

<a href="{{ item.url }}" title="{{ item.title | escape }}" class="cart_page_image">  
  <img  src="\{\{ item \| img\_url: '100x' \}\}"  
        alt="\{\{ item\.title \| escape \}\}"  
        class="lazyload \{\{ settings\.image\_loading\_style \}\}"  
        style="max-width: {{- item.image.width -}}px"  
        data-sizes="auto"  
        data\-src="\{\{ item \| img\_url: '900x' \}\}"  
        data\-srcset=" \{\{ item \| img\_url: '300x' \}\} 300w,  
                      \{\{ item \| img\_url: '600x' \}\} 600w,  
                      \{\{ item \| img\_url: '900x' \}\} 900w"  
          />  
</a>

with this

{% if item.product.type == 'Bare Product' %}
  <a href="/pages/customize?design={{ item.properties['_Design Public ID'] }}&line={{ forloop.index }}" title="{{ item.title | escape }}" class="cart_page_image">
    <img src="{{ item.properties['_Design Image URL'] }}" />
  </a>
{% else %}
  <a href="{{ item.url }}" title="{{ item.title | escape }}" class="cart_page_image">
    <img  src="{{ item | img_url: '100x' }}"
          alt="{{ item.title | escape }}"
          class="lazyload {{ settings.image_loading_style }}"
          style="max-width: {{- item.image.width -}}px"
          data-sizes="auto"
          data-src="{{ item | img_url: '900x' }}"
          data-srcset=" {{ item | img_url: '300x' }} 300w,
                        {{ item | img_url: '600x' }} 600w,
                        {{ item | img_url: '900x' }} 900w"
            />
  </a>
{% endif %}

Replace product link with edit design link

Instead of having the custom product image and title link to the product page, the instructions below will make it link back into the customization tool where your customer can make edits.

Now you need to replace product link {{item.url}} with edit design link.

For example, Replace this code

              <h3 class="cart__item--title">
                <a href="{{ item.url }}">{{ item.product.title }}</a>
              </h3>

with this

              {% if item.product.type == 'Bare Product' %}
              <h3 class="cart__item--title">
                <a href="/pages/customize?design={{ item.properties['_Design Public ID'] }}&line={{ forloop.index }}">{{ item.product.title }}</a>
              </h3>
{% else %}

              <h3 class="cart__item--title">
                <a href="{{ item.url }}">{{ item.product.title }}</a>
              </h3>
              {% endif %}

Add "Edit" button for custom designed item

This will place an edit button next to custom products that make it easy for your customers to make changes to items in their cart.

Add following codes to any part in cart item

<div>
  {% if item.product.type == 'Bare Product' %}
    <a href="/pages/customize?design={{ item.properties['_Design Public ID'] }}&line={{ forloop.index }}" title="Edit Design">Edit Design</a>&nbsp;|&nbsp;
  {% endif %}

  <a class="remove" href="/cart/change?line={{ forloop.index }}&amp;quantity=0" data-id="{{ item.id }}" {% if settings.enable_multilang %}data-translate="cart.general.remove"{%endif%}>{{ 'cart.general.remove' | t }}</a>
</div>

Remove unwanted properties from cart

Most themes will automatically hide unnecessary line item properties. If you find that your theme is showing line item properties in the cart you can update your theme following the instructions below:

1. From your Shopify admin, go to Online Store> Themes.
2. Find the theme you want to edit, and then click Actions>Edit code.
3. In the Sections directory, click cart-template.liquid. If your theme doesn't have a cart-template.liquid, then open the Templates directory and click cart.liquid.
4. Find the line containing the code for p in item.properties
5. On the line beneath that paste the following:

    {% assign first_character_in_key = p.first | truncate: 1, '' %}
    {% unless p.last == blank or first_character_in_key == '_' %}