询问客户了解您商店的途径备注如果您使用Shopify 的免费模板，您可以联系 Shopify 支持团队获得关于此教程的帮助。此教程需要 15 分钟的设计时间。若要了解详情，请参阅Support for

目录

• 答案
• 文章目录
• shopify创建“您是如何了解到我们商店的？”表单字段步骤详细回答

shopify创建“您是如何了解到我们商店的？”表单字段步骤详细回答

询问客户了解您商店的途径

备注

如果您使用 Shopify 的免费模板，您可以联系 Shopify 支持团队获得关于此教程的帮助。此教程需要 15 分钟的设计时间。若要了解详情，请参阅 Support for themes。

备注

此自定义用于复古 Shopify 模板，不适用于“Online Store 2.0”模板。

• 找到您的模板架构版本

• 探索“Online Store 2.0”模板自定义

您可以通过向购物车页面添加您是如何了解到我们商店的？表单字段来询问客户了解您商店的途径。

注意

此自定义设置不适用于抽屉式或弹出式购物车，仅适用于购物车页面（位于 URL your-store.com/cart）。如果您使用购物车抽屉或弹出式购物车，您将需要在模板编辑器中将您的购物车样式更改为购物车页面。在模板预览中向购物车中添加产品，然后点击模板编辑器中的购物车页面选项卡，以查看您的购物车设置。

创建“您是如何了解到我们商店的？”表单字段

若要创建您是如何了解到我们商店的？表单字段，请执行以下操作：

PC：

1. 在 Shopify 后台中，转到在线商店 > 模板。

2. 找到要编辑的模板，然后点击操作 > 编辑代码。

1. 在 Snippets 目录中点击添加新片段。

2. 创建代码片段：

1. 将代码片段命名为 hear-about-us。

2. 点击创建片段。

苹果系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，然后点击操作 > 编辑代码。

1. 在 Snippets 目录中点击添加新片段。

2. 创建代码片段：

1. 将代码片段命名为 hear-about-us。

2. 点击创建片段。

安卓系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，然后点击操作 > 编辑代码。

1. 在 Snippets 目录中点击添加新片段。

2. 创建代码片段：

1. 将代码片段命名为 hear-about-us。

2. 点击创建片段。

1. 在新的 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' %}

1. 点击保存。

Shopify商户官网原文详情：

Ask how customers heard about your store

Note

If you use a free theme from Shopify, then you might be able to contact Shopify Support for help with this tutorial. It requires 15 minutes of design time. To learn more, refer to Support for themes.

Note

This customization is for vintage Shopify themes, and doesn't apply to Online Store 2.0 themes.

• Find out your theme's architecture version

• Explore Online Store 2.0 theme customizations

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：

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Snippets directory, click Add a new snippet.

2. Create the snippet:

1. Name your snippet hear-about-us.

2. Click Create snippet.

iPhone：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Snippets directory, click Add a new snippet.

2. Create the snippet:

1. Name your snippet hear-about-us.

2. Click Create snippet.

Android：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Snippets directory, click Add a new snippet.

2. Create the snippet:

1. Name your snippet hear-about-us.

2. Click Create snippet.

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

2. Click Save.

文章内容来源：Shopify商户官方网站