Widget zu Ihrem Theme hinzufügen

Der Checkout-Rabatt und das Storefront-Widget sind zwei getrennte Dinge. Der Rabatt wird von einer Shopify Function erzwungen, sobald Sie eine Kampagne veröffentlichen — er gilt beim Checkout unabhängig davon, ob das Widget in Ihrem Theme ist. Das Widget macht das Angebot für die Kundschaft sichtbar, bevor sie dort ankommt: eine Tabelle mit Rabattstufen auf der Produktseite und eine kurze Meldung im Warenkorb.

Hinweis

Wird der Rabatt einer Kampagne nicht auf Ihren Produktseiten angezeigt, obwohl Sie bestätigt haben, dass er beim Checkout gilt, ist das Widget fast sicher noch nicht eingeschaltet — die folgenden Schritte beheben das.

App-Einbettung einschalten (empfohlen)

Das ist der schnellste Weg, das Widget hinzuzufügen, und braucht keine manuelle Platzierung:

1. Gehen Sie im Shopify-Adminbereich zu Onlineshop → Themes und dann Anpassen für Ihr Live-Theme.
2. Öffnen Sie App-Einbettungen.
3. Schalten Sie Nock Quantity Breaks & BOGO ein.
4. Speichern Sie das Theme.

Home markiert diesen Schritt automatisch als erledigt, sobald der Browser einer Kundin oder eines Kunden zum ersten Mal eine Produktseite mit eingeschalteter Einbettung lädt — normalerweise innerhalb einer Minute nach dem Speichern.

Ist es eingeschaltet, platziert sich das Widget selbst: Es sucht nach Ihrem Preis- und „In den Warenkorb“-Bereich auf der Produktseite und rendert daneben, und fügt dem Warenkorb und dem Warenkorb-Drawer eine kurze Zeile hinzu.

Widget als Block hinzufügen (für exakte Platzierung)

Landet die automatische Platzierung an der falschen Stelle, fügen Sie stattdessen den Block hinzu — er hat Vorrang vor der automatischen Platzierung der Einbettung:

1. Öffnen Sie im Theme-Editor Ihre Produktvorlage.
2. Fügen Sie einen Block hinzu und wählen Sie Nock Quantity Breaks & BOGO widget.
3. Positionieren Sie ihn dort, wo Sie ihn möchten.

Widget-Position und benutzerdefinierter Selektor

Sowohl die App-Einbettung als auch der Block bieten dieselben zwei Einstellungen:

Einstellung	Was sie tut
Widget-Position	Auto (Standard), Before add to cart (vor „In den Warenkorb“), After price (nach Preis), oder Custom selector (benutzerdefinierter Selektor).
Benutzerdefinierter CSS-Selektor	Nur verwendet, wenn die Position Custom selector ist — das Widget rendert direkt nach dem Element, das auf diesen CSS-Selektor passt.

Tipp

Sie können die Platzierung auch direkt aus der App heraus festlegen, ohne den Theme-Code anzufassen: Öffnen Sie EinstellungenIn der App: Settings → Storefront-WidgetWo das Mengenrabatt-Widget auf Ihren Produktseiten erscheint und wie es dorthin gelangt.In der App: Storefront widget oder den Tab PlatzierungStandardmäßig automatisch – das Widget findet die Stelle unter Ihrem Preis und Ihrer Mengenauswahl von selbst. Landet es an der falschen Stelle, legen Sie die Position selbst fest.In der App: Placement einer Kampagne und nutzen Sie den Platzierungs-Picker, um die exakte Stelle auf einer Live-Vorschau Ihres Shops anzuklicken. Nutzen Sie Auf automatisch zurücksetzenIn der App: Reset to automatic, um zum Standardverhalten zurückzukehren.

Was wo ausgeliefert wird

• Die Produktseite erhält das vollständige Widget: die Stufentabelle oder den Warenkorbziel-Fortschrittsbalken, gestaltet so, wie Sie es im Widget-Tab einer Kampagne eingerichtet haben.
• Warenkorbseite und Warenkorb-Drawer erhalten eine leichtere Meldung — eine Zeile unter dem betreffenden Warenkorbartikel, die sagt, was freigeschaltet wurde oder was bis zur nächsten Stufe noch fehlt.

Weiter: Erste Kampagne erstellen, damit es etwas gibt, das das Widget zeigen kann.