Once the Force Subscriptions widget is live on your product page, the real work of making it match your brand happens inside the widget editor itself. Click Edit template on your active layout and you'll find four tabs which include Themes, Text, Design and Extras that control everything from color palettes down to individual pixel spacing.
This guide breaks down what each tab does and how to use it, so you can style the subscription widget to match your store without writing a line of code.

The Widget Editor Layout

Before diving into each tab, it helps to know how the editor is laid out. On the left, you have your four customization tabs. On the right, a Live Preview panel shows exactly how the widget will look, updating in real time as you make changes, so you never have to guess or refresh to see a result. You can also toggle between Desktop and Mobile previews at the top to check both layouts before publishing.

1. Themes Tab: Pick a Starting Color Palette

The Themes tab is the fastest way to restyle the entire widget in one click. Instead of setting colors one by one, you pick a pre-built color theme and every card, badge, and accent updates to match. Force Subscriptions ships with ten themes, ranging from soft and neutral to bold and vibrant, so most brand palettes have a close starting match.
The available themes include:

1. Lavender Classic — soft purple accents with balanced card spacing (12px radius, 10px spacing).
2. Ocean Breeze — cool blues with crisp corners and airy spacing (10px radius, 12px spacing).
3. Forest Fresh — natural greens with a compact, grounded feel (8px radius, 8px spacing).
4. Warm Sunset — bold coral tones with rounded purchase cards (16px radius, 14px spacing).
5. Royal Voltage — high-impact violet for premium subscription brands (14px radius, 10px spacing).
6. Coral Crush — punchy rose and peach tones that pop on product pages (18px radius, 12px spacing).
7. Midnight Neon — dark, dramatic ink with electric cyan accents (10px radius, 8px spacing). 
8. Golden Luxe — rich amber tones for a luxury unboxing feel (12px radius, 10px spacing).
9. Neon Lime — electric chartreuse on deep ink for a look that's impossible to ignore (8px radius, 14px spacing).
10. Tropical Punch — teal meets hot pink for a playful, summer-ready look (20px radius, 12px spacing).

Each theme card shows a small color strip so you can preview the palette before applying it, along with a short mood tag (Classic, Fresh, Bold, Warm, Dark, Vibrant, Luxury, Electric, Playful) to help you quickly narrow down a style. Click a theme to select it, the currently active one is marked Selected. Applying a theme is a great starting point even if you plan to fine-tune individual colors afterward in the Design tab.

Tip: If your brand has a signature color, start with the theme that's closest to it, then fine-tune specific shades in the Design tab rather than building a palette from scratch. Muted, minimal brands tend to suit Lavender Classic, Ocean Breeze or Forest Fresh while bolder or younger brands often lean toward Royal Voltage, Neon Lime or Tropical Punch.

2. Text Tab: Edit Every Label and Heading

The Text tab controls all the wording shoppers see in the widget, along with basic typography like font size, color, style, and alignment for each text element.

Widget text and block title

At the top of this tab, a Widget text toggle turns text customization on or off. Below it, Block title controls the main heading shown above your purchase options (for example, "PURCHASE OPTIONS"). You can edit the text itself, plus font size, color, bold/italic style, alignment, letter spacing, and the space below the title.

Purchase option labels and prices

Further down, you can rename the core purchase options: the One-time purchase label and the Subscribe and save label. You can also control how the One-time price and Subscription price are displayed next to each option, plus toggle Show block title and Show divider lines beside title on or off.

Links, tooltips, badges, and benefits

Scrolling further, you'll find text fields for the Link label and Tooltip text (the small "i" info link customers can click for more subscription details), Info badge colors, and the Benefits section — editable labels like Cancel anytime, Skip or swap, and Free shipping, which appear under the purchase options when using the split cards + benefits layout.

Every text field shows a character counter (for example, 16/50), so you can keep labels concise and avoid text wrapping awkwardly on smaller screens.

3. Design Tab: Fine-Tune Spacing and Colors

Where the Text tab handles wording, the Design tab handles the visual structure like spacing, shape, and every background or border color in the widget.

Spacing and shape

At the top of the Design tab, sliders let you adjust Corner radius, Card padding, Gap between options, Space below title, Gap between plan options and Plan option radius — all in pixels. These controls determine how rounded, roomy or compact the widget feels.

Card and accent colors

Below spacing, the Cards section lets you set the Card background, Selected card color, Border color, and Label background using hex codes. Just below that, the Badge section controls the Badge background and Badge text colors, and the Delivery frequency picker section controls the Picker background, Option background, Selected option background, Selected option border and Selected accent bar colors.

Tip: Text colors live under the Text tab, not Design — if you're looking to change font colors specifically, head back to Text rather than searching for them here.

4. Extras Tab: Rewards Banners and Card Badges

The Extras tab adds optional promotional elements on top of the core widget.
• Subscription rewards: toggle this on to show a rewards banner below the purchase options, such as a message telling customers their delivery price will be reduced after their first order.
• Card badge: toggle this on to display a small badge (for example, "Most Popular") on the subscription card with editable badge text up to 50 characters.

Both extras are optional but effective — a "Most Popular" badge is a simple way to nudge undecided shoppers toward your preferred plan, and a rewards banner reinforces the savings message right at the point of decision.

Publishing Your Changes

As you edit any tab, Shopify shows an Unsaved changes bar at the top of the screen with Discard and Save buttons. Nothing goes live until you click Save — so feel free to experiment across all four tabs and use the Live Preview to check your work before committing.
Tip: Check both the Desktop and Mobile preview before saving. Spacing and text that look great on desktop can wrap or feel cramped on smaller screens.

FAQs

What's the difference between the Themes tab and the Design tab?

Themes applies a complete pre-built color and spacing palette in one click. Design lets you fine-tune individual settings — specific colors, corner radius, padding, and gaps either from scratch or after starting from a theme.

Can I edit the widget text without any coding knowledge?

Yes. Every label, heading, and button in the widget is editable through simple text fields in the Text tab, with no code required.

Do the Extras (rewards banner and badge) cost extra to use?

These are built-in customization options inside the Widget editor. Availability may depend on your Force Subscriptions plan, so check your current plan's features if a toggle appears greyed out.

Will my changes go live immediately?

No. Changes only apply after you click Save in the Unsaved changes bar. You can preview edits safely in the Live Preview panel before publishing.

Final Verdict

Between the Themes, Text, Design, and Extras tabs, the Force Subscriptions widget editor gives you enough control to match almost any store's branding without touching a single line of CSS. Start with a theme that's close to your brand colors, refine the wording and spacing to fit your voice, and use the Extras tab to add a little extra nudge toward your best-selling plan.

Updated on: 10/08/2026