Herausfinden, wie Kunden deinen Shop gefunden haben

Achtung

Vintage-Themes sind nicht im Theme Store verfügbar. Diese Themes verfügen nicht über die Funktionen, die in den Onlineshop 2.0-Themes von Shopify enthalten sind, und erhalten nur sicherheitsbezogene Aktualisierungen.

Hinweis

Wenn du ein kostenloses Theme von Shopify verwendest, kannst du dich an den Shopify Support wenden, um Hilfe zu diesem Tutorial zu erhalten. Die Designzeit beträgt 15 Minuten. Weitere Informationen dazu findest du unter Theme-Support.

Hinweis

Diese Anpassung ist für Vintage-Shopify-Themes und gilt nicht für Online Store 2.0-Themes.

• Finde die Architekturversion deines Themes heraus
• Entdecke die Anpassungsmöglichkeiten für Online Store 2.0-Themes

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.

Achtung

Diese Anpassung wird ausschließlich auf die Warenkorbseite (mit der URL your-store.com/cart) angewendet, nicht aber auf Warenkorb-Stile wie Warenkorbeinschübe oder Pop-ups. Wenn du einen Warenkorbeinschub oder ein Pop-up verwendest, musst du den Warenkorb-Stil im Theme-Editor zu Seite ändern. Füge in der Theme-Vorschau dem Warenkorb ein Produkt hinzu und klicke anschließend im Theme-Editor auf das Tab Warenkorbseite, um deine Warenkorbeinstellungen anzuzeigen.

Formularfeld "Wie hast du von uns erfahren?" erstellen

Desktop

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
3. Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.

4. Snippet erstellen:

   1. Benenne dein Snippet hear-about-us.
   2. Klicke auf Snippet erstellen.

5. Füge den folgenden Code in dein neues Snippet hear-about-us.liquid ein:

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

iPhone

1. Tippe in der Shopify-App auf die Schaltfläche ....
2. Klicke im Bereich Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.
4. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
5. Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.

6. Snippet erstellen:

   1. Benenne dein Snippet hear-about-us.
   2. Klicke auf Snippet erstellen.

7. Füge den folgenden Code in dein neues Snippet hear-about-us.liquid ein:

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

Android

1. Tippe in der Shopify-App auf die Schaltfläche ....
2. Klicke im Bereich Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.
4. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
5. Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.

6. Snippet erstellen:

   1. Benenne dein Snippet hear-about-us.
   2. Klicke auf Snippet erstellen.

7. Füge den folgenden Code in dein neues Snippet hear-about-us.liquid ein:

<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 das abschließende Tag </form> im Code. Füge in einer neuen Zeile über dem abschließenden Tag </form> den folgenden Code ein:

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

1. Klicke auf Speichern.

Theme-Einstellungen für die Konfiguration hinzufügen

1. Klicke im Verzeichnis Konfiguration auf settings_schema.json.

2. Suche 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:

{
"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. 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 nach dem Attribut novalidate im Warenkorbformular-Code:

novalidate

1. Ersetze das Attribut novalidate 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.

Hinweis

Du kannst die angezeigten Fehlermeldungen anpassen, indem du die Textfeldeinstellungen für Fehlermeldung und Andere Feldfehlermeldungen änderst. Du kannst auch die Fehlerfarbe anpassen, indem du die Einstellung Farbe unter Fehlergestaltung änderst.

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.

Hinweis

Schließe die Option Sonstiges nicht mit ein, da sie automatisch hinzugefügt wird.

FAQs

Wo kann ich die erfassten Daten sehen?

Du siehst die Antwort im Adminbereich im Abschnitt Zusätzliche Details der 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:

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