2. Cart Page Integration

Replace Generic Product Image with custom designed image

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

All properties produced by Customized are critical for the app to work correctly.  That being said you can hide them from your customers to keep your user interface clean.

We recommend you hide some properties from cart page to minimize presenting unnecessary details to your customer.

Look for part that shows properties in the cart.liquid file.

For example, this part shows properties

{% if item.properties %}
  <p>
    {% 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 %}
  </p>
{% endif %}

Replace it and show only properties you want

{% if item.properties.size > 0 %}
  <p>
    {% 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 %}
  </p>
{% endif %}

{% if item.product.tags contains 'Phone Case' %}
  <p>
    Case Finish: {{item.properties['Finish']}}
  </p>
{% endif %}