Customise subscription widget
The subscription widget is what customers see on your product pages. You can change its layout and styling so it matches your brand. All styling lives in the Design tab of the campaign editor, and a live preview on the right updates as you make changes.
Before styling, set up your offer first — see How to Create a Subscription Campaign.
Step 1: Choose a Widget Style
The Widget style controls the overall layout. Pick one:
| Style | What it looks like |
|---|---|
| Detailed | Each subscription option is shown as its own separate block — best when you want every plan fully visible. |
| Grouped | Subscription options are grouped together under one heading, with a toggle or dropdown to switch between them. Compact and tidy. |
| Minimal | A stripped-back layout with just the essentials. |
If you choose Grouped, you also set:
- Subscription option name — the heading shown above the grouped options.
- Delivery cadence selection — whether customers switch between frequencies with a Toggle or a Dropdown.
- Deliver every text — the wording shown next to the cadence.
Step 2: Pick a Template
On the Design tab, choose a Template as your starting point:
- Grey
- Shadow
- Dark
- Border
- Custom
The first four are ready-made looks. Choose Custom if you want full control over every colour, border, and text style.
Then set the Corner style — Rounded or Sharp — to match how rounded the rest of your store looks.
Step 3: Fine-Tune the Design (Custom)
With Custom selected, you can adjust each part of the widget individually. Most elements let you set a colour, text size, and bold on or off.
Depending on your widget style and options, you can style:
- Widget name — the heading text.
- Border and background — border size and colour, background colour, and an optional drop shadow.
- Option text — the customer-facing text for each subscription option.
- Price and strike-through price — the subscription price and the crossed-out original price.
- Selected option — a separate style for the option the customer has chosen, so it stands out.
- Highlight — the highlight label's text and background (if you enabled a highlight on an option).
- Badge — the badge's text, background, border, and shadow (if you enabled a badge).
- Description text — styling for the plan description.
- One-time purchase — its own styling (in the Grouped style).
Tip: The live preview reflects every change instantly. Use it to check the widget on the option states customers will actually see.
Step 4: Custom CSS (Advanced)
If you need styling beyond the built-in controls, add your own rules in the Custom CSS field at the bottom of the Design tab. This is optional and intended for users comfortable with CSS.
Saving and Publishing
A save bar appears at the top whenever you have unsaved changes. Click Save to keep them, or Publish to make the campaign live. See How to Create a Subscription Campaign for the full publish flow.
Last updated June 2026