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>

• Firstly 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:

Here you can see the ID is product_form_6802660622380

We also get a hint that the number on the end is not 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>