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.

Auf dieser Seite

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

Die Produktseite aktualisieren

Schritte:

Desktop

Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
Öffne die relevante Datei.
Suche die Zeile, die {%- if block.settings.show_dynamic_checkout -%} oder {{ form | payment_button }} enthält.
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>

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

Tippe in der Shopify-App auf die Schaltfläche ....
Klicke im Bereich Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, tippe auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und tippe dann auf Code bearbeiten.
Öffne die relevante Datei.
Suche die Zeile, die {%- if block.settings.show_dynamic_checkout -%} oder {{ form | payment_button }} enthält.
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>

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

Tippe in der Shopify-App auf die Schaltfläche ....
Klicke im Bereich Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, tippe auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und tippe dann auf Code bearbeiten.
Öffne die relevante Datei.
Suche die Zeile, die {%- if block.settings.show_dynamic_checkout -%} oder {{ form | payment_button }} enthält.
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>

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>

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.

Schritte:

Desktop

Befolge die Anweisungen, um das Shop Promise-Modul manuell auf deiner Produktseite zu positionieren, und lass den Theme-Editor dann offen.
Füge ein Datenattribut zu deinem neu erstellten Ankerelement hinzu, welches auf dunkel oder hell eingestellt ist.
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

Befolge die Anweisungen, um das Shop Promise-Modul manuell auf deiner Produktseite zu positionieren, und lass den Theme-Editor dann offen.
Füge ein Datenattribut zu deinem neu erstellten Ankerelement hinzu, welches auf dunkel oder hell eingestellt ist.
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

Befolge die Anweisungen, um das Shop Promise-Modul manuell auf deiner Produktseite zu positionieren, und lass den Theme-Editor dann offen.
Füge ein Datenattribut zu deinem neu erstellten Ankerelement hinzu, welches auf dunkel oder hell eingestellt ist.
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>