Ask your customers how they heard about your store

In this tutorial, we will add a “How did you hear about us?” drop-down to a store's cart page.

Hear about us result

Theme compatibility

Caution

You can only add the “How did you hear about us?” question to your Cart page at /cart. The information will not be captured in a cart drawer or cart popup. You will need to disable any cart drawer or popup in your theme if you wish to continue. Also, you cannot add the “How did you hear about us?” to any of the checkout pages. The cart page is the latest stage at which you are able to collect that information.

Brooklyn, Classic, Pop, Solo, or Supply

To disable cart drawers or popups in the Brooklyn, Classic, Pop, Solo, or Supply themes, visit your Customize theme page, click the Cart page section, and set the Cart type to Page.

Disable ajax

Lookbook

The Lookbook theme does not support this addition.

Create and include a hear-about-us snippet

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Click on the Snippets folder to expand and view its content.

  4. Under the Snippets folder, click Add a new snippet.

  5. Name your new snippet hear-about-us. Click on the Create snippet button.

Hear about us create snippet

  1. In your new snippet, paste the code found in this gist.

  2. Back on the Edit HTML/CSS page, click on cart.liquid under Templates, to open your cart template in the code editor.

  3. Include your snippet where you want your drop-down to appear in the cart form. Make sure to include the snippet between the opening <form> and closing </form> tags of your cart form.

To include your snippet, use this code:

   {% include 'hear-about-us' %}

Set your options

In your hear-about-us.liquid snippet, you can edit the first line of code to list your own options. You can have as many options as you want, but make sure they are separated by a comma.

{% assign choices = "Facebook, Twitter, Google, Best Toys Bulletin, John Doe" %}

Note

Do not include the option “Other”. The code we use already adds it.

Can I force the customer to answer the question?

By default, our code already contains a validation script. If you prefer to make it optional to answer the question, change line no 2 in your hear-about-us.liquid snippet from this:

{% assign required = true %}

To that:

{% assign required = false %}

Where will I see the data that's captured?

You will see the answer on your order page in your store's admin as a cart note:

Hear about us cart note

May I still use a cart note besides this?

Yes.

If no listed option is the answer, can a customer type in something?

Yes, he can. When your customer selects the 'Other' option, a text box will appear below the drop-down for him to type his own answer.

Can I show the answer in my New order emails?

Yes. For this, go to your Notifications page in your store's admin, and add the following code to your New order email template:

This customer heard about us through {% if attributes.how-did-you-hear-about-us-other == blank %}{{ attributes.how-did-you-hear-about-us }}{% else %}{{ attributes.how-did-you-hear-about-us-other }}{% endif %}.

Want to discuss this page?

Visit the Shopify Community