Shopify themes, liquid, logos, and UX
I added a customization box to some products but when added to cart I can not display customizations.
The added code in product-variant-options.liquid is below. Can anyone please help where and which code should I add to my theme to see the customizations in the cart.
{%- endif -%}
{% if product.handle == 'put-a-date-on-it-necklace' %}
<div class="product-customization" style="padding-bottom: 20px;">
<label for="custom-text">Add the Day:</label>
<input type="text" id="custom-text" name="properties[Custom Text]" placeholder="Type the date here" />
</div>
{% endif %}
{% if product.type == 'Rings' %}
<div class="product-customization" style="padding-bottom: 20px;">
<label for="custom-text">Pre-Order A New Size:</label>
<input type="text" id="custom-text" name="properties[Custom Text]" placeholder="Type your size here" />
</div>
{% endif %}
Hi @DeryaMutlu,
Go to Shopify Admin > Online Store > Themes > Edit Code.
Find cart.liquid or cart-items.liquid (depending on your theme).
Locate the section where product names and variants are displayed.
Add this code inside the loop that renders cart items:
{% for item in cart.items %}
<div class="cart-item">
<p><strong>{{ item.product.title }}</strong></p>
{%- for p in item.properties -%}
{% if p.last != blank %}
<p><strong>{{ p.first }}:</strong> {{ p.last }}</p>
{% endif %}
{%- endfor -%}
</div>
{% endfor %}
Hello, thank you.
But I can't seem to locate the correct section to add the code.
{%- liquid
assign cart_products = ''
assign upsell_products = ''
assign line_items_html = ''
assign upsell_items_html = ''
assign animation_name = animation_name | default: 'cart-items-fade'
assign animation_delay_increment = 50
assign animation_delay = animation_delay | default: 0
-%}
{%- comment -%}
Capture line items
{%- endcomment -%}
{%- for line_item in cart.items -%}
{%- liquid
assign line_item_final_price = line_item.final_price | money
assign line_item_variant_compare_at_price = line_item.variant.compare_at_price | money
assign line_item_original_price = line_item.original_price | money
assign line_item_unit_price = line_item.unit_price | money
assign cart_products = cart_products | append: line_item.product.id | append: ','
-%}
{%- capture cart_line_item -%}
<div class="cart__item{% if forloop.last %} cart__item--no-border{% endif %}"
data-item="{{ line_item.key }}"
data-item-index="{{ forloop.index }}"
data-item-title="{{ line_item.title | strip_html }}"
data-animation="{{ animation_name }}"
data-animation-duration="500"
data-animation-delay="{{ animation_delay }}"
{%- assign animation_delay = animation_delay | plus: animation_delay_increment -%}
>
<div class="cart__item__image{% unless line_item.image %} image--empty{% endunless %}">
<a href="{{ line_item.url }}" aria-label="{{ line_item.title | escape }}">
{%- if line_item.image -%}
<div class="lazy-image is-loading">
{{ line_item.image | image_url: width: 180 | image_tag: widths: '90, 180, 270, 360', sizes: '90px', class: 'is-loading', loading: 'lazy', fetchpriority: fetchpriority }}
</div>
{%- endif -%}
</a>
</div>
<div class="cart__item__content">
<div class="cart__item__content-inner">
<h4 class="cart__item__title">
<a href="{{ line_item.url }}">
{{- line_item.product.title | strip_html -}}
</a>
</h4>
<div class="cart__item__meta">
{%- assign properties_html = '' -%}
{%- assign property_size = line_item.properties | size -%}
{%- if property_size > 0 -%}
{%- assign sale_type = 'products.product.sale_type' | t -%}
{%- for p in line_item.properties -%}
{%- assign property_first_char = p.first | slice: 0 -%}
{%- if p.last != blank and property_first_char != '_' -%}
{%- if p.first == sale_type -%}
<p class="cart__item__selected-options">
<span>
{%- if p.last contains '/uploads/' -%}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{%- else -%}
{{ p.last }}
{%- endif -%}
</span>
</p>
{%- else -%}
{%- capture properties_html -%}
{{ properties_html }}
<p class="cart__item__property">
<strong>{{ p.first }}: </strong>
<span>
{%- if p.last contains '/uploads/' -%}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{%- else -%}
{{ p.last }}
{%- endif -%}
</span>
</p>
{%- endcapture -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- unless line_item.product.has_only_default_variant -%}
{%- for option in line_item.options_with_values -%}
<p class="cart__item__selected-options">
<strong>{{ option.name }}:</strong>
<span>{{ option.value }}</span>
</p>
{%- endfor -%}
{%- endunless -%}
{%- if line_item.selling_plan_allocation -%}
<p class="cart__item__selling-plan">
<span>{{ line_item.selling_plan_allocation.selling_plan.name }}</span>
</p>
{%- endif -%}
{%- if properties_html != '' -%}
{{ properties_html }}
{%- endif -%}
</div>
</div>
<p class="cart__price">
{%- liquid
assign discounted = false
assign sale = false
if line_item.original_price > line_item.final_price
assign discounted = true
endif
if line_item.variant.compare_at_price > line_item.final_price
assign sale = true
endif
-%}
{%- if sale or discounted -%}
<ins>
{%- if line_item.final_price == 0 -%}
{{ 'general.money.free' | t }}
{%- else -%}
{{- line_item_final_price -}}
{%- endif -%}
</ins>
{%- else -%}
{%- if line_item.final_price == 0 -%}
{{ 'general.money.free' | t }}
{%- else -%}
{{- line_item_final_price -}}
{%- endif -%}
{%- endif -%}
{%- if sale and discounted == false -%}
<del>{{- line_item_variant_compare_at_price -}}</del>
{%- endif -%}
{%- if discounted -%}
<del>{{- line_item_original_price -}}</del>
{%- endif -%}
{%- if line_item.unit_price -%}
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if line_item.unit_price_measurement.reference_value != 1 -%}
{{- line_item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{- line_item.unit_price_measurement.reference_unit -}}
{%- endcapture -%}
<span class="line__price">
<small class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</small>
<small>{{ line_item_unit_price }}{{ unit_price_separator }}{{ unit_price_base_unit }}</small>
</span>
{%- endif -%}
</p>
<quantity-counter class="cart__quantity-counter">
<div class="cart__quantity">
<button
class="cart__quantity-minus"
type="button"
name="decrease"
title="{{ 'cart.general.decrease_quantity_label' | t }} - {{ line_item.product.title | strip_html }}">
{%- render 'icon-minus' -%}
</button>
{%- assign quantity = line_item.quantity -%}
{%- if line_item.variant.inventory_policy == 'deny' and line_item.variant.inventory_management != nil and line_item.variant.inventory_quantity < quantity -%}
{%- assign quantity = line_item.variant.inventory_quantity -%}
{%- endif -%}
<input
class="cart__quantity-field"
type="number"
id="updates_{{ line_item.key }}"
name="updates[]"
data-id="{{ line_item.key }}"
value="{{ quantity }}"
title="{{ 'cart.general.quantity_field_label' | t }} - {{ line_item.product.title | strip_html }}"
pattern="[0-9]*">
<button
class="cart__quantity-plus"
type="button"
name="increase"
title="{{ 'cart.general.increase_quantity_label' | t }} - {{ line_item.product.title | strip_html }}">
{%- render 'icon-plus' -%}
</button>
</div>
<a class="cart__item__remove"
href="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity=0"
data-item-remove
data-id="{{ line_item.key }}"
title="{{ 'cart.general.remove' | t }}">
{{- 'cart.general.remove' | t -}}
</a>
</quantity-counter>
</div>
{%- if line_item.original_price > line_item.final_price -%}
{%- for discount in line_item.line_level_discount_allocations -%}
<p class="cart__discount">
{%- render 'icon-tags' -%}
{%- assign discount_price = discount.amount | money -%}
<span>{{ 'cart.general.discount_label' | t: amount: discount_price, title: discount.discount_application.title }}</span>
</p>
{%- endfor -%}
{%- endif -%}
</div>
{%- endcapture -%}
{%- assign line_items_html = line_items_html | append: cart_line_item -%}
{%- endfor -%}
{%- comment -%}
Capture upsell items based on products added to Cart
{%- endcomment -%}
{%- for line_item in cart.items -%}
{%- capture upsell_line_item -%}
{%- liquid
comment
Upsell items
endcomment
assign upsell_product_single = line_item.product.metafields.theme.upsell
assign upsell_product_list = line_item.product.metafields.theme.upsell_list
comment
Product meta field type "One product"
endcomment
if upsell_product_single.value != nil and upsell_product_single.type == 'product_reference'
assign upsell_product = upsell_product_single.value
unless upsell_products contains upsell_product.handle or cart_products contains upsell_product.id
render 'upsell-product' upsell_product: upsell_product, is_cart: true
assign upsell_products = upsell_products | append: upsell_product.handle | append: ','
endunless
endif
comment
Product meta field type "List of products"
endcomment
if upsell_product_list.value != nil and upsell_product_list.type == 'list.product_reference'
for upsell_product in upsell_product_list.value
unless upsell_products contains upsell_product.handle or cart_products contains upsell_product.id
render 'upsell-product' upsell_product: upsell_product, is_cart: true
assign upsell_products = upsell_products | append: upsell_product.handle | append: ','
endunless
endfor
endif
-%}
{%- endcapture -%}
{%- assign upsell_items_html = upsell_items_html | append: upsell_line_item -%}
{%- endfor -%}
{%- case part -%}
{%- when 'line-items' -%}
{{- line_items_html -}}
{%- when 'upsell-items' -%}
{{- upsell_items_html -}}
{%- endcase -%}
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025