詢問顧客如何得知您的商店

注意

Shopify Theme Store 不提供舊版佈景主題。這些主題不含 Shopify Online Store 2.0 佈景主題的功能，且 Shopify 免費的舊版佈景主題只能接收安全性修復的相關更新。

備註

如果您用的是 Shopify 的免費佈景主題，則可以聯絡 Shopify 支援服務協助您瞭解此教學課程。需要 15 分鐘的設計時間。深入瞭解 Shopify 設計政策。

備註

此自訂內容僅適用於舊版 Shopify 佈景主題，且不適用於 Online Store 2.0 佈景主題。

• 瞭解您佈景主題的架構版本
• 探索 Online Store 2.0 佈景主題的自訂內容

您可以將「您從何種管道得知我們的商店？」表單欄位新增至購物車頁面，以詢問顧客從哪裡聽說您的商店。

注意

此自訂程序不適用於導覽匣式或彈出式購物車樣式，且僅適用於購物車頁面 (網址為 your-store.com/cart)。若您使用購物車導覽匣或彈出式視窗，則必須在佈景主題編輯器中，將購物車樣式變更為「頁面」。在佈景主題預覽中，將商品新增至購物車，然後在佈景主題編輯器中點擊「購物車頁面」分頁，便能檢視您的購物車設定。

建立「您從何種管道得知我們的商店？」表單欄位

電腦版

1. 在 Shopify 管理介面中，前往「網路商店」>「佈景主題」。

2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

3. 在**「程式碼片段」目錄中，按一下「新增程式碼片段」**。

4. 建立程式碼片段：

   1. 將程式碼片段命名為 hear-about-us。
   2. 按一下**「建立程式碼片段」**。

5. 在新的程式碼片段 hear-about-us.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 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(&#x22;DOMContentLoaded&#x22;, initForm);
document.addEventListener(&#x22;shopify:section:load&#x22;, initForm);

function initForm(){

var formElement = document.querySelector(&#x27;#how-did-you-hear-about-us&#x27;);
var formError = document.querySelector(&#x27;#how-did-you-hear-about-us--error&#x27;);
var otherFormElement = document.querySelector(&#x27;#how-did-you-hear-about-us-other&#x27;);
var otherFormError = document.querySelector(&#x27;#how-did-you-hear-about-us-other--error&#x27;);
var otherFormWrapper = document.querySelector(&#x27;#otherFormWrapper&#x27;);
var checkoutButtons = document.querySelectorAll(&#x27;[name=&#x22;checkout&#x22;], [name=&#x22;goto_pp&#x22;], [name=&#x22;goto_gc&#x22;]&#x27;);

function showOrHideForm(){
    if (formElement.value == &#x27;Other&#x27;){
    otherFormWrapper.style.display = &#x27;&#x27;;
    } else {
    otherFormWrapper.style.display = &#x27;none&#x27;;
    }
}

function checkFormElement(){
    if (formElement.value.length == 0){
    formElement.classList.add(&#x27;error&#x27;);
    formError.style.display = &#x27;&#x27;;
    } else {
    if (formElement.classList.contains(&#x27;error&#x27;)){
        formElement.classList.remove(&#x27;error&#x27;);
        formError.style.display = &#x27;none&#x27;;
    }
    }
}

function checkOtherFormElement(){
    if (otherFormElement.value.length == 0){
    otherFormElement.classList.add(&#x27;error&#x27;);
    otherFormError.style.display = &#x27;&#x27;;
    } else {
    if (otherFormElement.classList.contains(&#x27;error&#x27;)){
        otherFormElement.classList.remove(&#x27;error&#x27;);
        otherFormError.style.display = &#x27;none&#x27;;
    }
    }
}

otherFormElement.addEventListener(&#x22;input&#x22;, function() {
    {% if settings.hau_form_validation %}
    checkOtherFormElement();
    {% endif %}
});

formElement.addEventListener(&#x22;change&#x22;, function() {
    showOrHideForm();
    {% if settings.hau_form_validation %}
    checkFormElement();
    {% endif %}
});

checkoutButtons.forEach(function(element){
    element.addEventListener(&#x22;click&#x22;, function(evt) {

    {% if settings.hau_form_validation %}
    var validated = true;
    if (formElement.value.length == 0){
        checkFormElement();
        validated = false;
    }
    if (formElement.value == &#x27;Other&#x27;){
        if (otherFormElement.value.length == 0){
        checkOtherFormElement();
        validated = false;
        }
    }
    if (!validated) {
        evt.preventDefault();
        evt.stopPropagation();
    }
    {% endif %}
    });
});

}
})()
</script>

1. 按一下「儲存」。

iPhone

1. 在 Shopify 應用程式中，點選「…」按鈕。

2. 在「銷售管道」區段中，點選「網路商店」。

3. 點一下**「管理佈景主題」**。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

5. 在**「程式碼片段」目錄中，按一下「新增程式碼片段」**。

6. 建立程式碼片段：

   1. 將程式碼片段命名為 hear-about-us。
   2. 按一下**「建立程式碼片段」**。

7. 在新的程式碼片段 hear-about-us.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 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(&#x22;DOMContentLoaded&#x22;, initForm);
document.addEventListener(&#x22;shopify:section:load&#x22;, initForm);

function initForm(){

var formElement = document.querySelector(&#x27;#how-did-you-hear-about-us&#x27;);
var formError = document.querySelector(&#x27;#how-did-you-hear-about-us--error&#x27;);
var otherFormElement = document.querySelector(&#x27;#how-did-you-hear-about-us-other&#x27;);
var otherFormError = document.querySelector(&#x27;#how-did-you-hear-about-us-other--error&#x27;);
var otherFormWrapper = document.querySelector(&#x27;#otherFormWrapper&#x27;);
var checkoutButtons = document.querySelectorAll(&#x27;[name=&#x22;checkout&#x22;], [name=&#x22;goto_pp&#x22;], [name=&#x22;goto_gc&#x22;]&#x27;);

function showOrHideForm(){
    if (formElement.value == &#x27;Other&#x27;){
    otherFormWrapper.style.display = &#x27;&#x27;;
    } else {
    otherFormWrapper.style.display = &#x27;none&#x27;;
    }
}

function checkFormElement(){
    if (formElement.value.length == 0){
    formElement.classList.add(&#x27;error&#x27;);
    formError.style.display = &#x27;&#x27;;
    } else {
    if (formElement.classList.contains(&#x27;error&#x27;)){
        formElement.classList.remove(&#x27;error&#x27;);
        formError.style.display = &#x27;none&#x27;;
    }
    }
}

function checkOtherFormElement(){
    if (otherFormElement.value.length == 0){
    otherFormElement.classList.add(&#x27;error&#x27;);
    otherFormError.style.display = &#x27;&#x27;;
    } else {
    if (otherFormElement.classList.contains(&#x27;error&#x27;)){
        otherFormElement.classList.remove(&#x27;error&#x27;);
        otherFormError.style.display = &#x27;none&#x27;;
    }
    }
}

otherFormElement.addEventListener(&#x22;input&#x22;, function() {
    {% if settings.hau_form_validation %}
    checkOtherFormElement();
    {% endif %}
});

formElement.addEventListener(&#x22;change&#x22;, function() {
    showOrHideForm();
    {% if settings.hau_form_validation %}
    checkFormElement();
    {% endif %}
});

checkoutButtons.forEach(function(element){
    element.addEventListener(&#x22;click&#x22;, function(evt) {

    {% if settings.hau_form_validation %}
    var validated = true;
    if (formElement.value.length == 0){
        checkFormElement();
        validated = false;
    }
    if (formElement.value == &#x27;Other&#x27;){
        if (otherFormElement.value.length == 0){
        checkOtherFormElement();
        validated = false;
        }
    }
    if (!validated) {
        evt.preventDefault();
        evt.stopPropagation();
    }
    {% endif %}
    });
});

}
})()
</script>

1. 按一下「儲存」。

Android

1. 在 Shopify 應用程式中，點選「…」按鈕。

2. 在「銷售管道」區段中，點選「網路商店」。

3. 點一下**「管理佈景主題」**。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

5. 在**「程式碼片段」目錄中，按一下「新增程式碼片段」**。

6. 建立程式碼片段：

   1. 將程式碼片段命名為 hear-about-us。
   2. 按一下**「建立程式碼片段」**。

7. 在新的程式碼片段 hear-about-us.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 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(&#x22;DOMContentLoaded&#x22;, initForm);
document.addEventListener(&#x22;shopify:section:load&#x22;, initForm);

function initForm(){

var formElement = document.querySelector(&#x27;#how-did-you-hear-about-us&#x27;);
var formError = document.querySelector(&#x27;#how-did-you-hear-about-us--error&#x27;);
var otherFormElement = document.querySelector(&#x27;#how-did-you-hear-about-us-other&#x27;);
var otherFormError = document.querySelector(&#x27;#how-did-you-hear-about-us-other--error&#x27;);
var otherFormWrapper = document.querySelector(&#x27;#otherFormWrapper&#x27;);
var checkoutButtons = document.querySelectorAll(&#x27;[name=&#x22;checkout&#x22;], [name=&#x22;goto_pp&#x22;], [name=&#x22;goto_gc&#x22;]&#x27;);

function showOrHideForm(){
    if (formElement.value == &#x27;Other&#x27;){
    otherFormWrapper.style.display = &#x27;&#x27;;
    } else {
    otherFormWrapper.style.display = &#x27;none&#x27;;
    }
}

function checkFormElement(){
    if (formElement.value.length == 0){
    formElement.classList.add(&#x27;error&#x27;);
    formError.style.display = &#x27;&#x27;;
    } else {
    if (formElement.classList.contains(&#x27;error&#x27;)){
        formElement.classList.remove(&#x27;error&#x27;);
        formError.style.display = &#x27;none&#x27;;
    }
    }
}

function checkOtherFormElement(){
    if (otherFormElement.value.length == 0){
    otherFormElement.classList.add(&#x27;error&#x27;);
    otherFormError.style.display = &#x27;&#x27;;
    } else {
    if (otherFormElement.classList.contains(&#x27;error&#x27;)){
        otherFormElement.classList.remove(&#x27;error&#x27;);
        otherFormError.style.display = &#x27;none&#x27;;
    }
    }
}

otherFormElement.addEventListener(&#x22;input&#x22;, function() {
    {% if settings.hau_form_validation %}
    checkOtherFormElement();
    {% endif %}
});

formElement.addEventListener(&#x22;change&#x22;, function() {
    showOrHideForm();
    {% if settings.hau_form_validation %}
    checkFormElement();
    {% endif %}
});

checkoutButtons.forEach(function(element){
    element.addEventListener(&#x22;click&#x22;, function(evt) {

    {% if settings.hau_form_validation %}
    var validated = true;
    if (formElement.value.length == 0){
        checkFormElement();
        validated = false;
    }
    if (formElement.value == &#x27;Other&#x27;){
        if (otherFormElement.value.length == 0){
        checkOtherFormElement();
        validated = false;
        }
    }
    if (!validated) {
        evt.preventDefault();
        evt.stopPropagation();
    }
    {% endif %}
    });
});

}
})()
</script>

1. 按一下「儲存」。

在購物車頁面中包含程式碼片段

若要在您的購物車頁面中加入**「您從何種管道得知我們的商店？」**程式碼片段：

1. 在「區段」目錄中，點擊「cart-template.liquid」。如果您的佈景主題不包含「cart-template.liquid」，則可以在「範本」目錄中，點擊「cart.liquid」。

2. 找到程式碼中的結束標籤 </form>。在結束標籤 </form> 上方新的一行，貼上下列程式碼：

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

1. 按一下「儲存」。

為配置設定新增佈景主題設定

1. 在組態目錄中，點擊「settings_schema.json」。

2. 在程式碼中尋找第一個右大括號「},」。在右大括號「},」下方新的一行貼上以下程式碼：

{
"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"
    }
]
},

1. 按一下「儲存」。

將表單欄位設為必填

若您想避免顧客未在**「您從何種管道得知我們的商店？」**表單欄位中選取選項就進入結帳頁面，可以將該欄位設為必填。

1. 在「區段」目錄中，點擊「cart-template.liquid」。如果您的佈景主題不包含「cart-template.liquid」，則可以在「範本」目錄中，點擊「cart.liquid」。

2. 在購物車表單程式碼中尋找下列「novalidate」屬性：

novalidate

1. 用以下程式碼取代「novalidate」屬性：

{% unless settings.hau_form_validation %}novalidate{% endunless %}

1. 按一下「儲存」。

2. 在佈景主題編輯器中，點擊側邊欄的**「佈景主題設定」**。

3. 點擊**「得知我們的商店」**分頁。

4. 在**「表單驗證」下，確認已啟用「啟用表單驗證」**設定。

備註：您可以修改**「錯誤訊息」和「其他欄位錯誤訊息」的文字欄位設定，藉此自訂畫面顯示的錯誤訊息。您也可以變更「錯誤樣式」的「顏色」**設定，以自訂錯誤訊息的顏色。

設定您的選項

如果您要自訂**「您從何種管道得知我們的商店？」**下拉式選單中的選項，可以使用佈景主題編輯器中的佈景主題設定來編輯選項。

1. 在佈景主題編輯器中，點擊**「佈景主題設定」**。

2. 點擊**「得知我們的商店」**分頁。

3. 在**「表單選項」**下新增或移除選項，並以逗號分隔各選項。

4. 按一下「儲存」。

備註：請勿加入**「其他」**選項，因為系統會自動新增此選項。

常見問題

我可以在何處查看擷取的資料？

您可以在管理介面找到訂單，然後從訂單的**「其他詳細資訊」**區段中看到答案：

如果顧客在選項清單中找不到答案，可自行輸入內容嗎？

可以。如果顧客選取**「其他」**，在下拉式選單的下方會出現一個可供輸入答案的文字方塊

我可以在新訂單通知電子郵件中顯示答案嗎？

可以。若要在新訂單通知電子郵件中顯示顧客回應內容，請執行以下操作：

1. 前往管理介面中的「通知」頁面，並在**「新訂單」**電子郵件範本新增以下程式碼：

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

1. 按一下「儲存」。