How to Create a Custom Note Field on Your Shopify Cart Page – EcomExperts
Shopify Blog

How to Create a Custom Note Field on Your Shopify Cart Page

Andrew Durot
8 min read

Why might you want to add a field for notes on your Shopify cart page? You may want to add a custom note field to collect additional information from your shoppers. Maybe your customers would like to add a gift message, extra notes for delivery, packaging notes, etc. Providing a field for customer notes on the cart page will allow them to communicate with you and promote Shopify cart page optimization. 

Special Instructions on Shopify Tutorial

For Shopify cart page customization, read this tutorial to find out how to add special instructions on Shopify. 

Go to the :

https://ui-elements-generator.myshopify.com/pages/cart-attribute

The first step is to add an extra option to the cart. Go to the: https://ui-elements-generator.myshopify.com/pages/cart-attribute

[insert screenshot]

Note Field Cart Page

From here, you should firstly choose the type of form field. You can choose between:

  • Short text
  • Long text
  • Radio buttons
  • Drop-down select
  • Checkbox

You can use any of the above options, including the checkbox cart page Shopify. For our purposes, we’ll choose long text, and under “your form field label,” type: “Please give us instructions.” and check “Required.” The code is generated at the bottom. Copy the code onto the clipboard to put into your store.

Go to Online Store. Go to Actions and click on Duplicate. Once the copy is made, go to Actions and go to Edit Code.

When you’re in the code, go to Search and begin typing cart-template.liquid. It should be in the Sections section. Click on it, and all the code appears.

When you scroll through the code, you will find form tags. It should say “form action” in the method. This is the start of your form tag. If you scroll down you can find the end, which looks like </form>. You should paste your code somewhere between the beginning and the end of the form tag. Where you place the code will influence how your page looks, so it’s okay to experiment with this a bit. For the purpose of this tutorial, we will paste it at the end of the form tag. Once your code is pasted, hit Save.

Time to see if it works! Go to the online store. Make sure you go to the copy you created, not the original. Go to Actions>Preview. Go to your product and select it, then go to your cart. You should now have a field for notes. Try putting a note in the box to see if it works.

Next, click on Actions in the copy, and click Publish. Now your customers can add special instructions.

Custom Note Field on Cart Page Shopify

Adding a field for special instructions on your cart page will make your store stand out among the other stores because it gives your customers a way to specify their needs. How many of us as shoppers have wished for a place where we could include a note to the seller for some reason or other? Now your shoppers can leave a note cart page because there’s a text field on the cart page.

We hope this special instructions Shopify tutorial was beneficial. Should you have questions, feel free to contact Ecom Experts.

Leave a comment

About Andrew Durot

He is the co-founder of Ecom Experts, a Shopify focused development agency. 

Ecom Experts and Andrew's team have been focused on speed optimization - increasing the speed of over 300 stores in last year alone.

Speed Optimization is a repetitive & time-consuming task that most veteran Shopify experts try to avoid.

Andrew and his team has taken it upon themselves to maser the subject and become the largest speed optimization team on he Shopify platform even building out the only Shopify specific speedchecker tool!

Check Your Speed

Guides

Leave a comment