shopify建设“您是怎样相识到我们市肆的？？？ ？ ？？？？”表单字段办法
询问客户相识您市肆的途径
备注
若是您使用 Shopify 的免费模板，，， ，，您可以联系 Shopify 支持团队获得关于此教程的资助。。。。。此教程需要 15 分钟的设计时间。。。。。若要相识详情，，， ，，请参阅 Support for themes。。。。。
备注
此自界说用于复古 Shopify 模板，，， ，，不适用于“Online Store 2.0”模板。。。。。
找到您的模板架构版本
探索“Online Store 2.0”模板自界说
您可以通过向购物车页面添加您是怎样相识到我们市肆的？？？ ？ ？？？？表单字段来询问客户相识您市肆的途径。。。。。
注重
此自界说设置不适用于抽屉式或弹出式购物车，，， ，，仅适用于购物车页面（位于 URL your-store.com/cart）。。。。。若是您使用购物车抽屉或弹出式购物车，，， ，，您将需要在模板编辑器中将您的购物车样式更改为购物车页面。。。。。在模板预览中向购物车中添加产品，，， ，，然后点击模板编辑器中的购物车页面选项卡，，， ，，以审查您的购物车设置。。。。。
建设“您是怎样相识到我们市肆的？？？ ？ ？？？？”表单字段
若要建设您是怎样相识到我们市肆的？？？ ？ ？？？？表单字段，，， ，，请执行以下操作：
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
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：
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商户官方网站