Custom Liquid Add a Note Field to Product Page -Dawn Theme

Store Design

Topic summary

A user is experiencing width alignment issues with a custom liquid note field on their product page in the Dawn theme. The message box extends 1.5 inches wider than the “Add to cart” button. They’ve tried two code approaches:

Attempted solutions:

  • Original code using <textarea> was both too wide and too tall
  • Modified version using <input type="text"> fixed the height but width problem persists

Both code snippets contain minor syntax errors (spacing in “textarea” closing tags, double quotes in type attribute).

Response & Related Issue:

  • Another user requested a viewable store URL or storefront password to diagnose the styling problem, noting that visual context is essential for troubleshooting
  • A separate participant raised a different but related question about product notes not appearing in order confirmation emails (customer and staff notifications), though they display correctly in cart, checkout, and order status pages

The width alignment issue remains unresolved and requires CSS inspection of the specific store implementation.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I have custom liquid add a note field on my product page but the message box is 1.5 inches wider than my “Add to cart” button. Looks ridiculous. I have 2 custom liquid options: #1 below was the original but the message box was too wide and too high. #2 below corrected the height but the box still remains way too wide. Can somebody help with this?

Message:

Gift Message:

I appreciate any help.

Thank you

2

Hi @staceyp55 :waving_hand: Provide a viewable store url, and or storefront pass.

READ: https://community.shopify.com/c/technical-q-a/how-to-get-help-from-shopify/td-p/1464639

When seeking help in the technical or life always remember other people, they do not see what you see or have the same setup.

You must communicate relevant info someone needs to SEE or reproduce the issue for them to even begin to contribute.

1 Like
3

I have added a “notes field” to product default template in the Dawn theme. When running a test order, the product notes field appears perfectly in the cart, checkout, order confirmation and order status web pages. However, the “product notes” do not appear in either the Customer Notification order emails or the Staff Notification order emails. How do I get the product notes to appear in the order confirmation emails?