Theme app blocks
The Gibbond theme extension adds three storefront pieces — a cart widget, a cart-drawer strip, and tier-aware price annotations. No injected scripts; everything is an Online Store 2.0 app block or app embed you control from the theme editor.
What you get
| Block | Type | Where it appears |
|---|---|---|
| Cart Loyalty Widget | App block | Inside the cart page template |
| Cart Drawer Loyalty | App embed | Your theme's AJAX cart drawer / mini-cart |
| Loyalty Price Annotations | App embed | Every page — annotates prices for tier members |
App block vs app embed. An app block is added to a specific section/template via Add block. An app embed is toggled on globally from the App embeds panel (the puzzle-piece icon at the bottom of the theme editor's left panel).
1 · Cart Loyalty Widget
A rich loyalty card on the cart page. For signed-in members it shows the balance and tier badge instantly, a “points you'll earn” estimate with a per-item breakdown, existing discount codes with one-click Apply, and a rewards dropdown to redeem. Unenrolled customers see a Join button; guests see a sign-in prompt.
Your Rewards★ GoldHow to add it
- Online Store → Themes → Customize
Open your theme in the editor.
- Switch to the Cart template
Use the top template selector to open Cart.
- Add block → Apps
In the cart section, click Add block and choose Cart Loyalty Widget.
- Position & configure
Drag it where you want, adjust the settings below, then Save.
Settings
| Setting | Type | Default |
|---|---|---|
| Color scheme | select (1–4) | scheme-1 |
| Heading | text | Your Rewards |
| Accent color | color | #4c6ef5 |
| Show points estimate | checkbox | on |
| Show rewards & redemption | checkbox | on |
| Show existing discount codes | checkbox | on |
| Sign-in prompt text | text | Sign in to view your loyalty rewards |
2 · Cart Drawer Loyalty
A compact strip injected into your theme's slide-out cart drawer: balance + tier badge + “Earn X points” + a Redeem link for members, a Join button for unenrolled shoppers, and a sign-in teaser for guests. It appears when the drawer opens and removes itself when it closes.
How to add it
- Theme editor → App embeds
Click the puzzle-piece icon at the bottom of the left panel.
- Toggle “Cart Drawer Loyalty” on
Expand it to set options, then Save.
Settings
| Setting | Type | Default |
|---|---|---|
| Accent color | color | #4c6ef5 |
| Cart drawer CSS selector | text | cart-drawer, .cart-drawer, #CartDrawer, … |
| Widget position | select | Before checkout button |
Widget not showing in the drawer? Your theme uses a non-standard drawer element. Update the Cart drawer CSS selector to match your theme's drawer container (comma-separated selectors are supported).
3 · Loyalty Price Annotations
For signed-in members whose tier grants a discount, this app embed marks up prices across the store — striking through the original price and showing the tier price as a badge or inline text. It follows your tier's STACK vs BEST_PRICE behaviour and keeps prices updated even as customers browse and filter.
How to add it
- Theme editor → App embeds
Open the App embeds panel.
- Toggle “Loyalty Price Annotations” on
Set the badge color, display style and (if needed) the price selector, then Save.
Settings
| Setting | Type | Default |
|---|---|---|
| Badge color | color | #8B5CF6 |
| Price CSS selector (advanced) | text | .price-item--regular, .price .money, … |
| Display style | select | Badge / Inline text |
Annotations only render for logged-in customers on a tier with a discount greater than zero. Guests and base-tier customers see nothing.
All storefront strings are translatable and ship with many languages out of the box (English, German, French, Italian, Spanish, Portuguese, Danish, Finnish, Norwegian, Swedish, Polish). Customer-facing text localizes automatically with the storefront language.