Domanda ai clienti come sono venuti a conoscenza del tuo negozio

Attenzione

I temi vintage non sono disponibili nel Theme Store. Questi temi non dispongono delle funzionalità incluse nei temi dell'Online Store 2.0 di Shopify e i temi vintage gratuiti di Shopify non ricevono aggiornamenti oltre alle correzioni di sicurezza.

Nota

Se utilizzi un tema gratuito di Shopify, puoi contattare l'Assistenza Shopify per ricevere aiuto con questo tutorial. Sono necessari 15 minuti di tempo di progettazione. Per maggiori informazioni, consulta la pagina Assistenza per i temi.

Nota

Questa personalizzazione è per i temi Shopify vintage e non si applica ai temi dell'Online Store 2.0.

• Scopri la versione della struttura del tuo tema
• Esplora le opzioni di personalizzazione del tema dell'Online Store 2.0.

Puoi chiedere ai clienti come sono venuti a conoscenza del tuo negozio aggiungendo un campo del modulo How did you hear about us? (Come hai saputo di noi?) alla pagina del carrello.

Attenzione

Questa personalizzazione non funziona con gli stili che prevedono l'apertura del carrello in una finestra o in modalità pop up, ma solo con una pagina del carrello (all'URL your-store.com/cart). Se usi una finestra del carrello o un pop up, dovrai modificare lo stile del carrello in Pagina nell'editor del tema. Aggiungi un prodotto al carrello nell'anteprima del tema, quindi clicca sulla scheda Pagina del carrello dell'editor del tema per visualizzare le impostazioni del carrello.

Creazione del campo del modulo "How did you hear about us?" (Come hai saputo di noi?)

Per creare il campo del modulo How did you hear about us? (Come hai saputo di noi?):

Desktop

1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

2. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

iPhone

1. Nell'app Shopify tocca Negozio.

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci temi.

4. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

Android

1. Nell'app Shopify tocca Negozio.

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci temi.

4. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

1. Nella directory Frammenti, clicca su Aggiungi un nuovo frammento.

2. Crea il frammento:

3. Nel nuovo frammento hear-about-us.liquid incolla il codice seguente:

<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("DOMContentLoaded", initForm);
    document.addEventListener("shopify:section:load", initForm);

    function initForm(){

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

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

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

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

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

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

    checkoutButtons.forEach(function(element){
        element.addEventListener("click", function(evt) {

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

    }
})()
</script>

1. Clicca su Salva.

Inclusione del frammento nella pagina del carrello

Per includere il frammento How did you hear about us? (Come hai saputo di noi?) nella pagina del carrello:

1. Nella directory Sezioni, clicca su cart-template.liquid. Se il tema non contiene cart-template.liquid, clicca su cart.liquid nella directory Modelli.

2. Trova il tag di chiusura </form> nel codice. Su una nuova riga sopra il tag di chiusura </form> incolla il codice seguente:

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

1. Clicca su Salva.

Aggiunta delle impostazioni del tema per la configurazione

1. Nella directory Config, clicca su settings_schema.json.

2. Trova la prima parentesi graffa di chiusura }, nel codice, quindi incolla il seguente codice su una nuova riga sotto la parentesi graffa di chiusura },:

{
"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. Clicca su Salva.

Come rendere il campo modulo obbligatorio

Per impedire ai clienti di procedere al check-out senza selezionare un'opzione nel campo del modulo How did you hear about us? (Come hai saputo di noi?), puoi rendere il campo obbligatorio.

1. Nella directory Sezioni, clicca su cart-template.liquid. Se il tema non contiene cart-template.liquid, clicca su cart.liquid nella directory Modelli.

2. Trova il seguente attributo novalidate nel codice del modulo del carrello:

novalidate

1. Sostituisci l'attributo novalidate con il seguente codice:

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

1. Clicca su Salva.

2. Nell'editor del tema clicca su Impostazioni tema nella sidebar.

3. Clicca sulla scheda Come hai saputo di noi.

4. Alla voce Form Validation (Convalida modulo), assicurati che l'impostazione Enable form validation (Abilita convalida modulo) sia abilitata.

Nota

È possibile personalizzare i messaggi di errore mostrati modificando le impostazioni del campo Error message (Messaggio di errore) e Other field error message (Altro messaggio di errore del campo). Puoi anche personalizzare il colore dell'errore modificando l'impostazione Colore alla voce Error Styling (Stile errore).

Impostazione delle opzioni

Per personalizzare le opzioni nel menu a discesa How did you hear about us? (Come hai saputo di noi), puoi modificare le opzioni utilizzando le impostazioni del tema presenti nell'editor del tema.

1. Nell'editor del tema clicca su Impostazioni tema.

2. Clicca sulla scheda Come hai saputo di noi.

3. Alla voce Opzioni modulo, aggiungi o rimuovi opzioni, separandole con le virgole.

4. Clicca su Salva.

Nota

Non includere l'opzione Altro, perché verrà aggiunta automaticamente.

FAQ

Dove posso visualizzare i dati acquisiti?

La risposta sarà visualizzata nel pannello di controllo, nella sezione Ulteriori dettagli dell'ordine:

Se nessuna delle opzioni elencate corrisponde alla risposta, un cliente può digitare qualcosa?

Sì, è possibile. Quando il cliente seleziona Altro, sotto il menu a discesa verrà visualizzata una casella di testo in cui potrà digitare una risposta.

Posso mostrare la risposta nelle Email con notifica di un nuovo ordine?

Sì. Per mostrare le risposte dei clienti nelle email di notifica di nuovo ordine:

1. Vai alla pagina Notifiche nel tuo pannello di controllo e aggiungi il seguente codice al modello di email Nuovo ordine:

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. Clicca su Salva.