Spør hvordan kundene hørte om butikken din

Advarsel

Eldre temaer er ikke tilgjengelige i Theme Store. Eldre temaer har ikke funksjonene fra Shopifys Online Store 2.0-temaer, og Shopifys gratis eldre temaer mottar ikke oppdateringer ut over sikkerhetsrettelser.

Merk

Hvis du bruker et gratis tema fra Shopify, kan du kontakte Shopifys brukerstøtte for å få hjelp med denne veiledningen. Det krever 15 minutter med designtid. Finn ut mer om Shopifys retningslinjer for design.

Merk

Denne tilpasningen er for eldre Shopify-temaer, og gjelder ikke for Nettbutikk 2.0-temaer.

• Finn ut temaets arkitekturversjon
• Utforsk Online Store 2.0-tematilpasninger

Du kan spørre kundene hvordan de har hørt om butikken din ved å legge til skjemafeltet Hvordan hørte du om oss? på handlekurvsiden.

Advarsel

Denne tilpasningen fungerer ikke for handlekurvstilene skuff eller popup, og vil bare fungere for en handlekurvside (med URL-adressen your-store.com/cart). Hvis du bruker en handlekurvskuff eller popup, må du endre handlekurvstilen til Side i temaredigeringsprogrammet. Legg til et produkt i handlekurven i temaforhåndsvisningen, og klikk så på Handlekurvside-fanen i temaredigeringsprogrammet for å vise handlekurvinnstillingene.

Opprett skjemafeltet «Hvordan hørte du om oss?»

Datamaskin

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
3. I Utdrag-katalogen klikker du på Legg til et nytt utdrag.

4. Opprett kodebiten:

   1. Gi kodebiten navnet hear-about-us.
   2. Klikk på Opprett utdrag.

5. I den nye hear-about-us.liquid-kodebiten limer du inn følgende kode:

<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. Klikk på Lagre.

iPhone

1. Trykk på …-knappen fra Shopify-appen.
2. I Salgskanaler-seksjonen trykker du på Nettbutikk.
3. Trykk på Administrer temaer.
4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
5. I Utdrag-katalogen klikker du på Legg til et nytt utdrag.

6. Opprett kodebiten:

   1. Gi kodebiten navnet hear-about-us.
   2. Klikk på Opprett utdrag.

7. I den nye hear-about-us.liquid-kodebiten limer du inn følgende kode:

<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. Klikk på Lagre.

Android

1. Trykk på …-knappen fra Shopify-appen.
2. I Salgskanaler-seksjonen trykker du på Nettbutikk.
3. Trykk på Administrer temaer.
4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
5. I Utdrag-katalogen klikker du på Legg til et nytt utdrag.

6. Opprett kodebiten:

   1. Gi kodebiten navnet hear-about-us.
   2. Klikk på Opprett utdrag.

7. I den nye hear-about-us.liquid-kodebiten limer du inn følgende kode:

<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. Klikk på Lagre.

Inkluder kodebiten på handlekurvsiden

For å legge inn Hvordan hørte du om oss?-kodebiten på handlekurvsiden:

1. I Seksjoner-katalogen klikker du på cart-template.liquid. Hvis temaet ditt ikke har en cart-template.liquid, klikker du på cart.liquid i Maler-katalogen.

2. Finn den avsluttende </form>-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende </form>-taggen:

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

1. Klikk på Lagre.

Legg til temainnstillinger for konfigurasjon

1. I katalogen Config klikker du på settings_schema.json.

2. Finn den første avsluttende klammeparentesen }, i koden. Lim inn følgende kode på en ny linje under den avsluttende klammeparentesen },:

{
"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. Klikk på Lagre.

Gjør skjemafeltet obligatorisk

For å forhindre at kundene kan fortsette til kassen uten å velge et alternativ i Hvordan hørte du om oss?-skjemafeltet, kan du gjøre feltet obligatorisk.

1. I Seksjoner-katalogen klikker du på cart-template.liquid. Hvis temaet ditt ikke har en cart-template.liquid, klikker du på cart.liquid i Maler-katalogen.

2. Finn følgende novalidate-attributt i koden til handlekurvskjemaet:

novalidate

1. Erstatt novalidate-attributten med følgende kode:

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

1. Klikk på Lagre.

2. I temaredigeringsprogrammet klikker du på Temainnstillinger i sidefeltet.

3. Klikk på Hør om oss-fanen.

4. Under Skjemavalidering må du sørge for at innstillingen Aktiver skjemavalidering er aktivert.

Merk

Du kan tilpasse feilmeldingene som vises ved å endre tekstfeltinnstillingene for Feilmelding og Andre feltfeilmeldinger. Du kan også tilpasse feilfargen ved å endre innstillingen Farge under Feilstiler.

Angi alternativer

For å tilpasse alternativene i rullegardinmenyen Hvordan hørte du om oss?, kan du redigere alternativene med temainnstillingene i temaredigeringsprogrammet.

1. Klikk på Temainnstillinger i temaredigeringsprogrammet.

2. Klikk på Hør om oss-fanen.

3. Under Skjemaalternativer kan du legge til eller fjerne alternativer, adskilt med komma.

4. Klikk på Lagre.

Merk

Ikke inkluder alternativet Annet, da det vil bli lagt til automatisk.

Vanlige spørsmål

Hvor ser jeg opplysningene som innhentes?

Du ser svaret i administrator, i seksjonen Tilleggsopplysninger i bestillingen:

Hvis ingen av de oppførte alternativene er svaret, kan kunden skrive inn noe selv?

Ja, det kan de. Når kunden velger Annet vises en tekstboks, der de kan skrive inn et svar som vil vises under rullegardinmenyen.

Kan jeg vise svaret i varslings-e-postene for nye bestillinger?

Ja. Slik viser du kundesvar i varslings-e-postene for nye bestillinger:

1. Gå til Varsler-siden i administrator, og legg til følgende kode i e-postmalen Ny bestilling:

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. Klikk på Lagre.