Add a Text Field To Products in Shopify 2.0 - Gift Notes, Engravings, Customizable Products, etc...

This is a brief summary of the video above. You can watch it for the full tutorial. 

The finished code (for Dawn):

<label for="message" class="form__label">Message:</label>
<div class="field">
  <textarea id="message" class="text-area field__input" placeholder="Message" name="properties[Message]"form="product-form-{{ section.id }}"></textarea>
</div>

What & Why

Many Shopify themes already have a text field built-in on the CART page - usually called 'Order Notes'. This attaches a note to the entire order which you can then see in your Shopify orders page. 
There are cases when this isn't suitable, such as when you sell customizable products. E.g: 
  • Engravings or products with the name of the recipient on them. 
  • Flowers, birthday gifts, corporate gifts, with a gift message attached to each product. 

For example, a corporate client could order 10 different gifts in one order, with a different gift message for each gift. 

So when the order comes through - you need to see this text attached to the product, rather than the entire order. 

This tutorial is the easiest way to do it with just one or two text fields on a Shopify 2.0 theme like Dawn. We will be using the "custom liquid" block type, which is only available on modern themes. 

Also, if you want to give a customer more options to customize the product, with different field types like checkboxes or dropdowns, let me know and I can make that video. 

Step 1 - Add a custom liquid block

  • Go into your theme editor, and navigate to your product page. 
  • Open the dropdown called product Information
  • Add block > Custom liquid

Step 2 - Create a basic textarea

<textarea id="message" placeholder="Message" name="properties[Message]"></textarea>
  • Firslty choose what you want to call it. I'm using "message" to keep it generic but for you it might be "engraving", "gift-note" or whatever you want.
  • We add an id of "message" in lower case (or whatever word you're using). 
  • We add a placeholder with proper sentence case - people see this as the preview on the field.
  • Most important part: We add name="properties[Message]". Whatever you called your field goes in the square brackets.
  • The properties[] part is always the same. This is what connects the field to the Shopify admin. This is the heading that you will see in the order. 

Step 3 - Link the textarea to the form

If you're using Dawn, you just need to add the following attribute to your textarea: 

form="product-form-{{ section.id }}"

The complete textarea looks like this so far: 

<textarea id="message" class="text-area field__input" placeholder="Message" name="properties[Message]"form="product-form-{{ section.id }}"></textarea>

 If you're not using Dawn, you need to take a look at the form code using the inspector, and find the form ID. You can find the form by right-clicking anywhere around the add-to-cart button, and clicking Inspect. 

The form HTML will look something like this: 

<form method="post" action="/cart/add" id="product_form_6802660622380" accept-charset="UTF-8" class="product-form" enctype="multipart/form-data" data-productid="6802660622380" data-product-form="">
Here you can see the ID is  product_form_6802660622380
We also get a hint that the number on the end is no the section id as on Dawn theme, but rather its the product id, because lower down you can see data-productid and the same number.
From this we can deduce that we should change the form id from the Dawn example to something like this: 
form="product_form_{{ product.id }}"

Step 4 - Make it look nicer

Adding classes that your theme uses for CSS will immediately make this field look like part of your theme 

  • You can find the classes you should use by inspecting the contact form on your contact page. The message field there is a textarea, so you can sopy those classes. 
  • For Dawn, the classes for the textarea are text-area and field__input
  • For Dawn, we should also wrap the textarea in a div with class of "field"

Here is the full code so far: 

<div class="field">
  <textarea id="message" class="text-area field__input" placeholder="Message" name="properties[Message]"form="product-form-{{ section.id }}"></textarea>
</div>

Step 5 - Add a field label

This appears above the field. 

<label for="message" class="form__label">Message:</label>

  • The 'for' attribute should match the id of the textarea. 
  • For Dawn, the class is "form__label".

The finished code (for Dawn):

<label for="message" class="form__label">Message:</label>
<div class="field">
  <textarea id="message" class="text-area field__input" placeholder="Message" name="properties[Message]"form="product-form-{{ section.id }}"></textarea>
</div>
Back to blog

9 comments

Spent a whole day trying to figure this out with other tutorials, until I found your post! Thanks for this, helped a lot!

Mark

Thank you for the instructive tutorials!
Will this code print out on the packing slips? I do custom embroidery and I need this field to print out. I was using the metafield you gave a tutorial on but I couldn’t figure out how to see or print out the metafield.

Kelly

Thanks a lot, that was awesome! :-)

Christian Rajkai

I used your code to create the TO and FROM fields. Everything works great; however, I wanted to inquire and see if there is a way to make the text fields smaller. Thank you.

por-tia

thanks for the very helpful instructions. just wondering how can we make the newly created field mandatory?

Reymond Keng

Leave a comment

Please note, comments need to be approved before they are published.