Herausfinden, wie Kunden deinen Shop gefunden haben

Du kannst deine Kunden fragen, wie sie auf deinen Shop aufmerksam geworden sind, indem du auf deiner Warenkorbseite das Formularfeld Wie hast du von uns erfahren? hinzufügst.

Wie hast du von uns erfahren

Formularfeld "Wie hast du von uns erfahren?" erstellen

So erstellst du das Formularfeld Wie hast du von uns erfahren?:

  1. Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.

  2. Snippet erstellen:

    1. Benenne dein Snippet hear-about-us.
    2. Klicke auf Snippet erstellen.
  3. Füge den folgenden Code in dein neues Snippet hear-about-us.liquid ein:

```liquid
<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. Klicke auf **Speichern**.

## Snippet in die Warenkorbseite einschließen

So fügst du das Snippet **Wie hast du von uns erfahren?** auf deiner Warenkorbseite ein:

1. Klicke im Verzeichnis **Abschnitte** auf `cart-template.liquid`. Wenn dein Theme nicht über `cart-template.liquid` verfügt, klicke im Verzeichnis **Vorlagen** auf `cart.liquid`.

2. [Suche](/manual/productivity-tools/keyboard-shortcuts#find) das abschließende Tag `</form>` im Code. Füge in einer neuen Zeile über dem abschließenden Tag `</form>` den folgenden Code ein:

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

3. Klicke auf **Speichern**.

## Theme-Einstellungen für die Konfiguration hinzufügen

1. Klicke im Verzeichnis **Konfiguration** auf `settings_schema.json`.

2. [Suche](/manual/productivity-tools/keyboard-shortcuts#find) nach der ersten abschließenden, geschweiften Klammer `},` im Code. Füge in einer neuen Zeile unterhalb der abschließenden, geschweiften Klammer `},` den folgenden Code ein:

     `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. Klicke auf **Speichern**.

## Das Formularfeld als Pflichtfeld festlegen

Um zu verhindern, dass Kunden mit dem Checkout fortfahren, ohne im Formular **Wie hast du von uns erfahren?** eine Option auszuwählen, kannst du das Feld zu einem Pflichtfeld machen.

1. Klicke im Verzeichnis **Abschnitte** auf `cart-template.liquid`. Wenn dein Theme nicht über `cart-template.liquid` verfügt, klicke im Verzeichnis **Vorlagen** auf `cart.liquid`.

2. [Suche](/manual/productivity-tools/keyboard-shortcuts#find) nach dem Attribut `novalidate` im Warenkorbformular-Code:

novalidate `` 3. Ersetze das Attributnovalidate` durch den folgenden Code:

{% unless settings.hau_form_validation %}novalidate{% endunless %}
  1. Klicke auf Speichern.

  2. Klicke im Theme-Editor in der Seitenleiste auf Theme-Einstellungen.

  3. Klicke auf den Tab Von uns erfahren.

  4. Prüfe unter Formularvalidierung, ob die Einstellung Formularvalidierung aktivieren aktiviert ist.

Optionen festlegen

Um die Optionen im Dropdown-Menü Wie hast du von uns erfahren? anzupassen, kannst du die Optionen über die Theme-Einstellungen im Theme-Editor bearbeiten.

  1. Klicke im Theme-Editor auf Theme-Einstellungen.

  2. Klicke auf den Tab Von uns erfahren.

  3. Füge unter Formularoptionen durch Kommas getrennte Optionen hinzu oder entferne sie.

  4. Klicke auf Speichern.

FAQs

Wo kann ich die erfassten Daten sehen?

Du siehst die Antwort im Adminbereich im Abschnitt Zusätzliche Details der Bestellung:

Bereich mit weiteren Details zu einer Bestellung

Wenn keine der aufgeführten Optionen die Antwort ist, kann ein Kunde etwas eingeben?

Ja. Wenn der Kunde Sonstiges auswählt, wird unter dem Dropdown-Menü ein Textfeld angezeigt, in das er eine Antwort eingeben kann.

Kann ich die Antwort in meinen Benachrichtigungs-E-Mails zu neuen Bestellungen anzeigen?

Ja. So zeigst du Kundenantworten in deinen Benachrichtigungs-E-Mails zu neuen Bestellungen an:

  1. Gehe in deinem Adminbereich zu deiner Benachrichtigungsseite und füge den folgenden Code zu deiner E-Mail-Vorlage Neue Bestellung hinzu:

    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. Klicke auf Speichern.

Bereit, mit Shopify zu verkaufen?

Kostenlos testen