お客様にどのようにしてストアを知ったのかを尋ねる

当店をどのように知りましたか?」フォームフィールドをカートページに追加することで、お客様にはストアをどのようにして知ったのかを尋ねることができます。

当店をどのように知りましたか

「当店をどのように知りましたか?」フォームフィールドを作成する

当店をどのように知りましたか?」フォームフィールド作成するには、次の手順を実行してください。

  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で販売を開始する準備はできていますか?

無料体験を試す