Many tutorials on adding customer notes to Shopify product pages suggest editing your theme code, which can be intimidating and may not carry over during future theme updates. Fortunately, there’s a simpler and safer way to do this, ensuring your customizations remain intact during updates. This method involves adding the code in a custom liquid block within the product information section, no theme code editing required. ** This is tested on the Dawn Theme. Some themes don’t have the option for custom-liquid on product pages. Message your theme developer for help with this.

Here’s how you can add customer notes easily:

‍

1. Access the Shopify Theme Editor:

‍Go to your Shopify admin and navigate to Online Store > Themes > Customize. This will take you into your theme editor.

In the theme editor, locate the Product Information Section for your product pages.

Click “Add block” and select Custom Liquid.

‍

2. Insert the Customer Notes Code:

‍In the custom liquid block, add the following code snippet to create a text area for customer.

<div class="product__custom-note">
   <!-- Add Note Checkbox -->
   <input type="checkbox" id="add-note-checkbox" name="add-note-checkbox" onclick="toggleNoteInput()">
   <label for="add-note-checkbox">Add Note</label>
   
   <!-- Hidden Textarea for Custom Note -->
   <div id="custom-note-textarea" style="display: none; margin-top: 10px;">
       <label for="customer-note">Add custom note here:</label>
       <textarea name="customer-note" id="customer-note" rows="4" style="width: 100%;"></textarea>
   </div>
</div>

<script>
// JavaScript to toggle visibility of the custom note textarea
function toggleNoteInput() {
   var checkbox = document.getElementById('add-note-checkbox');
   var textarea = document.getElementById('custom-note-textarea');
   
   if (checkbox.checked) {
       textarea.style.display = 'block';
   } else {
       textarea.style.display = 'none';
   }
}
</script>

‍

3. Save and Preview

Once you’ve added the code, save your changes and preview the product page. You should now see a section where customers can add special notes before checkout.

‍

Why This Method is Better

‍

By using a custom liquid block, you don’t need to dig into your theme’s code files. This way is not only faster but also safer since any changes you make through the theme editor will be preserved during future updates to your theme. The only issue is some themes don’t have the option for custom-liquid in their product pages. You would need to message your theme developer for help with that or to make the request for future updates.

With just a few simple steps, you’ve made your store more personalized and flexible—no coding knowledge required!

If you have any questions relating to Shopify customizations, please post them down below and I will be happy to look into them for future blog posts. Feel free to contact me with any questions, or if you’d like to hire me to work on your site.

‍

‍