众所周知,了解客户购买商品的渠道和动机非常重要。通过在购物车页面添加"您是如何了解到我们商店的?"表单字段,商家可以更好地了解客户的购买来源,从而优化营销策略,提升客户体验。本文将为您详细介绍如何在Shopify后台创建此自定义表单。

创建"您是如何了解到我们商店的?"表单字段

1. 登录Shopify管理后台,进入"在线商店"-"模板"页面,找到要编辑的模板,点击"操作"-"编辑代码"。

2. 在"Snippets"目录中,点击"添加新片段",将代码片段命名为"hear-about-us"。

3. 在新创建的"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:

}

#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:

}

#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>

[removed]

(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 %}

});

});

}

})();

[removed]

```

4. 在购物车页面中包含新创建的"hear-about-us"代码片段:

在"Sections"目录中,找到"cart-template.liquid"(如果没有,则找到"cart.liquid")。在结束`</form>`标签上方的新行中,插入以下代码:

```liquid

{% render 'hear-about-us' %}

```

5. 点击保存。

现在您已经在Shopify后台成功添加了"您是如何了解到我们商店的?"表单字段。当客户在结账时填写此表单时,您就可以获得有价值的市场营销信息。

常见问答 FAQs

Q: 如果我使用的是Shopify免费模板,可以获得帮助吗?

A: 是的,您可以联系Shopify支持团队,寻求有关此教程的帮助。但请注意,这需要大约15分钟的设计时间。

Q: 这个自定义适用于哪些类型的Shopify主题?

A: 这个自定义适用于经典的Shopify主题,不适用于"在线商店2.0"主题。

Q: 我如何确定我的主题架构版本?

A: 您可以通过探索"在线商店2.0"主题进行自定义来确定您的主题架构版本。

Q: 这个自定义设置是否适用于购物车抽屉或弹出窗口?

A: 不,这个自定义设置只适用于购物车页面(URL为your-store.com/cart),不适用于购物车抽屉或弹出窗口。如果您使用这些购物车样式,您需要在主题编辑器中将购物车样式更改为"页面"。