Why isn't my personalization text area appearing in the cart and checkout areas?

Store Design
1

I have the Impulse theme for Shopify 2.0 and I’m attempting to add a personalization text area to a new product template, and have whatever the customer enters into that field show up in the cart drawer and checkout areas.

Basically, the end result I want is to allow a customer to type text into a box that will be custom printed on the product just for them. I want whatever they type to appear in both the cart drawer, the checkout area, and on the admin order with the rest of the product variants (for confirmation and printing purposes).

The text area I’ve added appears on my product template correctly, but the value entered into it is not being passed into the cart or checkout no matter what I try.

Here’s what I’ve tried so far…

Added the following code to my new product template: (and it’s working)


Type the words you'd like to change in the text box supplied below. If you like it as-is, leave the text box below blank.

**NOTE: Personalized products are not eligible for refunds or exchanges. Be sure to check your spelling for accuracy (b/c autocorrect sucks sometimes).** 

Ex. Change Ref No. to JOSEPH.

Ex. Add "Good fashion sense" to the guaranteed to come with list.

Here is the code I added to cart-item.liquid with no result:

{% for item in cart.items %}
      {%- unless line_item.properties == empty -%}
		
      

  			{%- for property in line_item.properties -%}
    			- {{ property.first }}: {{ property.last }}
  			{%- endfor -%}
		

           

	{%- endunless -%}
{% endfor %}

I’ve also attempted this with no result:

{% unless line_item.properties == empty %}
    
      

  	{% for property in line_item.properties %}
    	     - {{ property.first }}: {{ property.last }}
  	{% endfor %}
      

     

{% endunless %}

And finally, this with no results:

{%- unless line_item.properties == empty -%}
		
  			{%- for property in line_item.properties -%}
    			
{{ property.first }}: {{ property.last }}

  			{%- endfor -%}
           

	{%- endunless -%}

I’m not a developer by any stretch of the means, and have just been following tutorials I’ve found by Googling. I see on this thread (https://community.shopify.com/c/shopify-design/line-item-properties-is-null/m-p/1012862) someone was able to solve it by entering this code into their theme.js files, but I have no similar code in my theme, or any way of knowing exactly where I should insert this to get this working (so I can’t solve it using the same method):

$addToCartBtn.addClass('btn--adding');
      $.post(
        '/cart/add.js', 
        $('form[action="/cart/add"]').serialize(),
        null,
        'json'
      ) 
      .done(function() {

Any help would be hugely appreciated.

2

I fixed this by changing where I put my code. Tim from the linked community thread pointed me in the right direction.

As it turns out, Impulse theme has a separate template for the product form if you’re using the latest version of this theme. I was adding my personalization code to the new product.template.personalized.liquid template I’d created based on old tutorials and instructions I’d found online, when I really needed to:

  1. Create a duplicate of the product form and rename it to custom-product-form

  2. Point the new product.template.personalized.liquid template I’d created to that form

  3. Add my textarea code to the product form

It’s working like a charm for me now.