Hello,
I am trying to add personalisation to one of my products - here. Specifically, I am looking to use line item properties to let customers enter the text that they want on the product.
I have been following this Shopify guide for how to make this work for my theme, but unfortunately, it doesn't seem to be showing the line item properties in the cart.
Based on some simple analysis, it seems as though 'property_size' is 0. As per my code below, the property_size should actually be one given that there is 1 property being set on the product page (initials).
Can somebody please advise on where I might be going wrong?
Thanks in advance,
Liam
Product page form
-----------------
{%- form 'product', product -%}
<select class="productSelect" name="id">
{% for variant in product.variants %}
<option
value="{{ variant.id }}"
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
{% if section.settings.show_quantities and variant.inventory_management != null %}
data-quantity="{{ variant.inventory_quantity }}"
data-inventory="{{ variant.inventory_policy }}"
{% endif %}
>
{{ variant.title | escape }}
</option>
{% endfor %}
</select>
<p class="line-item-property__field">
<label for="initials">INITIALS</label>
<input id="initials" type="text" name="properties[INITIALS]">
</p>
<div class="product__cart-functions">
{%- render 'product-variants', product: product, color_swatches: section.settings.show_color_swatches -%}
<div class="product__cart-actions cart-actions buttons-holder">
<div class="product__cart-actions-holder">
{%- if section.settings.show_quantity_selector -%}
<input type="number" name="quantity" value="1" min="1" class="product__quantity" aria-label="{{ 'product.page.quantity' | t }}">
{%- endif -%}
<button type="submit" name="add" class="product__add-to-cart button button--border">
<span class="add-to-cart__text" data-add-to-cart-text="{% if product.tags contains 'preorder' %} {{ 'product.preorder.button_label' | t }} {% else %} {{ 'product.page.add_to_cart_button' | t }} {% endif %}"> {%- if product.tags contains 'preorder' -%} {{ 'product.preorder.button_label' | t }} {%- else -%} {{ 'product.page.add_to_cart_button' | t }} {%- endif -%} </span>
</button>
</div>
{%- liquid
unless product.tags contains 'preorder'
if section.settings.enable_payment_button
echo form | payment_button
endif
endunless
echo form | payment_terms
-%}
</div>
{%- if section.settings.show_quantities -%}
<span class="product__variant-quantity" {% if product.tags contains 'preorder' %} style="display:none" {% endif %}></span>
{%- endif -%}
{%- if product.tags contains 'preorder' -%}
<span style="display:block;margin-top:2em;width:100%;" class="text-size--smaller">{{ 'product.preorder.description' | t }}</span>
{%- endif -%}
{%- if section.settings.show_local_pickup -%}
<div class="product-availability-container" data-store-availability-container data-base-url="{{ shop.url }}{{ routes.root_url }}"></div>
{%- endif -%}
</div>
{%- endform -%}
cart-form.liquid (snippet within template)
------------------------------------------
<form action="{{ routes.cart_url }}" method="post" novalidate class="cart" id="site-cart">
<div class="cart-holder" data-items="{{ cart.items.size }}">
<div class="cart-items">
{%- for item in cart.items -%}
<div class="cart-item" data-title="{{ item.product.title | escape }} {%- unless item.product.has_only_default_variant -%} ({{ item.variant.title | escape }}) {%- endunless -%}" data-id="{{ item.key }}" data-variant="{{ item.variant.id }}" data-qty="{{ item.quantity }}">
<div>
<a href="{{ item.url | within: collections.all }}" class="thumbnail">
<figure class="lazy-image {% if item.image.src contains 'png' %} lazy-image--transparent {% endif %}" data-ratio style="padding-top: 130%">
<img
src="{{ item.image | img_url: '100x130', crop: 'center' }}" alt="{{ item.title | escape }}"
srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-srcset="{{ item.image | img_url: '100x130', crop: 'center' }} 100w, {{ item.image | img_url: '200x260', crop: 'center' }} 260w"
data-sizes="auto" class="lazyload"
width="{{ item.image.width }}" height="{{ item.image.height }}"
/>
<noscript><span class="ll-fallback" style="background-image:url({{ item.image | img_url: '100x130', crop: 'center' }})"></span></noscript>
</figure>
</a>
<div class="content">
<a href="{{ item.url }}">
<span class="title">{{ item.product.title | escape }}</span>
{%- unless item.product.has_only_default_variant -%}
<span class="info variant-title">({{ item.variant.title | escape }})</span>
{%- endunless -%}
</a>
{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
{{ item.properties }}
<p>...</p>
{% for p in item.properties %}
{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}
{{ p.first }}:
{% if p.last contains '/uploads/' %}
<a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
<br>
{% endunless %}
{% endfor %}
{% endif %}
{%- if item.selling_plan_allocation -%}
<span class="info selling-plan">
{{ item.selling_plan_allocation.selling_plan.name }}
</span>
{%- endif -%}
<div class="price">
<div class="item__price-list">
{%- if item.final_line_price < item.original_line_price -%}
<span class="item__price">{{ item.final_line_price | money }}</span>
<span class="item__price item__price--compare">{{ item.original_line_price | money }}</span>
{%- elsif item.variant.compare_at_price > item.variant.price -%}
<span class="item__price">{{ item.final_line_price | money }}</span>
<span class="item__price item__price--compare">{{ item.variant.compare_at_price | times: item.quantity | money }}</span>
{%- else -%}
<span class="item__price">{{ item.final_line_price | money }}</span>
{%- endif -%}
{%- if item.quantity > 1 and type == 'page' -%}
<span class="info quantity-extra" style="margin-top:3px">({{ item.quantity }} x {{ item.final_price | money }})</span>
{%- endif -%}
</div>
{%- if item.unit_price_measurement -%}
<span class="item__unit">
{{ item.unit_price | money }} /
{%- if item.unit_price_measurement.reference_value != 1 -%}
{{ item.unit_price_measurement.reference_value }}
{%- endif -%}
{{ item.unit_price_measurement.reference_unit }}
</span>
{%- endif -%}
</div>
{%- if item.line_level_discount_allocations.size > 0 -%}
{%- for discount_allocation in item.line_level_discount_allocations -%}
<small class="discount">{{ 'cart.discount' | t }} <span style="display: inline-block">{{ discount_allocation.discount_application.title }} <span style="display: inline-block">(-{{ discount_allocation.amount | money | strip }})</span></span></small>
{% endfor %}
{%- endif -%}
</div>
</div>
<div class="actions">
{%- if settings.cart_quantity_selector -%}
<input data-href="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity=$qty" class="qty" type="number" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0" aria-label="{{ 'product.page.quantity' | t }}">
{%- endif -%}
<a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity=0" class="remove" title="{{ 'cart.remove_item' | t }}" aria-label="{{ 'cart.remove_item' | t }}"><span aria-hidden="true">{% render 'theme-symbols', icon: 'close' %}</span></a>
</div>
</div>
{%- endfor -%}
</div>
{%- if settings.cart_notes_enable -%}
<textarea name="note" id="cartSpecialInstructions" placeholder="{{ 'cart.note' | t }}" aria-label="{{ 'cart.note' | t }}">{{ cart.note }}</textarea>
{%- endif -%}
<div class="cart-out">
<div id="CartDetails">
{%- if cart.cart_level_discount_applications != blank -%}
<div>
<p id="CartSubTotal">{{ 'cart.subtotal' | t }} <span>{{ cart.items_subtotal_price | money }}</span></p>
<p id="CartDiscounts">
{{ 'cart.discounts' | t }}
{%- for discount_application in cart.cart_level_discount_applications -%}
<span style="display: inline-block">{{ discount_application.title }} <span style="display: inline-block">(-{{ discount_application.total_allocated_amount | money | strip }})</span></span>
{%- endfor -%}
</p>
</div>
{%- endif -%}
</div>
<p id="CartTotal">{{ 'cart.total' | t }} <span>{{ cart.total_price | money }}</span></p>
<span class="info">{{ 'cart.shipping_at_checkout' | t }}</span>
<div class="cart-actions buttons-holder {% if additional_checkout_buttons and settings.cart_additional_buttons and type == 'page' %} cart-actions--additional-checkout-buttons {% endif %}">
{%- if type == 'sidebar' -%}
<button class="button button--border">{{ 'cart.view_cart' | t }}</button>
{%- endif -%}
<noscript><button name="update" class="button button--border button--wide">{{ 'cart.update_cart' | t }}</button></noscript>
<input class="button button--solid {% if additional_checkout_buttons and settings.cart_additional_buttons and type == 'page' %} button--wide {% endif %}" type="submit" name="checkout" value="{{ 'cart.checkout' | t }}">
{%- if additional_checkout_buttons and settings.cart_additional_buttons -%}
<div class="additional-checkout-buttons additional-checkout-buttons--vertical">{{ content_for_additional_checkout_buttons }}</div>
{%- endif -%}
</div>
</div>
</div>
<div class="cart-continue">
<a href="{{ routes.all_products_collection_url }}" class="button button--solid button--wide button--align">
<span>{{ 'cart.continue_browsing' | t }}</span>
</a>
</div>
</form>
