Setting up the storefront widgets
Stackable’s widgets live in your theme: app blocks you place on product and cart pages, and one app embed that powers the cart-side features. Here is how to turn each on. For the difference between the two, see App embeds explained.
Nothing shows on your storefront until the widgets are enabled in your theme. That is by design: your theme stays untouched until you opt in, widget by widget, in Shopify’s theme editor. The Widgets page inside the app gives you a one-click link to the right spot for each one and shows a live "enabled on your theme" status.
Two kinds of widget
| Widget | Kind | Where you enable it |
|---|---|---|
| Tier table | App block | Added to a section on your product template |
| Sale badge | App block | Added to a section on your product template |
| Sale price | App block | Added to a section on your product template |
| Countdown timer | App block | Added to a section on your product template |
| Buy X get Y (product callout) | App block | Added to a section on your product template |
| Bundle builder | App block | Added to a section on your product template |
| Saving on cart | App block | Added to a section on your cart template |
| Cart progress bar | App embed | Toggled on in the theme editor’s App embeds panel |
| Sticky savings bar | App embed | Same embed, its own on/off setting |
| Free gift auto-add | App embed | Same embed, its own on/off setting |
| Buy X get Y cart nudge | App embed | Same embed, its own on/off setting |
App blocks are pieces you place: you choose the section and position on your product page, and you can style each one in the theme editor. The app embed is a background helper: it has no fixed position of its own and powers the cart progress bar and the free-gift auto-add everywhere.
Enabling a widget
- Open the Widgets page in the Stackable app.
- Click the widget’s theme-editor link. It opens your theme editor at the right place: the product template for blocks, the App embeds panel for the embed.
- For a block: add it where you want it on the page, adjust its settings (colours, copy, style), and save.
- For the embed: flip it on, review its settings, and save.
Widgets also follow your campaign settings
A widget in the theme only shows content when a live campaign asks for it. The tier table and badge have per-campaign toggles on the campaign’s Display step, the countdown needs a campaign with an end date, and the progress bar and gift auto-add need a live spend-based campaign. Theme on + campaign on = visible.
How widgets treat your theme
- They inherit your theme’s fonts and colours by default, with per-widget style settings when you want control.
- They render nothing at all when no campaign matches, so they never leave an empty box on the page.
- They are built to be search-engine safe and to never shift your page layout as they load.
- If your shop publishes multiple languages, widget text can be translated per language from the Widgets page.
Previewing campaigns in the theme editor
The theme editor shows you more than shoppers see. While you are in the editor, Stackable widgets preview draft, scheduled, and paused campaigns as well as live ones, so you can see and style a deal before you turn it on.
A live campaign always wins the preview and renders exactly as shoppers see it. If nothing is live, the editor shows you the next most relevant campaign instead: a scheduled one first, then a paused one, then a draft. That campaign renders in full using all your normal widget settings, so you can adjust colours, copy, and style while previewing it just as you would a live campaign.
A pill tells you what you are looking at
Whenever the editor is showing you a draft, scheduled, or paused campaign, a small pill appears above the widget naming the campaign and its status, for example "Previewing draft campaign: Summer Sale. Shoppers can't see this until you set it live." The pill and the preview it belongs to are visible to you in the theme editor only.
- Shoppers never see a draft, scheduled, or paused campaign, on any device, at any time. What the editor shows you is a preview for your eyes only.
- A draft that is still missing required details, such as a reward that has not been set yet, will not preview until it is finished.
- Campaigns using discount codes rather than automatic discounts still do not render in widgets, in the editor or on your storefront.
- Save your campaign, then switch back to the theme editor to see the preview update.
If no campaign matches at all, whether live, scheduled, paused, or draft, the widget shows a muted note in the editor explaining that it will appear automatically once a matching campaign is live. Shoppers never see that note either; it takes no space on your storefront.
Quick checklist if nothing shows
This checklist is about your live storefront. Checking inside the theme editor itself? See Previewing campaigns in the theme editor above: draft, scheduled, and paused campaigns can preview there too.
- Is the block added (or the embed toggled on) in the theme you are actually previewing?
- Is a campaign live (not draft, scheduled, paused, or ended)?
- Does that campaign target the product you are looking at?
- For the tier table and badge: is the widget toggle on in that campaign’s Display step?
The full walk-through of these cases is in Troubleshooting: My widget is not showing.