Storefront-Widgets

Drei Blöcke zeichnen deine Stufenangebote auf der Produktseite: die Quantity Break Table, der Quantity Break Picker und die Tabelle Spend More Save More. Du platzierst sie einmal in deinem Theme; danach folgen sie dem Rabatt, zeigen seine Stufen und blenden sich aus, wenn das Angebot endet.

Kein App embed nötig

Das sind Theme-Blöcke, und jeder rendert von selbst. Das App embed („App-Einbettung“) ist für Sale Badges, Price Drops und das automatisch hinzugefügte Geschenk da.

Einrichtung

1. Schalte Show on storefront im Rabatt ein.

   Öffne den Rabatt — einen Mengenrabatt, einen Mehr ausgeben, mehr sparen oder eine Preisliste — und schalte Show on storefront ein. Bei einem neuen Mengenrabatt und einem neuen Rabatt „Mehr ausgeben, mehr sparen“ ist es an. Die Statuszeile der Karte sagt dir genau, was Käufer bekommen werden, oder warum das Widget verborgen bleibt.

   

2. Klicke auf Add neben dem gewünschten Block.

   Das Panel Add to your theme am Ende dieser Karte nennt jeden Block genau so, wie ihn der Theme-Editor nennt, mit einer Zeile dazu, was er ist, und einer Schaltfläche Add, die deinen Theme-Editor mit dem Block bereit zum Platzieren öffnet.

3. Platziere den Block im Theme-Editor und speichere.

   Setze den Block dorthin, wo er auf der Produktseite hingehört — meist nahe am Preis oder an der Kaufschaltfläche — und klicke auf Save.

4. Passe die Einstellungen des Blocks im Theme-Editor an.

   Jede Beschriftung, Farbe und Verhaltensweise unten ist eine Theme-Editor-Einstellung am Block selbst.

Quantity Break Table

Listet jede Stufe eines Mengenrabatt-Angebots als Tabelle auf der Produktseite auf: die Menge, was der Käufer bekommt, und den Preis.

General

• Border color — der Rahmen der Tabelle. Standard #d9d9d9.
• Roundness — Eckenradius, 0–24 px. Standard 8.
• Borderless — standardmäßig aus. Eingeschaltet entfällt der Rahmen.

Header

• Header background — leer nutzt den Standard des Designs.
• Header text — die Textfarbe der Kopfzeile.

Body

• Cell padding — 4–32 px. Standard 14.
• Body background
• Body text
• Highlight unlocked tier — standardmäßig an. Hebt die Zeile hervor, die zur gewählten Menge passt.
• Highlight color — Standard #e8f5e9.

Columns

• Display quantities as range — standardmäßig aus. Eingeschaltet zeigt es “2–4” statt “2+”.
• Quantity label template — zum Beispiel Buy {quantity}+; {quantity} wird automatisch ersetzt. Leer bleibt es bei “2+”. Bereiche sind davon unberührt.
• Quantity label — Standard “Buy”.
• Show savings column — standardmäßig an. Bei Betragsrabatt-Angeboten immer sichtbar.
• Savings label — Standard “Get”.
• Off-each label — Standard “off each”. Wird bei prozentualen Angeboten verwendet.
• Amount-off label — Standard “off”. Wird bei Betragsrabatt-Angeboten verwendet; der Betrag ist die Summe für die qualifizierenden Artikel, der Standard spricht also vom Gesamtbetrag, nie vom einzelnen Artikel.
• Fixed-price label — Standard “each”. Wird bei Festpreis-Angeboten verwendet.
• Show prices column — standardmäßig an. Wird bei Betragsrabatt-Angeboten und bei Produkten mit über 50 Varianten automatisch ausgeblendet.
• Price label — Standard “Price”.
• Show original price — standardmäßig an. Streicht den vollen Preis neben jedem reduzierten Preis durch.
• Show base row — standardmäßig an. Fügt eine Zeile zum vollen Preis für Mengen unterhalb der ersten Stufe hinzu.

Message

• Code hint prefix — Standard “Use code”. Wird nur bei Code-Rabatten gezeigt.
• Linked message — optionaler Text über oder unter der Tabelle.
• Message position — Above oder Below. Standard Below.

Quantity Break Picker

Dasselbe Angebot als antippbare Angebotskarten, aus denen der Käufer wählt und in einem Zug in den Warenkorb legt.

General

• Heading — Standard “Choose your bundle”.
• Card border — Standard #d9d9d9.
• Selected accent — Rahmen- und Auswahlknopffarbe der gewählten Karte.
• Roundness — 0–24 px. Standard 8.
• Card padding — 4–32 px. Standard 14.
• Card background
• Card text

Cards

• Show single-item card — standardmäßig an. Fügt über den Stufen eine Karte “Buy 1” hinzu.
• Single-item label — Standard “Buy 1”.
• Pre-selected tier — 0–10. Standard 0, was die Standardauswahl beibehält. Zählt nur Stufen, die tatsächlich erscheinen, eine verborgene Stufe wird also nie vorausgewählt.
• Tier label — Standard Buy {quantity}; {quantity} wird automatisch ersetzt.
• Off-each label — Standard “off each”. Wird bei prozentualen Angeboten verwendet.
• Amount-off label — Standard “off”. Wird bei Betragsrabatt-Angeboten verwendet, als Aussage über den Gesamtbetrag.
• Fixed-price label — Standard “each”. Wird bei Festpreis-Angeboten verwendet (Preis je Artikel).
• Per-product suffix — Standard “of the same product”. Wird gezeigt, wenn das Angebot je Produkt zählt.
• Per-variant suffix — Standard “of the same variant”. Wird gezeigt, wenn das Angebot je Variante zählt.
• Show unit prices — standardmäßig an. Wird bei Betragsrabatt-Angeboten und bei Produkten mit über 50 Varianten automatisch ausgeblendet.
• Show original price — standardmäßig an. Streicht den vollen Preis über jedem reduzierten Preis durch.
• Each label — Standard “each”.
• Most popular tier — 0–10. Standard 0 = keine Kennzeichnung; 1 = die erste Stufe.
• Most popular text — Standard “Most popular”.
• Most popular background — Standard #1a1a1a.
• Most popular text color — Standard #ffffff.

Button

• Button text — Standard “Add to cart”.
• Added text — Standard “Added!”.
• Unavailable text — Standard “Unavailable”.
• After adding to cart — Go to the cart page (der Standard), Refresh the page (damit das Theme die neue Warenkorb-Anzahl zeigt) oder Stay on this page (zeigt eine Bestätigung mit einem Link zum Warenkorb).
• In-cart text — Standard {count} in cart. Wird nach dem Hinzufügen gezeigt, wenn du auf der Seite bleibst; {count} ist, wie viele der hinzugefügten Artikel im Warenkorb sind.
• Cart link text — Standard “View cart”.
• Button background — Standard #1a1a1a.
• Button text color — Standard #ffffff.

Message

• Code hint prefix — Standard “Use code”. Wird nur bei Code-Rabatten gezeigt.
• Linked message — optionaler Text über oder unter den Karten.

Bundle composer

• Let shoppers mix variants per tier — standardmäßig aus. Eingeschaltet zeigt die gewählte Stufe eine Zeile je Artikel, damit Käufer das Bundle zusammenstellen. Wird bei Angeboten je Variante nicht gezeigt.
• Bundle button text — Standard “Add bundle”.
• Items word — Standard “items”. Wird verwendet, wenn sich keine Geldsumme zeigen lässt: “Add bundle • 3 items”.
• Unresolved text — Standard “Choose options”.
• Message position — Above oder Below. Standard Below.

Spend More Save More

Listet jede Ausgabenstufe eines Angebots „Mehr ausgeben, mehr sparen“ auf der Produktseite auf: gib so viel aus, bekomme so viel Nachlass.

General

• Border color — Standard #d9d9d9.
• Roundness — 0–24 px. Standard 8.
• Borderless — standardmäßig aus.

Header

• Header background — leer nutzt den Standard des Designs.
• Header text

Body

• Cell padding — 4–32 px. Standard 14.
• Body background
• Body text
• Highlight unlocked tier — standardmäßig an. Hebt die höchste Stufe hervor, die der Warenkorb erreicht hat.
• Highlight color — Standard #e8f5e9.

Columns

• Spend label — Standard “Spend”.
• Savings label — Standard “Get”.
• Off-the-order label — Standard “off the order”.
• Off eligible items label — Standard “off eligible items”. Wird statt der Off-the-order-Beschriftung verwendet, wenn der Rabatt einzelne Artikel ausschließt.

Message

• Code hint prefix — Standard “Use code”. Wird nur bei Code-Rabatten gezeigt.
• Linked message — optionaler Text über oder unter der Tabelle.
• Message position — Above oder Below. Standard Below.

Custom theme selectors

Sale Badges und Price Drops finden ihren Platz in deinem Theme automatisch. Bei einem Theme, wo das nicht klappt, öffnet Theme selectors auf der Seite Promotions ein Fenster mit drei optionalen CSS-Selektoren, die die App auf die eigenen Elemente deines Themes zeigen lassen:

• Badge container in product cards — das Element in jeder Produktkarte, an dem Badges haften. Ein Eintrag deckt jede Seite ab, die Produktkarten zeigt.
• Price element on the product page — das Element, das den Preis auf einer Produktseite hält, wo der reduzierte Preis erscheint.
• Price element in product cards — das Element, das den Preis in jeder Produktkarte hält.

Lass ein Feld leer, um die automatische Platzierung beizubehalten. Jeder Selektor hat höchstens 200 Zeichen und muss ein gültiger CSS-Selektor sein — das Feld sagt es inline, wenn er es nicht ist. Ein Selektor, der auf nichts passt, fällt auf die automatische Platzierung zurück, und ein Selektor, der keinen Preis enthält, zeichnet lieber nichts, als eine falsche Zahl durchzustreichen.

So sieht es der Käufer

Jeder Block rendert auf der Produktseite an dem Platz, an den du ihn gesetzt hast, mit den echten Stufen des Angebots. Der Picker legt Artikel außerdem direkt in den Warenkorb. Wenn das Angebot das Produkt vor dem Käufer nicht abdeckt oder das Angebot pausiert oder vorbei ist, zeigt der Block nichts statt einer veralteten Aussage.

Limits und Hinweise

• Ein Widget je Produkt. Decken zwei Angebote mit eingeschalteter Anzeige dasselbe Produkt ab, wird dort nur ein Widget gezeigt. Die Karte Show on storefront des Rabatts zählt sie und bietet Choose which one shows an. Jeder Rabatt greift weiterhin nach seinen eigenen Bedingungen.
• Preise werden über 50 Varianten ausgeblendet. Die Preisspalte und die Stückpreise des Pickers werden bei Betragsrabatt-Angeboten und bei Produkten mit mehr als 50 Varianten automatisch ausgeblendet.
• Das Angebot zu pausieren blendet das Widget aus — die Karte sagt dann “Not shown (offer paused)” und bietet den Schalter nicht mehr an, ein pausiertes Angebot kann also nie aktiv aussehen.
• Der Anzeigeschalter betrifft nur die Anzeige. Show on storefront auszuschalten blendet das Widget aus; der Rabatt greift weiterhin. Um den Rabatt zu stoppen, pausiere das Angebot.
• Theme selectors gelten für den ganzen Shop, nicht je Promotion: sie zu speichern ändert die Platzierung für jedes Sale Badge und jeden Price Drop im Shop.

Verwandte Themen

• Warenkorb-Zielleiste — der vierte Block, der den Fortschritt zur nächsten Ausgabenstufe zeigt.
• Mengenrabatt — der Rabatt hinter Tabelle und Picker.
• Mehr ausgeben, mehr sparen — der Rabatt hinter der Ausgabentabelle.
• Preisliste — der andere Rabatt, der die Stufentabelle speist.
• App embed — nötig für Badges und Price Drops, nicht für diese Blöcke.