Hilfe
Einloggen

Anzeige von Shop Promise auf deiner Produktseite

Das Shop Promise-Badge wird neben Lieferdaten und auf Produktseiten für berechtigte Zustellungen angezeigt, deren Zustellung im Inland der Vereinigten Staaten auf fünf oder weniger Kalendertage geschätzt wird. Dieses Badge informiert Kund:innen darüber, dass ihre Bestellung eine schnelle und zuverlässige Zustellung beinhaltet.

Nachdem du Shop Promise aktiviert hast, solltest du über deinen Theme-Editor zur Produktseite navigieren, um zu bestätigen, dass das Shop Promise-Badge korrekt angezeigt wird.

Wenn das Badge nicht korrekt angezeigt wird, stelle sicher, dass in deinem Shop beschleunigte Checkout-Schaltflächen aktiviert sind. Du hast außerdem mehrere Optionen, um die Anzeige des Shop-Promise-Badges anzupassen.

Auf dieser Seite

Das Shop-Promise-Modul manuell positionieren

Wenn du mit dem Lesen und Bearbeiten von Theme-Code vertraut bist, kannst du herausfinden, wo du Änderungen vornehmen musst, und die Produktseite aktualisieren.

Herausfinden, wo Änderungen vorgenommen werden müssen

Der Code für das Shop-Promise-Modul muss im Produktformular auf der Produktseite enthalten sein, das in etwa so aussehen sollte: {%- form 'product', product -%}. Das Shop-Promise-Modul kann sich je nach deinem Theme an verschiedenen Stellen befinden. Nachstehend findest du die gängigsten Speicherorte:

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

Die Produktseite aktualisieren

Schritte:

Desktop

  1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.

  2. Suche das Theme, das du bearbeiten möchtest. Klicke auf das Symbol Horizontales Menü, um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

  3. Öffne die entsprechende Datei.

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

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

<div class="delivery-promise__promise-container"></div>
  1. Klicke auf Speichern.

Das Ergebnis sollte so ähnlich aussehen:

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

  1. Tippe in der Shopify app auf das Symbol Menü.

  2. Tippe im Bereich Vertriebskanäle auf Onlineshop > Alle Themes verwalten.

  3. Suche das Theme, das du bearbeiten möchtest. Tippe auf die Schaltfläche …, um das Aktionsmenü zu öffnen, und tippe dann auf Code bearbeiten.

  4. Öffne die entsprechende Datei.

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

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

<div class="delivery-promise__promise-container"></div>
  1. Tippe auf Speichern oder ✓.

Das Ergebnis sollte so ähnlich aussehen:

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

Das Theme des Shop-Promise-Moduls manuell überschreiben

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

Wenn du mit dem Lesen und Bearbeiten von Theme-Code vertraut bist, kannst du das ausgewählte Theme des Moduls überschreiben, indem du dem Anchor-Element, das zum manuellen Positionieren des Shop-Promise-Moduls verwendet wird, ein Datenattribut hinzufügst.

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

Schritte:

Desktop
  1. Befolge die Anweisungen zum manuellen Positionieren des Shop-Promise-Moduls auf deiner Produktseite und lasse den Theme-Editor geöffnet.
  2. Füge deinem neu erstellten Anchor-Element ein Theme-Datenattribut hinzu, das auf dark oder light gesetzt ist.
  3. Klicke auf Speichern.

Das Ergebnis sollte einer der folgenden Möglichkeiten ähneln:

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

Oder

<div class="delivery-promise__promise-container" data-theme="light"></div>
Mobil
  1. Befolge die Anweisungen zum manuellen Positionieren des Shop-Promise-Moduls auf deiner Produktseite und lasse den Theme-Editor geöffnet.
  2. Füge deinem neu erstellten Anchor-Element ein Theme-Datenattribut hinzu, das auf dark oder light gesetzt ist.
  3. Tippe auf Speichern.

Das Ergebnis sollte einer der folgenden Möglichkeiten ähneln:

<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 „Benutzerdefiniertes Liquid“-Block verwenden, um das Shop-Promise-Modul zu deiner Produktseite hinzuzufügen, ohne den Theme-Code zu bearbeiten.

Schritte zum Hinzufügen des Promise-Moduls mit einem benutzerdefinierten Liquid-Block:

Desktop

  1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.

  2. Suche das Theme, das du bearbeiten möchtest, und klicke auf Theme bearbeiten.

  3. Navigiere über die Vorlagenauswahl in der oberen Menüleiste zu einer Produktseite.

  4. Suche im Seitenleistenmenü den 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 den folgenden Code in das Textfeld für benutzerdefiniertes Liquid ein:

<div class="delivery-promise__promise-container"></div>
  1. Positioniere den Block, indem du ihn an die gewünschte Stelle ziehst, normalerweise unter den Block für die Kaufen-Schaltflächen.
  2. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Wenn du eine Theme-Präferenz (dunkel oder hell) angeben 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>
Mobil

  1. Tippe in der Shopify app auf das Symbol Menü.

  2. Tippe im Bereich Vertriebskanäle auf Onlineshop > Alle Themes verwalten.

  3. Suche dein aktives Theme und tippe auf Theme bearbeiten.

  4. Navigiere über die 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 den folgenden Code in das Textfeld für benutzerdefiniertes Liquid ein:

<div class="delivery-promise__promise-container"></div>
  1. Positioniere den Block, indem du ihn an die gewünschte Stelle ziehst, normalerweise unter den Block für die Kaufen-Schaltflächen.
  2. Tippe auf Speichern, um deine Änderungen zu übernehmen.

Wenn du eine Theme-Präferenz (dunkel oder hell) angeben 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>

Unterstützte Sprachen für das Shop Promise-Badge

In der folgenden Tabelle findest du die Sprachen, in denen das Shop Promise-Badge angezeigt werden kann. Wenn die Sprache deines Shops nicht unterstützt wird, wird das Shop Promise-Badge auf Englisch angezeigt.

Sprachen, in denen das Shop Promise-Badge angezeigt werden kann.
Chinesisch (Vereinfacht)Chinesisch (Traditionell)KroatischTschechisch
DänischNiederländischEnglischFinnisch
FranzösischDeutschGriechischHindi
UngarischIndonesischItalienischJapanisch
KoreanischLitauischMalaiischNorwegisch (Bokmål)
PolnischPortugiesisch (Brasilien)Portugiesisch (Portugal)Rumänisch
RussischSlowakischSlowenischSpanisch
SchwedischThailändischTürkischVietnamesisch