Every year, eCommerce companies spend so much on marketing and, in many cases, cannot tell which of their marketing campaigns is converting into customers. A great way to track conversions on your Shopify store is by adding a “How did you hear about us” form field to your store. Using this button, you can now learn which of your ad strategies is bringing in new customers, giving you an idea of what marketing plan to put more money into.
Using the “How did you hear about us” form field, customers can now select from any of the options how they happened on your store. You can include different options, including social media channels, Google and referrals.
In this liquid tutorial, we have compiled a detailed guide on how to add the “How did you hear about us” form field to your Shopify store using code.
Create the 'How did you hear about us?' form field
To create the How did you hear about us? form field:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > 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.
Make the form field required
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.
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.
Adding the “How did you hear about us” form field to your Shopify store makes it a lot easier for you to track your marketing campaigns and conversions. This means that you can now tell which of your campaigns is bringing in more customers and you can focus on it.
Note
This customization will not 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.
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.
