Ask how customers heard about your store
Caution
Vintage themes aren't available in the Theme Store. Vintage themes don't have the features included in Shopify's Online Store 2.0 themes , and Shopify free vintage themes don't receive updates except security fixes.
Note
This customization is for vintage Shopify themes, and doesn't apply to Online Store 2.0 themes.
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.
Caution
This customization doesn't work for drawer or pop-up cart styles, and will only work for a cart page (at the URL your-store.com/cart
). If you use a cart drawer or pop-up, then you will need to change your cart style to Page in the theme editor . Add a product to the cart in the theme preview, and then click the Cart page tab in the theme editor to view your cart settings.
Desktop
From your Shopify admin, go to Online Store > Themes .
Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code .
In the Snippets directory, click Add a new snippet .
Create the snippet:
Name your snippet hear-about-us
.
Click Create snippet .
In your new hear-about-us.liquid
snippet, paste the following code:
<style>
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us-other--label {
font-weight: bold;
}
select#how-did-you-hear-about-us,
input#how-did-you-hear-about-us-other {
width: 100%;
padding: 8px 10px 8px 10px;
line-height: 1.2;
}
#how-did-you-hear-about-us,
#how-did-you-hear-about-us-other,
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--label,
#how-did-you-hear-about-us-other--error {
display:block;
margin-bottom: 5px;
}
#how-did-you-hear-about-us-other.error,
#how-did-you-hear-about-us.error {
border: 2px solid {{ settings . hau_error_color }} ;
}
#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--error {
color: {{ settings . hau_error_color }} ;
}
</style>
<div class="form-vertical">
<p>
<label id="how-did-you-hear-about-us--label" for="how-did-you-hear-about-us">How did you hear about us?</label>
<span id="how-did-you-hear-about-us--error" style="display:none">{{ settings . hau_error_message }} </span>
<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 = settings . hau_form_options | 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 id="otherFormWrapper" style="{% unless cart . attributes . how-did-you-hear-about-us == 'Other' %} display:none{% endunless %} ">
<label id="how-did-you-hear-about-us-other--label" for="how-did-you-hear-about-us-other">Other</label>
<span id="how-did-you-hear-about-us-other--error" style="display:none">{{ settings . hau_error_message_other }} </span>
<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>
(function() {
document.addEventListener("DOMContentLoaded", initForm);
document.addEventListener("shopify:section:load", initForm);
function initForm(){
var formElement = document.querySelector('#how-did-you-hear-about-us');
var formError = document.querySelector('#how-did-you-hear-about-us--error');
var otherFormElement = document.querySelector('#how-did-you-hear-about-us-other');
var otherFormError = document.querySelector('#how-did-you-hear-about-us-other--error');
var otherFormWrapper = document.querySelector('#otherFormWrapper');
var checkoutButtons = document.querySelectorAll('[name="checkout"], [name="goto_pp"], [name="goto_gc"]');
function showOrHideForm(){
if (formElement.value == 'Other'){
otherFormWrapper.style.display = '';
} else {
otherFormWrapper.style.display = 'none';
}
}
function checkFormElement(){
if (formElement.value.length == 0){
formElement.classList.add('error');
formError.style.display = '';
} else {
if (formElement.classList.contains('error')){
formElement.classList.remove('error');
formError.style.display = 'none';
}
}
}
function checkOtherFormElement(){
if (otherFormElement.value.length == 0){
otherFormElement.classList.add('error');
otherFormError.style.display = '';
} else {
if (otherFormElement.classList.contains('error')){
otherFormElement.classList.remove('error');
otherFormError.style.display = 'none';
}
}
}
otherFormElement.addEventListener("input", function() {
{% if settings . hau_form_validation %}
checkOtherFormElement();
{% endif %}
});
formElement.addEventListener("change", function() {
showOrHideForm();
{% if settings . hau_form_validation %}
checkFormElement();
{% endif %}
});
checkoutButtons.forEach(function(element){
element.addEventListener("click", function(evt) {
{% if settings . hau_form_validation %}
var validated = true;
if (formElement.value.length == 0){
checkFormElement();
validated = false;
}
if (formElement.value == 'Other'){
if (otherFormElement.value.length == 0){
checkOtherFormElement();
validated = false;
}
}
if (!validated) {
evt.preventDefault();
evt.stopPropagation();
}
{% endif %}
});
});
}
})()
</script>
Click Save .
iPhone
From the Shopify app , tap the … button.
In the Sales channels section, tap Online Store .
Tap Manage themes .
Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code .
In the Snippets directory, click Add a new snippet .
Create the snippet:
Name your snippet hear-about-us
.
Click Create snippet .
In your new hear-about-us.liquid
snippet, paste the following code:
<style>
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us-other--label {
font-weight: bold;
}
select#how-did-you-hear-about-us,
input#how-did-you-hear-about-us-other {
width: 100%;
padding: 8px 10px 8px 10px;
line-height: 1.2;
}
#how-did-you-hear-about-us,
#how-did-you-hear-about-us-other,
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--label,
#how-did-you-hear-about-us-other--error {
display:block;
margin-bottom: 5px;
}
#how-did-you-hear-about-us-other.error,
#how-did-you-hear-about-us.error {
border: 2px solid {{ settings . hau_error_color }} ;
}
#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--error {
color: {{ settings . hau_error_color }} ;
}
</style>
<div class="form-vertical">
<p>
<label id="how-did-you-hear-about-us--label" for="how-did-you-hear-about-us">How did you hear about us?</label>
<span id="how-did-you-hear-about-us--error" style="display:none">{{ settings . hau_error_message }} </span>
<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 = settings . hau_form_options | 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 id="otherFormWrapper" style="{% unless cart . attributes . how-did-you-hear-about-us == 'Other' %} display:none{% endunless %} ">
<label id="how-did-you-hear-about-us-other--label" for="how-did-you-hear-about-us-other">Other</label>
<span id="how-did-you-hear-about-us-other--error" style="display:none">{{ settings . hau_error_message_other }} </span>
<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>
(function() {
document.addEventListener("DOMContentLoaded", initForm);
document.addEventListener("shopify:section:load", initForm);
function initForm(){
var formElement = document.querySelector('#how-did-you-hear-about-us');
var formError = document.querySelector('#how-did-you-hear-about-us--error');
var otherFormElement = document.querySelector('#how-did-you-hear-about-us-other');
var otherFormError = document.querySelector('#how-did-you-hear-about-us-other--error');
var otherFormWrapper = document.querySelector('#otherFormWrapper');
var checkoutButtons = document.querySelectorAll('[name="checkout"], [name="goto_pp"], [name="goto_gc"]');
function showOrHideForm(){
if (formElement.value == 'Other'){
otherFormWrapper.style.display = '';
} else {
otherFormWrapper.style.display = 'none';
}
}
function checkFormElement(){
if (formElement.value.length == 0){
formElement.classList.add('error');
formError.style.display = '';
} else {
if (formElement.classList.contains('error')){
formElement.classList.remove('error');
formError.style.display = 'none';
}
}
}
function checkOtherFormElement(){
if (otherFormElement.value.length == 0){
otherFormElement.classList.add('error');
otherFormError.style.display = '';
} else {
if (otherFormElement.classList.contains('error')){
otherFormElement.classList.remove('error');
otherFormError.style.display = 'none';
}
}
}
otherFormElement.addEventListener("input", function() {
{% if settings . hau_form_validation %}
checkOtherFormElement();
{% endif %}
});
formElement.addEventListener("change", function() {
showOrHideForm();
{% if settings . hau_form_validation %}
checkFormElement();
{% endif %}
});
checkoutButtons.forEach(function(element){
element.addEventListener("click", function(evt) {
{% if settings . hau_form_validation %}
var validated = true;
if (formElement.value.length == 0){
checkFormElement();
validated = false;
}
if (formElement.value == 'Other'){
if (otherFormElement.value.length == 0){
checkOtherFormElement();
validated = false;
}
}
if (!validated) {
evt.preventDefault();
evt.stopPropagation();
}
{% endif %}
});
});
}
})()
</script>
Click Save .
Android
From the Shopify app , tap the … button.
In the Sales channels section, tap Online Store .
Tap Manage themes .
Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code .
In the Snippets directory, click Add a new snippet .
Create the snippet:
Name your snippet hear-about-us
.
Click Create snippet .
In your new hear-about-us.liquid
snippet, paste the following code:
<style>
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us-other--label {
font-weight: bold;
}
select#how-did-you-hear-about-us,
input#how-did-you-hear-about-us-other {
width: 100%;
padding: 8px 10px 8px 10px;
line-height: 1.2;
}
#how-did-you-hear-about-us,
#how-did-you-hear-about-us-other,
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--label,
#how-did-you-hear-about-us-other--error {
display:block;
margin-bottom: 5px;
}
#how-did-you-hear-about-us-other.error,
#how-did-you-hear-about-us.error {
border: 2px solid {{ settings . hau_error_color }} ;
}
#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--error {
color: {{ settings . hau_error_color }} ;
}
</style>
<div class="form-vertical">
<p>
<label id="how-did-you-hear-about-us--label" for="how-did-you-hear-about-us">How did you hear about us?</label>
<span id="how-did-you-hear-about-us--error" style="display:none">{{ settings . hau_error_message }} </span>
<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 = settings . hau_form_options | 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 id="otherFormWrapper" style="{% unless cart . attributes . how-did-you-hear-about-us == 'Other' %} display:none{% endunless %} ">
<label id="how-did-you-hear-about-us-other--label" for="how-did-you-hear-about-us-other">Other</label>
<span id="how-did-you-hear-about-us-other--error" style="display:none">{{ settings . hau_error_message_other }} </span>
<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>
(function() {
document.addEventListener("DOMContentLoaded", initForm);
document.addEventListener("shopify:section:load", initForm);
function initForm(){
var formElement = document.querySelector('#how-did-you-hear-about-us');
var formError = document.querySelector('#how-did-you-hear-about-us--error');
var otherFormElement = document.querySelector('#how-did-you-hear-about-us-other');
var otherFormError = document.querySelector('#how-did-you-hear-about-us-other--error');
var otherFormWrapper = document.querySelector('#otherFormWrapper');
var checkoutButtons = document.querySelectorAll('[name="checkout"], [name="goto_pp"], [name="goto_gc"]');
function showOrHideForm(){
if (formElement.value == 'Other'){
otherFormWrapper.style.display = '';
} else {
otherFormWrapper.style.display = 'none';
}
}
function checkFormElement(){
if (formElement.value.length == 0){
formElement.classList.add('error');
formError.style.display = '';
} else {
if (formElement.classList.contains('error')){
formElement.classList.remove('error');
formError.style.display = 'none';
}
}
}
function checkOtherFormElement(){
if (otherFormElement.value.length == 0){
otherFormElement.classList.add('error');
otherFormError.style.display = '';
} else {
if (otherFormElement.classList.contains('error')){
otherFormElement.classList.remove('error');
otherFormError.style.display = 'none';
}
}
}
otherFormElement.addEventListener("input", function() {
{% if settings . hau_form_validation %}
checkOtherFormElement();
{% endif %}
});
formElement.addEventListener("change", function() {
showOrHideForm();
{% if settings . hau_form_validation %}
checkFormElement();
{% endif %}
});
checkoutButtons.forEach(function(element){
element.addEventListener("click", function(evt) {
{% if settings . hau_form_validation %}
var validated = true;
if (formElement.value.length == 0){
checkFormElement();
validated = false;
}
if (formElement.value == 'Other'){
if (otherFormElement.value.length == 0){
checkOtherFormElement();
validated = false;
}
}
if (!validated) {
evt.preventDefault();
evt.stopPropagation();
}
{% endif %}
});
});
}
})()
</script>
Click Save .
Include the snippet in your cart page To include the How did you hear about us? snippet in your cart page:
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.
Find the closing </form>
tag in the code. On a new line above the closing </form>
tag, paste the following code:
{% render 'hear-about-us' %}
Click Save .
Add theme settings for configuration
In the Config directory, click settings_schema.json
.
Find the first closing curly bracket },
in the code. On a new line below the closing curly bracket },
, paste the following code:
{
"name" : "Hear About Us" ,
"settings" : [
{
"type" : "text" ,
"id" : "hau_form_options" ,
"label" : "Form options" ,
"default" : "Facebook, Twitter, Google, Instagram, Youtube" ,
"info" : "Separate each option with a comma"
},
{
"type" : "header" ,
"content" : "Form validation"
},
{
"type" : "checkbox" ,
"id" : "hau_form_validation" ,
"label" : "Enable form validation" ,
"default" : true
},
{
"type" : "text" ,
"id" : "hau_error_message" ,
"label" : "Error message" ,
"info" : "The error message that is displayed when no selection is made" ,
"default" : "Please select an option below"
},
{
"type" : "text" ,
"id" : "hau_error_message_other" ,
"label" : "Other field error message" ,
"info" : "The error message that is displayed when there is no input in the 'Other' field" ,
"default" : "Please fill the text field below"
},
{
"type" : "header" ,
"content" : "Error styling"
},
{
"type" : "color" ,
"id" : "hau_error_color" ,
"label" : "Color" ,
"default" : "#ff0000"
}
]
} ,
Click Save .
To prevent customers from proceeding to the checkout without selecting an option in the How did you hear about us? form field, you can make the field required.
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.
Find the following novalidate
attribute in the cart form code:
novalidate
Replace the novalidate
attribute with the following code:
{% unless settings . hau_form_validation %} novalidate{% endunless %}
Click Save .
In the theme editor , click Theme settings on the sidebar.
Click the Hear About Us tab.
Under Form Validation , make sure the Enable form validation setting is enabled.
Note
You can customise the error messages displayed by modifying the Error message and Other field error message text field settings. You can also customise the error color by changing the Color setting under Error Styling .
Set your options To customize the options in the How did you hear about us? drop-down menu, you can edit the options using the theme settings within the theme editor .
In the theme editor , click Theme settings .
Click the Hear About Us tab.
Under Form options , add or remove options, separated by commas.
Click Save .
Note
Do not include the option Other , as it will be added in automatically.
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:
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:
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 %} .
Click Save .