How to make Line Item Property appear on cart page

[frenchgraffiti]

Hi! I am using the custom liquid section to add a box where people can add in a "Custom Location" that will be printed on their product. Code for the custom liquid...

<p class="line-item-property__field">
<label for="custom-location">Custom Location:</label>
<input required class="required" id="custom-location" type="text" name="properties[Custom Location]">
</p>

via: https://ui-elements-generator.myshopify.com/pages/line-item-property

The box appears and looks correct but does not translate to the cart page/order form, could someone please help me with this!? I am not a coder so might need step by step help here! 

Webpage: https://french-graffiti.myshopify.com/?key=bacc869f94c85356b65bd5a3d68a651fe1d8dc6e53106a276c21c7967...

[mics]

To make the line item property appear on the cart page in your Shopify store, you'll need to modify your theme's liquid code. Here are the steps you can follow:

1. Open your Shopify admin and go to Online Store > Themes.
2. Find the theme you're currently using and click on the "Actions" dropdown, then select "Edit Code".
3. In the left-hand sidebar, navigate to the "Sections" folder and click on the "cart-template.liquid" file.
4. Find the following code in the "cart-template.liquid" file:

{% for item in cart.items %} {% include 'cart-item' with item %} {% endfor %}

1. Replace it with the following code:

{% for item in cart.items %} {% include 'cart-item' with item %} {% for property in item.properties %} <p>{{ property.first }}: {{ property.last }}</p> {% endfor %} {% endfor %}

1. Save the changes to the "cart-template.liquid" file.

With this code, you should be able to see the custom location property that customers added to their cart item. You can modify the appearance of the property as needed by editing the HTML and CSS of the code. If you're not comfortable making these changes yourself, you may want to consider hiring a Shopify expert to assist you.

[WebbyWeb]

Hi,

I tried to follow the steps with no success.

==========================

In product.liquid I added in the form:

{%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">

<p class="line-item-property__field">
<label for="your-name">Your name</label>
<input id="your-name" type="text" name="properties[Your name]">
</p>

...

{{ form | payment_terms }}
{%- endform -%}

==========================

In main-cart-items.liquid

I added the following

<label>aaaa</label>
{% for property in item.properties %} <p>{{ property.first }}: {{ property.last }}</p> {% endfor %}
<label>bbbb</label>

==========================

When I view the cart I can see my selected product and then my labels aaaa and bbbb

Please help, how do I see the item properties?

[WebbyWeb]

Just found a solution, hope it helps others

My line items were missing: form="{{ product_form_id }}"

Example:

<p class="line-item-property__field">
<label>Select your lasagna:</label><br>
<select required class="required" id="select-your-lasagna" name="properties[Select your lasagna]" form="{{ product_form_id }}">
<option value="Vegetarian">Vegetarian</option>
<option value="Bolognese">Bolognese</option>
</select>
</p>

[KristenDScott]

I was trying to do this, but because I updated my template to Studio 2.0, this doesn't seem to work. The organization has changed, and they seem to be moving away from liquid to json, whatever that means. Any ideas what's going on?

[KristenDScott]

If anyone needs help, I got my problem solved! I have Studio 2.0, so it uses .json and new ways of adding custom things to your pages. This guy rocked, and gave me the tools to do what I needed very simply. Please check out his link and give him a donation if you can, to show your love. https://ed.codes/blog/add-a-text-field-to-products-in-shopify-2-0-gift-notes-engravings-customizable...

[Superfunk]

This is super useful and should be marked as the answer.
You can create a for with cart.items, then you iterate that for with some identifier like item within the items array.
Then you create a for with item.properties, and you can iterate with some identifier like property within the properties array.
Then you can call each property through property.first as the key and property.last as the value for that key.

{% comment %}
Example using the cart items cart properties and even the title of a certain given product present at the cart.
Remember:
The key would be property.first.
The value would be property.last.
{% endcomment %}
{% for item in cart.items %}
  {% for property in item.properties %}
    {% capture property_value_to_compare %}
      {{ property.last | downcase }}
    {% endcapture %}
    {% if property_value_to_compare contains "something_in_downcase" %}
    {% endif %}
  {% endfor %}
  {% capture product_title_to_compare %}
    {{ item.product.title | downcase }}
  {% endcapture %}
  {% if product_title_to_compare contains "something_in_downcase"  %}
  {% endif %}
{% endfor %}

[KristenDScott]

If you still need help, this guy helped me in a couple of steps. Super easy! https://ed.codes/blog/add-a-text-field-to-products-in-shopify-2-0-gift-notes-engravings-customizable...