Mastering Your Shopify Cart: Adding a "How Did You Hear About Us?" Dropdown to Order Notes After Theme Migration

View original discussion by quiztrail on Shopify Community →

Hey there, fellow store owners! Let's talk about something incredibly valuable for understanding your customers: knowing exactly 'how did they hear about us?' It's a simple question, but the answers can be gold for your marketing strategy. Recently, I saw a really insightful discussion pop up in the Shopify community that highlighted a common challenge, especially for those of you who've migrated from older themes like Debut to something newer.

Our friend @quiztrail brought up a situation many can relate to: they had a 'How did you hear about us?' dropdown on their cart page that worked perfectly with the Debut theme. The selected information would dutifully show up in the 'Notes' section of the customer's order, right alongside gift messages. But after switching to a new theme, poof! That valuable data stopped flowing to the order notes. Bummer, right? This is a classic example of how theme changes, while often bringing exciting new features and aesthetics, can sometimes break custom functionalities we've come to rely on.

The Cart Page vs. Checkout Page: A Crucial Distinction

Before we dive into the solutions, a quick but important clarification, as pointed out by community member @tim_1: we're talking about the cart page here, not the checkout page. While they both deal with customer information, the way data is handled and submitted can be quite different. Custom fields on the checkout page often require Shopify Plus or specific app integrations, but the cart page offers more flexibility for direct code customizations.

Why Your Custom Dropdown Might Break with a New Theme

The core of quiztrail's issue, and what @tim_1 so helpfully explained, lies in how modern Shopify themes handle forms. Older themes, like Debut, often wrapped a large portion of the cart page within a single HTML

tag. This meant any input element you added inside that form would automatically be submitted with the cart data. Newer themes are often more modular. The main might only enclose the actual product list, leaving other sections outside. For your custom dropdown to 'connect' to the cart form and submit its data, it needs a special attribute: form="cart". This tells the browser, "Hey, even though I'm not directly inside the main cart form, I'm part of it, so please submit my data with it!"

Two Paths to Customer Insights: Custom Attributes vs. Order Notes

The community thread offered a couple of excellent ways to tackle this, each with slightly different outcomes for where the data appears on your order page. Both are valid, but one directly addresses quiztrail's request to see it in the 'Notes' section.

Option 1: Saving as a Custom Cart Attribute

Community member @topnewyork provided a solution that adds the dropdown as a custom cart attribute. This data typically appears in the 'Additional Details' section of your order, or sometimes as a line item property, rather than the main order notes. It's still valuable data, just displayed differently.

Here's the HTML snippet @topnewyork shared, which you'd typically paste at the bottom of your main-cart-items.liquid file (or a similar cart section file):

Notice that crucial form="cart" attribute in the

And here's the crucial JavaScript that makes it all work. This should be placed within

This JavaScript listens for changes in your dropdown. When a customer selects an option, it updates the hidden