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

Sectioned and non-sectioned themes

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. To figure out whether your theme supports sections, go to the theme's Edit HTML/CSS page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.

If you are using a sectioned theme, then click the Sectioned themes button and follow the instructions. If you are using non-sectioned theme, then click the Non-sectioned themes button and follow the instructions.

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 want 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.

Create the "How did you hear about us" form

The instructions for the Debut theme are different from other sectioned themes. Click here to learn how to add the form to Debut.

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

  2. Click the Snippets folder to expand and view its content.

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

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

    Hear about us create snippet

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

  6. Back on the Edit HTML/CSS page, in the Sections directory, click cart-template.liquid.

  7. 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' %}

Create the "How did you hear about us" form for the Debut theme

If you are using the Debut theme, you have to add some code to a snippet and to your theme.js file.

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

  2. Click the Snippets folder to expand and view its content.

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

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

    Hear about us create snippet

  5. In your new snippet, paste this code:

    {% assign choices = "Facebook, Twitter, Google, Best Toys Bulletin, John Doe" %}
    {% assign required = true %}
    
    <div class="form-vertical">
      <p>
        <label for="how-did-you-hear-about-us">How did you hear about us?</label>
        <select id="how-did-you-hear-about-us" name="attributes[how-did-you-hear-about-us]">
          <option value=""{% if cart.attributes.how-did-you-hear-about-us == "" %} selected{% endif %}>Please make a selection</option>
          {% assign optionsArray = choices | split: ',' %}
          {% for o in optionsArray %}
            {% assign option = o | strip %}
            <option value="{{ option }}"{% if cart.attributes.how-did-you-hear-about-us == option %} selected{% endif %}>{{ option }}</option>
          {% endfor %}
          <option value="Other"{% if cart.attributes.how-did-you-hear-about-us == "Other" %} selected{% endif %}>Other</option>
        </select>
      </p>
      <p style="{% unless cart.attributes.how-did-you-hear-about-us == 'Other' %}display:none;{% endunless %}">
        <label for="how-did-you-hear-about-us-other">Other:</label>
        <input id="how-did-you-hear-about-us-other" type="text" name="attributes[how-did-you-hear-about-us-other]" value="{{ cart.attributes.how-did-you-hear-about-us-other }}" />
      </p>
    </div>
    
  6. In the Assets directory, open the theme.js file.

  7. Add this code to the bottom of the theme.js file:

    jQuery(function($) {
    $('#how-did-you-hear-about-us').change(function() {
    if ($('#how-did-you-hear-about-us').val() == 'Other') {
      $('#how-did-you-hear-about-us-other').parent('p').show();
    } else {
      $('#how-did-you-hear-about-us-other').val('').parent('p').hide();
    }
    });
    if ($("#ans").val() == 'true' ) {
    $('[name="checkout"], [name="goto_pp"], [name="goto_gc"]').click(function() {
    var validated = true;
    if ($('#how-did-you-hear-about-us').val() == '') {
      validated = false;    
    }
    else if ($('#how-did-you-hear-about-us').val() == 'Other') {
      if ($('#how-did-you-hear-about-us-other').val() == '') {
        validated = false;
        $('#how-did-you-hear-about-us-other').addClass('error');
      }
    }
    if(validated){
      $(this).submit();
    }
    else{
      alert("Please tell us how you heard about us.");
      return false;
    }
    });
    }
    });
    
  8. Back on the Edit HTML/CSS page, in the Sections directory, click cart-template.liquid.

  9. 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

Can I still use a cart note besides this?

Yes.

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

Yes, they can. When your customer selects the 'Other' option, a text box will appear below the drop-down for them to type their 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 %}.

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 want 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, Pop, or Supply

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

Disable ajax

Create and include a hear-about-us snippet

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

  2. Click the Snippets folder to expand and view its content.

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

  4. Name your new snippet hear-about-us. Click 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 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

Can I still use a cart note besides this?

Yes.

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

Yes, they can. When your customer selects the 'Other' option, a text box will appear below the drop-down for them to type their 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