고객이 스토어에 대해 어떻게 알게 되었는지 묻는 질문

카트 페이지에 우리에 대해 어떻게 알게 되었습니까? 양식 필드를 추가하여 고객이 어떻게 스토어에 대해 알게 되었는지 물어볼 수 있습니다.

우리에 대해 어떻게 알게 되었습니까?

'우리에 대해 어떻게 알게 되었습니까?' 양식 필드 생성

우리에 대해 어떻게 알게 되었습니까? 양식 필드를 생성하려면 다음을 수행하십시오.

  1. 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.

  2. 코드 조각 생성:

    1. 코드 조각 hear-about-us의 이름을 지정합니다.
    2. 코드 조각 생성을 클릭합니다.
  3. 새로운 hear-about-us.liquid 코드 조각에 다음 코드를 붙여 넣습니다.

    <style>
    #how-did-you-hear-about-us--label,
    #how-did-you-hear-about-us-other--label {
        font-weight: bold;
    }</p>

<pre><code translate="no">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 }};
}
&lt;/style&gt;

&lt;div class=&quot;form-vertical&quot;&gt;
&lt;p&gt;
    &lt;label id=&quot;how-did-you-hear-about-us--label&quot; for=&quot;how-did-you-hear-about-us&quot;&gt;How did you hear about us?&lt;/label&gt;
    &lt;span id=&quot;how-did-you-hear-about-us--error&quot; style=&quot;display:none&quot;&gt;{{ settings.hau_error_message }}&lt;/span&gt;
    &lt;select id=&quot;how-did-you-hear-about-us&quot; name=&quot;attributes[how-did-you-hear-about-us]&quot;&gt;
    &lt;option value=&quot;&quot;{% if cart.attributes.how-did-you-hear-about-us == &quot;&quot; %} selected{% endif %}&gt;Please make a selection&lt;/option&gt;
    {% assign optionsArray = settings.hau_form_options | split: &#39;,&#39; %}
    {% for o in optionsArray %}
    {% assign option = o | strip %}
    &lt;option value=&quot;{{ option }}&quot;{% if cart.attributes.how-did-you-hear-about-us == option %} selected{% endif %}&gt;{{ option }}&lt;/option&gt;
    {% endfor %}
    &lt;option value=&quot;Other&quot;{% if cart.attributes.how-did-you-hear-about-us == &quot;Other&quot; %} selected{% endif %}&gt;Other&lt;/option&gt;
    &lt;/select&gt;
&lt;/p&gt;
&lt;p id=&quot;otherFormWrapper&quot; style=&quot;{% unless cart.attributes.how-did-you-hear-about-us == &#39;Other&#39; %}display:none{% endunless %}&quot;&gt;
    &lt;label id=&quot;how-did-you-hear-about-us-other--label&quot; for=&quot;how-did-you-hear-about-us-other&quot;&gt;Other&lt;/label&gt;
    &lt;span id=&quot;how-did-you-hear-about-us-other--error&quot; style=&quot;display:none&quot;&gt;{{ settings.hau_error_message_other }}&lt;/span&gt;
    &lt;input id=&quot;how-did-you-hear-about-us-other&quot; type=&quot;text&quot; name=&quot;attributes[how-did-you-hear-about-us-other]&quot; value=&quot;{{ cart.attributes.how-did-you-hear-about-us-other }}&quot;/&gt;
&lt;/p&gt;
&lt;/div&gt;

&lt;script&gt;
(function() {

    document.addEventListener(&quot;DOMContentLoaded&quot;, initForm);
    document.addEventListener(&quot;shopify:section:load&quot;, initForm);

    function initForm(){

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

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

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

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

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

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

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

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

    }
})()
&lt;/script&gt;

  1. Click Save.

Include the snippet in your cart page

To include the How did you hear about us? snippet in your cart page:

  1. In the Sections directory, click cart-template.liquid. If your theme doesn't include a cart-template.liquid, then click cart.liquid in the Templates directory.

  2. Find the closing </form> tag in the code. On a new line above the closing </form> tag, paste the following code:

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

  3. Click Save.

Add theme settings for configuration

  1. In the Config directory, click settings_schema.json.

  2. Find the first closing curly bracket }, in the code. On a new line below the closing curly bracket },, paste the following code:

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

  3. Click Save.

Make the form field required

To prevent customers from proceeding to the checkout without selecting an option in the How did you hear about us? form field, you can make the field required.

  1. In the Sections directory, click cart-template.liquid. If your theme doesn't include a cart-template.liquid, then click cart.liquid in the Templates directory.

  2. Find the following novalidate attribute in the cart form code:

     novalidate
    
  3. Replace the novalidate attribute with the following code:

    
    {% unless settings.hau_form_validation %}novalidate{% endunless %}
    
    
  4. Click Save.

  5. In the theme editor, click Theme settings on the sidebar.

  6. Click the Hear About Us tab.

  7. Under Form Validation, make sure the Enable form validation setting is enabled.

Note: You can customise the error messages displayed by modifying the Error message and Other field error message text field settings. You can also customise the error color by changing the Color setting under Error Styling.

Set your options

To customize the options in the How did you hear about us? drop-down menu, you can edit the options using the theme settings within the theme editor.

  1. In the theme editor, click Theme settings.

  2. Click the Hear About Us tab.

  3. Under Form options, add or remove options, separated by commas.

  4. Click Save.

Note: Do not include the option Other, as it will be added in automatically.

FAQ

Where will I see the data that's captured?

You will see the answer in the admin, in the Additional details section of the order:

Additional details section of an order

If no listed option is the answer, can a customer type something in?

Yes, they can. When the customer selects Other, a text box in which they can type an answer will appear below the drop-down menu.

Can I show the answer in my New order notification emails?

Yes. To show customer responses in your New order notification emails:

  1. Go to your Notifications page in your admin, and add the following code to your New order email template:

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

  2. Click Save.

Shopify와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험