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> |
{% endif %}
<a class="remove" href="/cart/change?line={{ forloop.index }}&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:
- From your Shopify admin, go to Online Store> Themes.
- Find the theme you want to edit, and then click Actions>Edit code.
- In the Sections directory, click
cart-template.liquid
. If your theme doesn't have acart-template.liquid
, then open the Templates directory and clickcart.liquid
. - Find the line containing the code
for p in item.properties
- 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 == '_' %}