1. What the widget does
The widget is the subscribe-and-save block that renders on product pages. It shows the shopper their choice — one-time purchase or subscription — with the frequencies, discounts and savings from your selling plans, then hands the chosen selling plan to the cart so checkout creates a real subscription contract.
Out of the box it includes:
- Frequency selector — your plans as buttons, pills or a dropdown, each showing its savings.
- Price display — the discounted subscription price with the crossed-out original.
- Savings badge — a "Save up to X%" flag surfacing your best discount.
- Recommended plan — your recommended frequency is badged and pre-selected.
- Benefit bullets and a trust row — "Cancel anytime", "Free shipping", whatever you write.
- Prepaid presentation — prepaid plans get a badge and show plan length and price per delivery.
2. Placing the widget on your theme
Option A — the one-click setup (recommended)
1 Open Sublyra admin → Setup.
2 Complete step 2 of the checklist, Add the widget to your product pages. One click places the Subscribe & Save block on your live theme, just above the Add to cart button — no theme editing.
3 Finish the checklist by placing a test order so you see the whole flow as a shopper would.
Option B — the theme editor (manual control)
1 Go to Online Store → Themes → Customize.
2 Open a product template.
3 Add the Subscribe & Save app block where you want it — typically directly above the buy buttons.
4 Save the theme.
The widget settings page in the app has a Customize placement in theme editor button that deep-links straight into the editor for your live theme.
3. App embed vs block — which to use
Sublyra ships two ways to render the widget. They produce the same result; they differ in how placement works.
| App embed ("Sublyra Subscribe & Save") | Block ("Subscribe & Save") | |
|---|---|---|
| Where you enable it | Theme editor → App embeds panel → toggle on | Theme editor → product template → add block |
| Placement | Automatic — renders on every product page with a subscription offer and lifts itself above the buy buttons | Exactly where you put it; optional "Move above the buy buttons automatically" setting |
| Best for | Zero-configuration setup, vintage themes, stores that want the standard position | Designers who want the widget in a precise spot in the layout |
| Extras | Also powers collection-page quick subscribe | Per-template control (different templates, different positions) |
4. Customization options
Everything below lives in Sublyra admin → Settings → Product page widget. The page has a live preview that updates as you type, with a Desktop/Mobile toggle, and changes go live on your storefront within a minute of saving. A Reset to recommended button restores the defaults we see work across stores.
Content
| Setting | What it does |
|---|---|
| Headline | The widget title shoppers read ("Subscribe & save") |
| One-time label / Frequency label | The wording of the one-time option and the "Deliver every:" line |
| Default selection | Whether the page loads with subscription or one-time pre-selected. Pre-selecting the subscription is the single biggest conversion lever. |
| Savings badge | Show or hide the "Save up to X%" flag; style it as a corner flag, an inline badge, or hidden |
| Crossed-out original price | Strikethrough pricing next to the subscription price |
| Benefit bullets | Checkmark bullets under the selector, one per line — yours to write |
| Savings on each frequency | Shows the discount on every frequency button |
Trust row
A quiet row of reassurances ("Free shipping", "Cancel anytime"), one per line, shown or hidden with a single toggle.
Layout
- Layout: Card (bordered panel), Compact, or Minimal (no outer chrome).
- Frequency selector: Buttons, Pills, or Dropdown. Buttons convert best when you have two or three plans; a dropdown keeps things tidy with more.
Colors & shape
Six color fields (accent, accent text, background, text, muted text, border) plus corner radius, button radius, border width and text scale (85–120%). Match your theme once and the widget looks native.
5. Style presets
Five one-click presets apply a complete theme — colors, radii, layout and selector style together. They're starting points: apply one, then tune individual settings.
| Preset | Character |
|---|---|
| Classic | Bordered card, green accent — the default look |
| Minimal | No outer border, quiet type, pill selector |
| Bold | Heavy borders, big radius, red accent, loud |
| Midnight | Dark surface for dark storefronts |
| Sharp | Square corners, editorial, dropdown selector |
6. Quick subscribe on collection pages
Quick subscribe adds a compact Subscribe & save button to product cards on collection pages. One click adds the product's first subscription offer straight to the cart — the shopper subscribes without ever opening the product page. Cards show the savings against the one-time price.
1 Go to Online Store → Themes → Customize.
2 Open the App embeds panel and enable Sublyra Subscribe & Save.
3 Inside that embed's settings, tick Quick subscribe on collection pages (on by default) and save.
The button only appears on products that actually have a subscription offer — everything else's cards stay untouched. It inherits the accent color and button radius from your widget settings.
7. Storefront behaviour worth knowing
- "Buy it now" hides when subscription is selected. A shopper committing to recurring billing shouldn't be routed through an accelerated one-time checkout — the widget suppresses it for the subscription option.
- The widget only renders where a subscription exists. Products without a selling plan attached show nothing — no empty box, no dead UI.
- Only Sublyra plans appear. If you have selling plans from another app on the same products, the widget filters to your Sublyra groups so shoppers never see duplicate offers.
- Prices are plan prices. What the widget shows is what checkout charges — the discount is a property of the selling plan, not a storefront illusion.
8. FAQ & troubleshooting
The widget isn't showing on a product page. What do I check, in order?
1 The product is attached to a selling plan group — selling plans guide.
2 The block is on the product template, or the app embed is enabled (section 3).
3 The storefront password is off while you test (or preview as a logged-in visitor) — a password page hides everything.
The widget appears twice on the page.
You have both the block and the app embed active. Pick one — see section 3.
I changed colors in the app but the storefront looks the same.
Saved changes project to the storefront within a minute. If it's been longer, hard-refresh the product page (cached HTML) and re-save the widget settings — the app will tell you if the storefront projection failed and asks you to save again.
Can I have different widget wording on different products?
Widget content is store-wide by design. Product-level differences belong in the selling plan names ("Every month — 10% off"), which are per-offer and shown on the frequency buttons.
Does the widget work on vintage (non-OS-2.0) themes?
Yes, via the app embed — it needs no template support and positions itself automatically. The placeable block requires an Online Store 2.0 theme.