Tìm hiểu xem vì sao khách hàng biết về cửa hàng
Trang này được in vào Mar 29, 2024. Để lấy phiên bản hiện tại, vui lòng truy cập https://help.shopify.com/vi/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/ask-how-customers-heard-about-your-store.
Cẩn trọng
Chủ đề cổ điển không có trong Cửa hàng chủ đề. Những chủ đề này không có các tính năng thuộc Chủ đề Online Store 2.0 của Shopify, và chủ đề Cổ điển miễn phí của Shopify sẽ không nhận được bản cập nhật ngoài bản sửa lỗi bảo mật.
Bạn có thể hỏi vì sao khách hàng biết về cửa hàng bằng cách thêm trường biểu mẫu Bạn biết về chúng tôi nhờ đâu? vào trang giỏ hàng.
Cẩn trọng
Nội dung tùy chỉnh này không áp dụng cho giỏ hàng kiểu ngăn hoặc cửa sổ bật lên và chỉ áp dụng cho một trang giỏ hàng (tại URL your-store.com/cart
). Nếu bạn dùng ngăn giỏ hàng hoặc cửa sổ bật lên, bạn cần thay đổi kiểu giỏ hàng sang Trang trong trình biên tập chủ đề . Thêm một sản phẩm vào giỏ hàng trong chế độ xem trước chủ đề, sau đó nhấp vào tab Trang giỏ hàng trong trình biên tập chủ đề để xem cài đặt giỏ hàng.
Tạo trường biểu mẫu "Bạn biết về chúng tôi nhờ đâu?"
Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề .
Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã .
Trong thư mục Đoạn mã , nhấp vào Thêm đoạn mã mới .
Tạo đoạn mã:
Đặt tên cho đoạn mã hear-about-us
của bạn.
Nhấp vào Create snippet (Tạo đoạn mã).
Dán mã sau vào đoạn mã mới hear-about-us.liquid
của bạn:
<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 class="form-vertical">
<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>
Nhấp vào Save (Lưu).
Trong ứng dụng Shopify , chạm vào nút … .
Trong phần Kênh bán hàng , chạm vào Cửa hàng trực tuyến .
Nhấn vào Manage themes (Quản lý chủ đề).
Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã .
Trong thư mục Đoạn mã , nhấp vào Thêm đoạn mã mới .
Tạo đoạn mã:
Đặt tên cho đoạn mã hear-about-us
của bạn.
Nhấp vào Create snippet (Tạo đoạn mã).
Dán mã sau vào đoạn mã mới hear-about-us.liquid
của bạn:
<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 class="form-vertical">
<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>
Nhấp vào Save (Lưu).
Trong ứng dụng Shopify , chạm vào nút … .
Trong phần Kênh bán hàng , chạm vào Cửa hàng trực tuyến .
Nhấn vào Manage themes (Quản lý chủ đề).
Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã .
Trong thư mục Đoạn mã , nhấp vào Thêm đoạn mã mới .
Tạo đoạn mã:
Đặt tên cho đoạn mã hear-about-us
của bạn.
Nhấp vào Create snippet (Tạo đoạn mã).
Dán mã sau vào đoạn mã mới hear-about-us.liquid
của bạn:
<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 class="form-vertical">
<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>
Nhấp vào Save (Lưu).
Thêm đoạn mã vào trang giỏ hàng Để thêm đoạn mã Bạn biết đến chúng tôi qua đâu? vào trang giỏ hàng:
Trong thư mục Mục , nhấp vào cart-template.liquid
. Nếu chủ đề của bạn không có cart-template.liquid
, hãy nhấp vào cart.liquid
trong thư mục Mẫu .
Tìm thẻ có kết thúc là </form>
trong mã. Dán mã sau vào dòng mới nằm phía trên thẻ có kết thúc là </form>
:
{% render 'hear-about-us' %}
Nhấp vào Save (Lưu).
Thêm cài đặt chủ đề cho cấu hình
Trong thư mục Cấu hình , nhấp vào settings_schema.json
.
Tìm dấu ngoặc nhọn đóng đầu tiên },
trong mã. Trên dòng mới bên dưới dấu ngoặc nhọn đóng },
, dán mã sau:
{
"name" : "Hear About Us" ,
"settings" : [
{
"type" : "text" ,
"id" : "hau_form_options" ,
"label" : "Form options" ,
"default" : "Facebook, Twitter, Google, Instagram, Youtube" ,
"info" : "Separate each option with a comma"
},
{
"type" : "header" ,
"content" : "Form validation"
},
{
"type" : "checkbox" ,
"id" : "hau_form_validation" ,
"label" : "Enable form validation" ,
"default" : true
},
{
"type" : "text" ,
"id" : "hau_error_message" ,
"label" : "Error message" ,
"info" : "The error message that is displayed when no selection is made" ,
"default" : "Please select an option below"
},
{
"type" : "text" ,
"id" : "hau_error_message_other" ,
"label" : "Other field error message" ,
"info" : "The error message that is displayed when there is no input in the 'Other' field" ,
"default" : "Please fill the text field below"
},
{
"type" : "header" ,
"content" : "Error styling"
},
{
"type" : "color" ,
"id" : "hau_error_color" ,
"label" : "Color" ,
"default" : "#ff0000"
}
]
} ,
Nhấp vào Save (Lưu).
Đặt trường biểu mẫu thành bắt buộc Để tránh trường hợp khách hàng tiếp tục đến bước thanh toán mà không chọn một tùy chọn trong trường biểu mẫu Bạn biết đến chúng tôi qua đâu? , bạn có thể đặt trường này thành bắt buộc.
Trong thư mục Mục , nhấp vào cart-template.liquid
. Nếu chủ đề của bạn không có cart-template.liquid
, hãy nhấp vào cart.liquid
trong thư mục Mẫu .
Tìm thuộc tính novalidate
sau trong mã biểu mẫu giỏ hàng:
novalidate
Thay thuộc tính novalidate
bằng mã sau:
{% unless settings . hau_form_validation %} novalidate{% endunless %}
Nhấp vào Save (Lưu).
Trong trình biên tập chủ đề , nhấp vào Cài đặt chủ đề trên thanh bên.
Nhấp vào tab Biết đến chúng tôi .
Trong phần Xác thực biểu mẫu , đảm bảo đã bật cài đặt Bật xác thực biểu mẫu .
Lưu ý
Bạn có thể tùy chỉnh thông báo lỗi hiển thị bằng cách sửa đổi các cài đặt trường văn bản Thông báo lỗi và Thông báo lỗi của trường khác . Bạn cũng có thể tùy chỉnh màu lỗi bằng cách thay đổi cài đặt Màu trong Định kiểu lỗi .
Đặt tùy chọn Để tùy chỉnh các tùy chọn trong menu thả xuống Bạn biết đến chúng tôi qua đâu? , bạn có thể chỉnh sửa tùy chọn bằng cài đặt chủ đề trong trình biên tập chủ đề .
Trong trình biên tập chủ đề , nhấp vào Cài đặt chủ đề .
Nhấp vào tab Biết đến chúng tôi .
Trong tùy chọn Biểu mẫu , thêm hoặc xóa tùy chọn và phân tách các tùy chọn bằng dấu phẩy.
Nhấp vào Save (Lưu).
Câu hỏi thường gặp Tôi sẽ nhìn thấy dữ liệu được thu thập ở đâu? Bạn sẽ thấy câu trả lời trong trang quản trị, trong mục Chi tiết bổ sung của đơn hàng:
Nếu tùy chọn được liệt kê không phải là câu trả lời, khách hàng có thể nhập câu trả lời khác không? Có thể. Khi khách hàng chọn mục Khác , một hộp văn bản sẽ xuất hiện bên dưới menu thả xuống để khách nhập câu trả lời.
Tôi có thể hiển thị câu trả lời trong email thông báo về Đơn hàng mới không? Có. Để hiển thị phản hồi của khách hàng trong email thông báo về Đơn hàng mới:
Mở trang Thông báo trong trang quản trị và thêm mã sau vào mẫu email Đơn hàng mới :
This customer heard about us through {% if attributes . how-did-you-hear-about-us-other == blank %}{{ attributes . how-did-you-hear-about-us }}{% else %}{{ attributes . how-did-you-hear-about-us-other }}{% endif %} .
Nhấp vào Save (Lưu).