Shop Promise auf deiner Produktseite anzeigen

Das Shop Promise-Badge wird neben den Lieferdaten und auf Produktseiten für berechtigte Zustellungen angezeigt, die voraussichtlich in fünf oder weniger Kalendertagen innerhalb der Vereinigten Staaten zugestellt werden. Dieses Badge informiert Kunden darüber, dass zu ihrer Bestellung eine schnelle und zuverlässige Zustellung gehört.

Nachdem deine Bewerbung für Shop Promise genehmigt wurde, solltest du mit deinem Theme-Editor zur Produktseite navigieren, um zu bestätigen, dass das Shop Promise-Badge korrekt angezeigt wird.

Wenn das Badge nicht korrekt angezeigt wird, musst du das Shop Promise-Modul manuell positionieren.

Das Shop Promise-Modul manuell positionieren

Wenn du mit dem Lesen und Bearbeiten von Theme-Code vertraut bist, kannst du ermitteln, wo Änderungen vorgenommen werden müssen, und die Produktseite aktualisieren.

Ermitteln, wo Änderungen vorgenommen werden müssen

Der Code für das Shop Promise-Modul muss im Produktformular auf der Produktseite enthalten sein. Er sieht etwa folgendermaßen aus: {%- form 'product', product -%}. Das Shop Promise-Modul kann sich abhängig von deinem Theme an verschiedenen Stellen befinden. Die folgenden Stellen sind häufig:

• main-product.liquid
• product-form.liquid
• product-template.liquid
• product.liquid

Tipp

Wenn du mit dem Lesen und Bearbeiten von Theme-Code nicht vertraut bist und du ein Theme von Shopify verwendest, kannst du dein Theme aktualisieren lassen, indem du dich an den Shopify Support wendest. Erfahre mehr über die Shopify-Designrichtlinie. Wenn du ein Theme eines Drittanbieters verwendest, wende dich an deinen Theme-Entwickler oder engagiere einen Shopify-Partner.

Die Produktseite aktualisieren

Tipp

Bevor du Änderungen vornimmst, solltest du dein Theme duplizieren und die Änderungen im Duplikat vornehmen, sodass du deine Änderungen auf eine einfache Weise rückgängig machen kannst.

Schritte:

Desktop

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest, klicke zum Öffnen des Aktionsmenüs auf das Symbol und klicke dann auf Code bearbeiten.

3. Öffne die relevante Datei.

4. Suche die Zeile, die {%- if block.settings.show_dynamic_checkout -%} oder {{ form | payment_button }} enthält.

5. Erstelle eine neue Zeile direkt unter {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} und füge dort Folgendes ein:

<div class="delivery-promise__promise-container"></div>

1. Klicke auf Speichern.

Das Ergebnis sollte wie folgendes Beispiel aussehen:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>

iPhone

1. Tippe von der Shopify-App aus auf .
2. Klicke im Bereich Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.
4. Suche das Theme, das du bearbeiten möchtest, tippe auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und tippe dann auf Code bearbeiten.
5. Öffne die relevante Datei.
6. Suche die Zeile, die {%- if block.settings.show_dynamic_checkout -%} oder {{ form | payment_button }} enthält.
7. Erstelle eine neue Zeile direkt unter {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} und füge dort Folgendes ein:

<div class="delivery-promise__promise-container"></div>

1. Tippe auf Speichern.

Das Ergebnis sollte wie folgendes Beispiel aussehen:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>

Android

1. Tippe von der Shopify-App aus auf .
2. Klicke im Bereich Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.
4. Suche das Theme, das du bearbeiten möchtest, tippe auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und tippe dann auf Code bearbeiten.
5. Öffne die relevante Datei.
6. Suche die Zeile, die {%- if block.settings.show_dynamic_checkout -%} oder {{ form | payment_button }} enthält.
7. Erstelle eine neue Zeile direkt unter {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} und füge dort Folgendes ein:

<div class="delivery-promise__promise-container"></div>

1. Tippe auf ✓.

Das Ergebnis sollte wie folgendes Beispiel aussehen:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>

Das Shop Promise-Modul-Theme manuell überschreiben

Das Shop Promise-Modul hat ein dunkles und helles Theme. Das Modul verwendet automatisch das Theme, das das höchste Kontrastverhältnis im Vergleich zur Hintergrundfarbe der Produktseite aufweist.

Wenn du dich mit dem Schreiben und Bearbeiten von Theme-Codes auskennst, kannst du das ausgewählte Theme des Moduls überschreiben, indem du ein Datenattribut zum Ankerelement hinzufügst, das dazu verwendet wird, das Shop Promise-Modul manuell zu positionieren.

Bevor du Änderungen vornimmst, dupliziere dein Theme und bearbeite das duplizierte Theme, damit du Änderungen einfacher rückgängig machen kannst.

Tipp

Wenn du mit dem Lesen und Bearbeiten von Theme-Code nicht vertraut bist und du ein Theme von Shopify verwendest, kannst du dein Theme aktualisieren lassen, indem du dich an den Shopify Support wendest. Erfahre mehr über die Shopify-Designrichtlinie. Wenn du ein Theme eines Drittanbieters verwendest, wende dich an deinen Theme-Entwickler oder engagiere einen Shopify-Partner.

Schritte:

Desktop

1. Befolge die Anweisungen, um das Shop Promise-Modul manuell auf deiner Produktseite zu positionieren, und lass den Theme-Editor dann offen.
2. Füge ein Datenattribut zu deinem neu erstellten Ankerelement hinzu, welches auf dunkel oder hell eingestellt ist.
3. Klicke auf Speichern.

Das Ergebnis sollte wie eines der folgenden Beispiele aussehen:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

oder

<div class="delivery-promise__promise-container" data-theme="light"></div>

iPhone

1. Befolge die Anweisungen, um das Shop Promise-Modul manuell auf deiner Produktseite zu positionieren, und lass den Theme-Editor dann offen.
2. Füge ein Datenattribut zu deinem neu erstellten Ankerelement hinzu, welches auf dunkel oder hell eingestellt ist.
3. Tippe auf Speichern.

Das Ergebnis sollte wie eines der folgenden Beispiele aussehen:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

oder

<div class="delivery-promise__promise-container" data-theme="light"></div>

Android

1. Befolge die Anweisungen, um das Shop Promise-Modul manuell auf deiner Produktseite zu positionieren, und lass den Theme-Editor dann offen.
2. Füge ein Datenattribut zu deinem neu erstellten Ankerelement hinzu, welches auf dunkel oder hell eingestellt ist.
3. Tippe auf Speichern.

Das Ergebnis sollte wie eines der folgenden Beispiele aussehen:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

oder

<div class="delivery-promise__promise-container" data-theme="light"></div>

Benutzerdefiniertes HTML oder Liquid für das Promise-Modul hinzufügen

Wenn dein Theme benutzerdefinierte Blöcke unterstützt, kannst du einen benutzerdefinierten Liquid-Block verwenden, um das Module „Shop Promise“ zu deiner Produktseite hinzuzufügen, ohne den Theme-Code bearbeiten zu müssen.

Schritte zum Hinzufügen des Promise-Moduls mithilfe eines benutzerdefinierten Liquid-Blocks:

Desktop

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
2. Suche das Theme, das du bearbeiten möchtest, und klicke auf Anpassen.
3. Navigiere über die Vorlagenauswahl in der oberen Menüleiste zu einer Produktseite.
4. Suche im Seitenleistenmenü nach dem Abschnitt Produktinformationen.
5. Klicke auf Block hinzufügen und wähle Benutzerdefiniertes Liquid aus der Liste der verfügbaren Blöcke aus.
6. Füge in das Textfeld für benutzerdefiniertes Liquid den folgenden Code ein:

<div class="delivery-promise__promise-container"></div>

1. Positioniere den Block, indem du ihn an den gewünschten Standort ziehst, normalerweise unter den Block für die Schaltfläche „Kaufen“.
2. Klicke auf Speichern, um deine Änderungen anzuwenden.

Wenn du eine Theme-Konfiguration (dunkel oder hell) festlegen möchtest, verwende stattdessen eine der folgenden Optionen:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

oder

<div class="delivery-promise__promise-container" data-theme="light"></div>

iPhone

1. Tippe von der Shopify-App aus auf und tippe dann auf Onlineshop.
2. Tippe auf Themes verwalten.
3. Suche dein aktives Theme und tippe auf Anpassen.
4. Navigiere mit der Vorlagenauswahl oben zu einer Produktseite.
5. Tippe auf den Abschnitt Produktinformationen.
6. Tippe auf Block hinzufügen und wähle Benutzerdefiniertes Liquid aus.
7. Füge in das Textfeld für benutzerdefiniertes Liquid den folgenden Code ein:

<div class="delivery-promise__promise-container"></div>

1. Positioniere den Block, indem du ihn an den gewünschten Standort ziehst, normalerweise unter den Block für die Schaltfläche „Kaufen“.
2. Tippe auf Speichern, um deine Änderungen durchzuführen.

Wenn du eine Theme-Konfiguration (dunkel oder hell) festlegen möchtest, verwende stattdessen eine der folgenden Optionen:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

oder

<div class="delivery-promise__promise-container" data-theme="light"></div>

Android

1. Tippe von der Shopify-App aus auf und tippe dann auf Onlineshop.
2. Tippe auf Themes verwalten.
3. Suche dein aktives Theme und tippe auf Anpassen.
4. Navigiere mit der Vorlagenauswahl oben zu einer Produktseite.
5. Tippe auf den Abschnitt Produktinformationen.
6. Tippe auf Block hinzufügen und wähle Benutzerdefiniertes Liquid aus.
7. Füge in das Textfeld für benutzerdefiniertes Liquid den folgenden Code ein:

<div class="delivery-promise__promise-container"></div>

1. Positioniere den Block, indem du ihn an den gewünschten Standort ziehst, normalerweise unter den Block für die Schaltfläche „Kaufen“.
2. Tippe auf Speichern, um deine Änderungen durchzuführen.

Wenn du eine Theme-Konfiguration (dunkel oder hell) festlegen möchtest, verwende stattdessen eine der folgenden Optionen:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

oder

<div class="delivery-promise__promise-container" data-theme="light"></div>

Tipp

Nicht alle Themes unterstützen benutzerdefinierte Liquid-Blöcke. Wenn diese Option für dein Theme nicht verfügbar ist, folge den Anweisungen, um das Shop Promise-Module manuell zu positionieren, indem du deinen Theme-Code bearbeitest.