Add Custom Image and Edit Button to Cart

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

<div class="*** cart_content_info">
  <h3>
    <a href="{{ item.url }}">{{ item.product.title }}</a>
  </h3>

with this

<div class="*** cart_content_info">
<h3>
{% if item.product.type == 'Bare Product' %}
  <a href="/pages/customize?design={{ item.properties['Design Public ID'] }}&line={{ forloop.index }}">
    {% if settings.enable_multilang %}
    <span class="lang1">{{ item.product.title | split: '|' | first }}</span>
    <span class="lang2">{{ item.product.title | split: '|' | last }}</span>
    {% else %}
      {{ item.title | split: '|' | first }}
    {% endif %}
  </a>
{% else %}
  <a href="{{ item.url }}">
    {% if settings.enable_multilang %}
    <span class="lang1">{{ item.product.title | split: '|' | first }}</span>
    <span class="lang2">{{ item.product.title | split: '|' | last }}</span>
    {% else %}
    {{ item.title | split: '|' | first }}
    {% endif %}
  </a>
{% endif %}
</h3>

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>

For example, replace this code

<p class="modal_price">
  {% if item.price > 0 %}
    <span class="money">{{ item.price | money }}</span>
  {% else %}
    {{ settings.free_price_text }}
  {% endif %}

  {% if item.price < item.variant.compare_at_price %}
    <span class="money was_price">{{ item.variant.compare_at_price | money }}</span>
  {% endif %}
</p>

with this one

<p class="modal_price">
  {% if item.price > 0 %}
    <span class="money">{{ item.price | money }}</span>
  {% else %}
    {{ settings.free_price_text }}
  {% endif %}

  {% if item.price < item.variant.compare_at_price %}
    <span class="money was_price">{{ item.variant.compare_at_price | money }}</span>
  {% endif %}
  <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>
</p>