Demander comment les clients ont entendu parler de votre boutique

Vous pouvez demander à vos clients comment ils ont entendu parler de votre boutique en ajoutant un champ Comment avez-vous entendu parler de nous ? au formulaire de votre page de panier.

Comment avez-vous entendu parler de nous

Avertissement : cette personnalisation ne convient pas aux styles de paniers coulissants ou pop-up, et ne fonctionne que pour un page de panier (à l'URL your-store.com/cart). Si vous utilisez un panier coulissant ou pop-up, vous devrez configurer votre style de panier sur Page dans l'éditeur de thème. Ajoutez un produit au panier dans l'aperçu du thème, puis cliquez sur l'onglet Page du panier dans l'éditeur de thème afin de voir vos paramètres de panier.

Créer le champ de formulaire « Comment avez-vous entendu parler de nous ? »

Pour créer le champ de formulaire Comment avez-vous entendu parler de nous ? :

  1. Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).

  2. Créez l'extrait :

    1. Nommez votre extrait hear-about-us.
    2. Cliquez sur Créer l'extrait.
  3. Dans votre nouvel extrait hear-about-us.liquid, collez le code suivant :

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

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement