Tema-app-blokke
Gibbond-temaudvidelsen tilføjer tre dele til din storefront — en kurv-widget, en stribe til kurv-skuffen og prismarkeringer, der kender kundens tier. Ingen injicerede scripts; alt er en Online Store 2.0 app-blok eller app-embed, som du styrer fra temaeditoren.
Det får du
| Blok | Type | Hvor den vises |
|---|---|---|
| Cart Loyalty Widget | App-blok | Inde i kurvesidens skabelon |
| Cart Drawer Loyalty | App-embed | Dit temas AJAX-kurv-skuffe / mini-kurv |
| Loyalty Price Annotations | App-embed | Hver side — markerer priser for tier-medlemmer |
App-blok vs. app-embed. En app-blok tilføjes til en bestemt sektion/skabelon via Tilføj blok. En app-embed slås til globalt fra panelet App-embeds (puslespilsbrik-ikonet nederst i venstre panel i temaeditoren).
1 · Cart Loyalty Widget
Et flot loyalitetskort på kurvesiden. For medlemmer, der er logget ind, viser det saldoen og tier-badget med det samme, et estimat over “point, du optjener” med en opdeling pr. vare, eksisterende rabatkoder med ét-klik-Anvend og en rewards-dropdown til indløsning. Kunder, der ikke er tilmeldt, ser en Tilmeld-knap; gæster ser en log ind-besked.
Dine rewards★ GoldSådan tilføjer du den
- Online Store → Temaer → Tilpas
Åbn dit tema i editoren.
- Skift til Cart-skabelonen
Brug skabelonvælgeren øverst til at åbne Cart.
- Tilføj blok → Apps
I kurvesektionen klikker du på Tilføj blok og vælger Cart Loyalty Widget.
- Placér & konfigurér
Træk den hen, hvor du vil have den, justér indstillingerne nedenfor, og Gem.
Indstillinger
| Indstilling | Type | Standard |
|---|---|---|
| Farveskema | vælg (1–4) | scheme-1 |
| Overskrift | tekst | Your Rewards |
| Accentfarve | farve | #4c6ef5 |
| Vis pointestimat | afkrydsningsfelt | on |
| Vis rewards & indløsning | afkrydsningsfelt | on |
| Vis eksisterende rabatkoder | afkrydsningsfelt | on |
| Tekst til log ind-besked | tekst | Sign in to view your loyalty rewards |
2 · Cart Drawer Loyalty
En kompakt stribe, der indsættes i dit temas udskydelige kurv-skuffe: saldo + tier-badge + “Optjen X point” + et Indløs-link for medlemmer, en Tilmeld-knap for shoppere, der ikke er tilmeldt, og en log ind-teaser for gæster. Den vises, når skuffen åbnes, og fjerner sig selv, når den lukkes.
Sådan tilføjer du den
- Temaeditor → App-embeds
Klik på puslespilsbrik-ikonet nederst i venstre panel.
- Slå “Cart Drawer Loyalty” til
Fold den ud for at sætte indstillinger, og Gem.
Indstillinger
| Indstilling | Type | Standard |
|---|---|---|
| Accentfarve | farve | #4c6ef5 |
| CSS-selector til kurv-skuffe | tekst | cart-drawer, .cart-drawer, #CartDrawer, … |
| Widgetplacering | vælg | Before checkout button |
Vises widgetten ikke i skuffen? Dit tema bruger et ikke-standard skuffe-element. Opdatér CSS-selector til kurv-skuffe, så den matcher dit temas skuffe-container (kommaseparerede selectors understøttes).
3 · Loyalty Price Annotations
For medlemmer, der er logget ind, og hvis tier giver en rabat, markerer denne app-embed priserne i hele butikken — den streger den oprindelige pris over og viser tier-prisen som et badge eller inline-tekst. Den følger dit tiers STACK vs. BEST_PRICE-adfærd og holder priserne opdateret, selv mens kunderne browser og filtrerer.
Sådan tilføjer du den
- Temaeditor → App-embeds
Åbn panelet App-embeds.
- Slå “Loyalty Price Annotations” til
Sæt badgefarve, visningsstil og (om nødvendigt) prisselectoren, og Gem.
Indstillinger
| Indstilling | Type | Standard |
|---|---|---|
| Badgefarve | farve | #8B5CF6 |
| CSS-selector til pris (avanceret) | tekst | .price-item--regular, .price .money, … |
| Visningsstil | vælg | Badge / Inline-tekst |
Markeringer vises kun for kunder, der er logget ind på et tier med en rabat større end nul. Gæster og kunder på basis-tier ser ingenting.
Alle storefront-tekster kan oversættes og leveres med mange sprog ud af boksen (engelsk, tysk, fransk, italiensk, spansk, portugisisk, dansk, finsk, norsk, svensk, polsk). Kundevendt tekst lokaliseres automatisk efter storefrontens sprog.