Ask your customers how they heard about your store

You can ask your customers how they heard about your store by adding a How did you hear about us? form field to your cart page.

How did you hear about us

Sectioned and non-sectioned themes

Create the How did you hear about us? form field

To create the How did you hear about us? form field:

  1. Find the theme you want to edit, click Actions, and then click Edit code.

  2. In the Snippets directory, click Add a new snippet.

  3. Create the snippet:
    a. Name your snippet hear-about-us.
    b. Click Create snippet:

    Create snippet
  4. In your new hear-about-us snippet, paste this code hosted on GitHub.

  5. Click Save.

Include the form field in your cart template

To include the How did you hear about us? form field in your cart template:

  1. In the Sections directory, click cart-template.liquid. If your theme doesn't include a cart-template.liquid, then click cart.liquid in the Templates directory.

  2. Find the closing </form> tag in the code. On a new line above the closing </form> tag, paste the following code:

   {% include 'hear-about-us' %}
  1. Click Save.

Include jQuery in your theme.liquid

For this customization to work, some themes require that a script tag for jQuery is added to the theme.liquid layout file. If you use Boundless, Debut, Narrative, or Venture, then you will need to follow the next steps:

  1. In the Layout directory, click theme.liquid.

  2. Find the closing </head> tag in the code. On a new line above the closing </head> tag, paste the following code:

    {{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
    
  3. Click Save.

Set your options

To customize the options in the How did you hear about us? drop-down menu, you can edit the code in your hear-about-us.liquid snippet.

  1. In the Snippets directory, click hear-about-us.liquid.

  2. Find the first line of code:

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

    Add or remove options, separated by commas.

  3. Click Save.

Make the form field required

To prevent customers from proceeding the the checkout without selecting an option in the How did you hear about us? form field, you can make the field required.

  1. In the Sections directory, click cart-template.liquid. If your theme doesn't include a cart-template.liquid, then click cart.liquid in the Templates directory.

  2. Find and delete the following attribute in the Add to cart form code:

     novalidate
    
  3. Click Save.

FAQ

Where will I see the data that's captured?

You will see the answer in the admin, in the Additional details section of the order:

alt

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

Yes, they can. When the customer selects Other, a text box in which they can type an answer will appear below the drop-down menu.

Can I show the answer in my New order notification emails?

Yes. To show customer responses in your New order notification emails:

  1. Go to your Notifications page in your 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 %}.
    
  2. Click Save.

Create the How did you hear about us? form field

To create the How did you hear about us? form field:

  1. Find the theme you want to edit, click Actions, and then click Edit code.

  2. In the Snippets directory, click Add a new snippet.

  3. Create the snippet:
    a. Name your snippet hear-about-us.
    b. Click Create snippet:

    Create snippet
  4. In your new hear-about-us snippet, paste this code hosted on GitHub.

  5. Click Save.

Include the form field in your cart template

To include the How did you hear about us? form field in your cart template:

  1. In the Templates directory, click cart.liquid.

  2. Find the closing </form> tag in the code. On a new line above the closing </form> tag, paste the following code:

   {% include 'hear-about-us' %}
  1. Click Save.

Set your options

To customize the options in the How did you hear about us? drop-down menu, you can edit the code in your hear-about-us.liquid snippet.

  1. In the Snippets directory, click hear-about-us.liquid.

  2. Find the first line of code:

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

    Add or remove options, separated by commas.

  3. Click Save.

Make the form field optional

To prevent customers from proceeding the the checkout without selecting an option in the How did you hear about us? form field, the field is required by default. To change the form field to be optional:

  1. In the Templates directory, click cart.liquid.

  2. Find the following code:

    {% assign required = true %}
    

    Replace it with:

    {% assign required = false %}
    
  3. Click Save.

FAQ

Where will I see the data that's captured?

You will see the answer in the admin, in the Additional details section of the order:

alt

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

Yes, they can. When the customer selects Other, a text box in which they can type an answer will appear below the drop-down menu.

Can I show the answer in my New order notification emails?

Yes. To show customer responses in your New order notification emails:

  1. Go to your Notifications page in your 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 %}.
    
  2. Click Save.

Want to discuss this page?

Visit the Shopify Community