Theme-App-Blöcke
Die Gibbond Theme-Erweiterung fügt deinem Storefront drei Bausteine hinzu — ein Warenkorb-Widget, eine Cart-Drawer-Leiste und tier-abhängige Preis-Annotationen. Keine eingeschleusten Skripte; alles ist ein Online Store 2.0 App-Block oder App-Embed, den du im Theme-Editor selbst steuerst.
Das bekommst du
| Block | Typ | Wo er erscheint |
|---|---|---|
| Cart Loyalty Widget | App-Block | Im Template der Warenkorbseite |
| Cart Drawer Loyalty | App-Embed | Im AJAX-Cart-Drawer / Mini-Cart deines Themes |
| Loyalty Price Annotations | App-Embed | Auf jeder Seite — annotiert Preise für Tier-Mitglieder |
App-Block vs. App-Embed. Ein App-Block wird über Block hinzufügen zu einer bestimmten Sektion bzw. einem bestimmten Template hinzugefügt. Ein App-Embed wird global im Panel App-Embeds aktiviert (das Puzzleteil-Symbol unten im linken Panel des Theme-Editors).
1 · Cart Loyalty Widget
Eine ausführliche Treuekarte auf der Warenkorbseite. Angemeldeten Mitgliedern zeigt sie sofort den Punktestand und das Tier-Abzeichen, eine Schätzung der „Punkte, die du sammelst“ mit einer Aufschlüsselung pro Artikel, bestehende Rabattcodes mit Ein-Klick-Anwenden sowie ein Dropdown zum Einlösen von Prämien. Noch nicht angemeldete Kund:innen sehen einen Beitreten-Button; Gäste sehen eine Aufforderung zum Anmelden.
Deine Prämien★ GoldSo fügst du es hinzu
- Online Store → Themes → Anpassen
Öffne dein Theme im Editor.
- Zum Cart-Template wechseln
Öffne über die Template-Auswahl oben das Cart-Template.
- Block hinzufügen → Apps
Klicke in der Warenkorb-Sektion auf Block hinzufügen und wähle Cart Loyalty Widget.
- Positionieren & konfigurieren
Ziehe es an die gewünschte Stelle, passe die Einstellungen unten an und klicke dann auf Speichern.
Einstellungen
| Einstellung | Typ | Standard |
|---|---|---|
| Farbschema | Auswahl (1–4) | scheme-1 |
| Überschrift | Text | Your Rewards |
| Akzentfarbe | Farbe | #4c6ef5 |
| Punkteschätzung anzeigen | Checkbox | on |
| Prämien & Einlösung anzeigen | Checkbox | on |
| Bestehende Rabattcodes anzeigen | Checkbox | on |
| Text der Anmelde-Aufforderung | Text | Sign in to view your loyalty rewards |
2 · Cart Drawer Loyalty
Eine kompakte Leiste, die in den ausklappbaren Cart-Drawer deines Themes eingefügt wird: Punktestand + Tier-Abzeichen + „X Punkte sammeln“ + ein Einlösen-Link für Mitglieder, ein Beitreten-Button für noch nicht angemeldete Shopper:innen und ein Anmelde-Teaser für Gäste. Sie erscheint, wenn der Drawer geöffnet wird, und entfernt sich wieder, sobald er sich schließt.
So fügst du es hinzu
- Theme-Editor → App-Embeds
Klicke auf das Puzzleteil-Symbol unten im linken Panel.
- „Cart Drawer Loyalty“ einschalten
Klappe es aus, um die Optionen festzulegen, und klicke dann auf Speichern.
Einstellungen
| Einstellung | Typ | Standard |
|---|---|---|
| Akzentfarbe | Farbe | #4c6ef5 |
| CSS-Selektor des Cart-Drawers | Text | cart-drawer, .cart-drawer, #CartDrawer, … |
| Widget-Position | Auswahl | Before checkout button |
Widget erscheint nicht im Drawer? Dein Theme verwendet ein nicht standardmäßiges Drawer-Element. Passe den CSS-Selektor des Cart-Drawers an den Drawer-Container deines Themes an (kommagetrennte Selektoren werden unterstützt).
3 · Loyalty Price Annotations
Für angemeldete Mitglieder, deren Tier einen Rabatt gewährt, kennzeichnet dieser App-Embed die Preise im gesamten Shop — er streicht den Originalpreis durch und zeigt den Tier-Preis als Abzeichen oder Inline-Text an. Er folgt dem STACK- vs. BEST_PRICE-Verhalten deines Tiers und hält die Preise aktuell, selbst während Kund:innen stöbern und filtern.
So fügst du es hinzu
- Theme-Editor → App-Embeds
Öffne das App-Embeds-Panel.
- „Loyalty Price Annotations“ einschalten
Lege die Abzeichenfarbe, den Anzeigestil und (falls nötig) den Preis-Selektor fest und klicke dann auf Speichern.
Einstellungen
| Einstellung | Typ | Standard |
|---|---|---|
| Abzeichenfarbe | Farbe | #8B5CF6 |
| Preis-CSS-Selektor (erweitert) | Text | .price-item--regular, .price .money, … |
| Anzeigestil | Auswahl | Badge / Inline-Text |
Annotationen werden nur für angemeldete Kund:innen in einem Tier mit einem Rabatt größer als null gerendert. Gäste und Kund:innen im Basis-Tier sehen nichts.
Alle Storefront-Texte sind übersetzbar und werden mit zahlreichen Sprachen direkt ab Werk ausgeliefert (Englisch, Deutsch, Französisch, Italienisch, Spanisch, Portugiesisch, Dänisch, Finnisch, Norwegisch, Schwedisch, Polnisch). Kundenseitige Texte werden automatisch an die Storefront-Sprache angepasst.