How did you hear about us in checkout?

Highlighted
Tourist
6 0 8

Is it possible to collect this data in checkout? I want to know if they found me online, organically, on social media, at a market or show.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
621 15 168

Hi Lisa!

Liam here from Shopify - thank you for your question :)

Asking your customers how they heard about your store is a great way to see where traffic is coming from and shape your upcoming marketing campaigns- so it would be an awesome idea to have this on your store! While it is not possible to include this on the checkout page, since the customisations on the checkout page are limited, you would be able to ask this question on the cart page. We have a handy tutorial from our manual here which with shows you how to create a drop down menu on your cart page where you can assign choices that your customers can pick. You can even include an "other" option where customers type in their source and you have these answers send to you by email in the New Order Confirmation. 

Hope this helps, if you have any other questions, just let me know!

Cheers,
Liam

Shopify Guru
support@shopify.com

Liam, Community Manager
0 Likes
Highlighted
New Member
8 0 0

Hi I followed the instructions and have created the drop down :)

Is there a way/code to insert to make it non-mandetory? I don't want to put customers off checking out!

This is the code I have used for my snippet:

{% assign choices = "Instagram, Facebook, Our Blog, Google, Youtube, Twitter, At an Event, From a Friend" %}
{% 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>

<script>
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 required %}
  $('[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;
    }
  });
  {% endif %}
});
</script>

 

 

Thanks :)

0 Likes
Highlighted
New Member
1 0 0

Hi there, 

Thank you so much for writing this code! 

I was wondering what part of the code to take out so that it's not required to answer the "How did you hear about us" question.

Thanks!  

0 Likes
Highlighted
Shopify Expert
2684 67 778

Hi Josh, 

have you tried to change 

{% assign required = true %}

from true to false?

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
1 Like
Highlighted
New Member
1 0 0

This worked! Gives them the option to not have to fill out 'How Did You Hear About Us"

 

 

Thanks!!

0 Likes
Highlighted
New Member
1 0 0

We have implemented this code and it forces all customers to make a selection from the drop-down menu (which is great), however, about 20% of our customers are able to checkout without interacting with the drop down at all. Meaning, we do not even see the entry on their invoice as to how they heard about us.

My question is, how are they avoiding the drop down when it is visible on both mobile / desktop on all browsers? 

What could be allowing them to skip the drop down selection?

 

0 Likes
Highlighted
Explorer
54 0 46

Do you have any options that allow the customer to skip the cart page? For example, a cart button at the top of the page with a button to proceed directly to checkout? 

0 Likes
Highlighted
New Member
2 0 0

Hello Liam,

thank you so much for this helpful answer.

I included the code and it shows everything fine but I am missing the text field if the customer selects "other". So first when I select "other" there is no extra text field. If I go back to the website though then it will show later. But since most customers will go strait from the cart to the check out they won't get that field... Can you help here?

FYI: Other is translated in "sonstiges" (German) ;)

This is how my code looks:

{% assign choices = "Google, Instagram, Facebook, Messe, Freunde & Bekannte" %}
{% assign required = true %}

<div class="form-vertical">
  <p>
    <label for="how-did-you-hear-about-us">Wie bist du auf uns aufmerksam geworden?</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 %}>Zutreffendes auswählen</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 %}>Sonstiges</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">Sonstiges:</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>

<script>
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 required %}
  $('[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;
    }
  });
  {% endif %}
});
</script>
0 Likes
Highlighted
New Member
5 0 0

I just tried to implement this everything seems to be working correctly however my most recent order when I implemented the bit to display within the new order notification I see only 'This customer heard about us through' with nothing after.  Does that mean that they did not fill this in?  Does anyone have smart script to display this only if the customer filled out the info?

0 Likes