询问客户了解您商店的途径
您可以通过向购物车页面添加您是如何了解到我们商店的？表单字段来询问客户了解您商店的途径。
创建“您是如何了解到我们商店的？”表单字段
若要创建您是如何了解到我们商店的？表单字段，请执行以下操作：
PC：
在 Snippets 目录中点击添加新片段。
创建代码片段：
将代码片段命名为
hear-about-us。点击创建片段。
苹果系统：
在 Shopify 应用中，轻触商店。
在销售渠道部分中，轻触在线商店。
轻触 Manage themes（管理模板）。
找到要编辑的模板，然后点击操作 > 编辑代码。
在 Snippets 目录中点击添加新片段。
创建代码片段：
将代码片段命名为
hear-about-us。点击创建片段。
安卓系统：
在 Shopify 应用中，轻触商店。
在销售渠道部分中，轻触在线商店。
轻触 Manage themes（管理模板）。
找到要编辑的模板，然后点击操作 > 编辑代码。
在 Snippets 目录中点击添加新片段。
创建代码片段：
将代码片段命名为
hear-about-us。点击创建片段。
在新的
hear-about-us.liquid代码片段中，粘贴以下代码：
```liquid <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> <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>1. 点击**保存**。 ## 在购物车页面中包含代码片段 若要在购物车页面中包含**您是如何了解到我们商店的？**代码片段，请执行以下操作： 1. 在 **Sections** 目录中，点击 `cart-template.liquid`。如果您的模板中不包含 `cart-template.liquid`，请点击 **Templates** 目录中的 `cart.liquid`。 2. [查找](/manual/shopify-admin/productivity-tools/keyboard-shortcuts#find)代码中的结束 `</form>` 标记。在结束 `</form>` 标记上方的新行中，粘贴以下代码： ```liquid {% render 'hear-about-us' %}点击保存。
Shopify商户官网原文详情：
Ask how customers 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.
Caution
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.Create the 'How did you hear about us?' form field
To create the How did you hear about us? form field:
PC：
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.
iPhone：
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage 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.
Android：
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage 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.liquidsnippet, 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> <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.
文章内容来源：Shopify商户官方网站
（本文内容根据网络资料整理，出于传递更多信息之目的，不代表连连国际赞同其观点和立场）
