How to Customise the 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 Widget tab of the campaign editor, and a live preview on the right updates as you make changes.
The Widget tab is a stack of cards, one per part of the widget: Layout, Text above the widget, Purchase options, One-time purchase, Subscription details tooltip and Custom CSS. In the Grouped layout you also get Subscription option and Delivery options & badges. Open one card at a time.
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:
- How customers pick a plan — whether they switch between frequencies with a Toggle or a Dropdown. This is on the Layout card.
- Option name customers see — the heading above the grouped options, on the Subscription option card.
- Label above the options and each frequency's Toggle label or Dropdown label, on the Delivery options & badges card.
Two more settings on the Layout card are worth knowing: Preselected option chooses which option is selected when the page loads, and the widget style thumbnails let you compare the three layouts before you commit.
Step 2: Pick a Template
On the Layout card, 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.
Note: picking a ready-made template overwrites the colours and borders you have set. Changing any design field yourself switches the template to Custom. Your custom look is remembered while you stay on the page, but not after you reload, so save before you go exploring templates.
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, open the Custom CSS card at the bottom of the Widget tab and add your own rules. Every class in the widget starts with essub-, for example .essub-campaign-widget for the whole widget and .essub-tooltip for the subscription details icon. Use the expand icon for a bigger editor.
Custom CSS is saved per campaign. If you have several campaigns, copy the block into each one.
The two rules merchants ask for most, full width and hiding the details icon, are in Subscription Widget Not Showing? Checklist and Placement and Widget Wording, Translations and the Subscription Details Tooltip. If you would rather not write CSS, contact support and we will do it for you.
Saving and Publishing
Note: the preview uses a sample price, not your product's price. A campaign covering products at different prices has no single price to show. Your live product pages use each product's real price.
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.