shopify创建您如何了解我们的商店？表单字段步骤的核心内容

如果您使用它，询问客户了解您商店的方式Shopify 免费模板，您可以联系 Shopify 支持团队获得本教程的帮助。本教程设计时间为 15 分钟。详情请参考Support for

shopify创建你是如何了解我们商店的？表单字段步骤正文

询问客户了解您商店的方式

备注

如果您使用Shopify 免费模板，您可以联系 Shopify 支持团队获得本教程的帮助。本教程设计时间为 15 分钟。详情请参考Support for themes。

备注

本定义用于复古 Shopify 模板不适用于 模板Online Store 2.0”模板。

找到你的模板架构版本

探索“Online Store 2.0自定义模板

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

注意

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

创建表单字段，你如何了解我们的商店？

如果你想创建你对我们商店了解多少？请执行以下操作：

PC：

在 Shopify 后台，转到网店>模板。

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

在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:8px10px8px10px;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:2pxsolid{{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><labelid="how-did-you-hear-about-us--label"for="how-did-you-hear-about-us">Howdidyouhearaboutus?</label><spanid="how-did-you-hear-about-us--error"style="display:none">{{settings.hau_error_message}}</span><selectid="how-did-you-hear-about-us"name="attributes[how-did-you-hear-about-us]"><optionvalue=""{%ifcart.attributes.how-did-you-hear-about-us==""%}selected{%endif%}>Pleasemakeaselection</option>{%assignoptionsArray=settings.hau_form_options|split:','%}{%foroinoptionsArray%}{%assignoption=o |strip%}<optionvalue="{{option}}"{%ifcart.attributes.how-did-you-hear-about-us==option%}selected{%endif%}>{{option}}</option>{%endfor%}<optionvalue="Other"{%ifcart.attributes.how-did-you-hear-about-us=="Other"%}selected{%endif%}>Other</option></select></p><pid="otherFormWrapper"style="{%unlesscart.attributes.how-did-you-hear-about-us=='Other'%}display:none{%endunless%}"><labelid="how-did-you-hear-about-us-other--label"for="how-did-you-hear-about-us-other">Other</label><spanid="how-did-you-hear-about-us-other--error"style="display:none">{{settings.hau_error_message_other}}</span><inputid="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);functioninitForm(){varformElement=document.querySelector('#how-did-you-hear-about-us');varformError=document.querySelector('#how-did-you-hear-about-us--error');varotherFormElement=document.querySelector('#how-did-you-hear-about-us-other');varotherFormError=document.querySelector('#how-did-you-hear-about-us-other--error');varotherFormWrapper=document.querySelector('#otherFormWrapper');varcheckoutButtons=document.querySelectorAll('[name="checkout"],[name="goto_pp"],[name="goto_gc"]');functionshowOrHideForm(){if(formElement.value=='Other'){otherFormWrapper.style.display='';}else{otherFormWrapper.style.display='none';}}functioncheckFormElement(){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';}}}functioncheckOtherFormElement(){if(otherFormElemen t.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(){{%ifsettings.hau_form_validation%}checkOtherFormElement();{%endif%}});formElement.addEventListener("change",function(){showOrHideForm();{%ifsettings.hau_form_validation%}checkFormElement();{%endif%}});checkoutButtons.forEach(function(element){element.addEventListener("click",function(evt){{%ifsettings.hau_form_validation%}varvalidated=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 afree 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 toSupport 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 aHow 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 URLyour-store.com/cart). If you use a cart drawer or pop-up,then you will need to change your cart style toPagein thetheme editor. Add a product to the cart in the theme preview,and then click theCart pagetab in the theme editor to view your cart settings.

Create the 'How did you hear about us?' form field

To create theHow did you hear about us?form field:

PC：

From your Shopify admin,go toOnline Store>Themes.

Find the theme you want to edit,and then clickActions>Edit code.

In theSnippetsdirectory,clickAdd a new snippet.

Create the snippet:

Name your snippethear-about-us.

ClickCreate snippet.

iPhone：

From theShopify app,tapStore.

In theSales channelssection,tapOnline Store.

TapManage themes.

Find the theme you want to edit,and then clickActions>Edit code.

In theSnippetsdirectory,clickAdd a new snippet.

Create the snippet:

Name your snippethear-about-us.

ClickCreate snippet.

Android：

From theShopify app,tapStore.

In theSales channelssection,tapOnline Store.

TapManage themes.

Find the theme you want to edit,and then clickActions>Edit code.

In theSnippetsdirectory,clickAdd a new snippet.

Create the snippet:

Name your snippethear-about-us.

ClickCreate snippet.

In your newhear-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:8px10px8px10px;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:2pxsolid{{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><labelid="how-did-you-hear-about-us--label"for="how-did-you-hear-about-us">Howdidyouhearaboutus?</label><spanid="how-did-you-hear-about-us--error"style="display:none">{{settings.hau_error_message}}</span><selectid="how-did-you-hear-about-us"name="attributes[how-did-you-hear-about-us]"><optionvalue=""{%ifcart.attributes.how-did-you-hear-about-us==""%}selected{%endif%}>Pleasemakeaselection</option>{%assignoptionsArray=settings.hau_form_options|split:','%}{%foroinoptionsArray%}{%assignoption=o |strip%}<optionvalue="{{option}}"{%ifcart.attributes.how-did-you-hear-about-us ==option%}selected{%endif%}>{{option}}</option>{%endfor%}<optionvalue="Other"{%ifcart.attributes.how-did-you-hear-about-us=="Other"%}selected{%endif%}>Other</option></select></p><pid="otherFormWrapper"style="{%unlesscart.attributes.how-did-you-hear-about-us=='Other'%}display:none{%endunless%}"><labelid="how-did-you-hear-about-us-other--label"for="how-did-you-hear-about-us-other">Other</label><spanid="how-did-you-hear-about-us-other--error"style="display:none">{{settings.hau_error_message_other}}</span><inputid="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);functioninitForm(){varformElement=document.querySelector('#how-did-you-hear-about-us');varformError=document.querySelector('#how-did-you-hear-about-us--error');varotherFormElement=document.querySelector('#how-did-you-hear-about-us-other');varotherFormError=document.querySelector('#how-did-you-hear-about-us-other--error');varotherFormWrapper=document.querySelector('#otherFormWrapper');varcheckoutButtons=document.querySelectorAll('[name="checkout"],[name="goto_pp"],[name="goto_gc"]');functionshowOrHideForm(){if(formElement.value=='Other'){otherFormWrapper.style.display='';}else{otherFormWrapper.style.display='none';}}functioncheckFormElement(){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';}}}functioncheckOtherFormElement(){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(){{%ifsettings.hau_form_validation%}checkOtherFormElement();{%endif%}});formElement.addEventListener("change",function(){showOrHideForm();{%ifsettings.hau_form_validation%}checkFormElement();{%endif%}});checkoutButtons.forEach(function(element){element.addEventListener("click",function(evt){{%ifsettings.hau_form_validation%}varvalidated=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>

ClickSave.

文章内容来源：Shopify官家官网