เข้าสู่ระบบ
เริ่มทดลองใช้งานฟรี

สอบถามว่าลูกค้ารู้จักร้านค้าของคุณได้อย่างไร

คุณสามารถสอบถามลูกค้าว่าพวกเขารู้จักร้านค้าของคุณได้อย่างไรโดยการเพิ่มช่องแบบฟอร์ม “คุณรู้จักเราได้อย่างไร” ไปยังหน้าตะกร้าสินค้าของคุณ

คุณรู้จักเราได้อย่างไร

ในหน้านี้

สร้างช่องแบบฟอร์ม “คุณรู้จักเราได้อย่างไร”

เดสก์ท็อป

  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. ในไดเรกทอรี Config ให้คลิกที่ 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. แล้วคลิกที่บันทึก
ไม่พบคำตอบที่คุณต้องการงั้นหรือ เราพร้อมช่วยเหลือคุณ