Configuring the Product Page subscription widget
Style the subscribe-vs-one-time selector that appears on your product pages — labels, layout, colours, fonts, benefits, and spacing.
The Product Page widget is the subscribe-vs-one-time selector that appears on every product page where you've enabled subscriptions. It's where customers see Subscribe & save 10% — every month / One-time purchase $X, pick a cadence, and add to cart.
This article is the field-by-field reference for the editor that styles and labels that widget. For where the widget lives in your theme and how to add it to product templates, see Adding the subscription widget to your product pages. For the customer's account-page subscription card, see Configuring the Customer Subscriptions widget (legacy customer accounts) or Configuring the Subscription Management block (new customer accounts).
What the widget controls (and what it doesn't)
The widget controls the purchase-option area only — the radio or dropdown that lets customers pick between one-time purchase and a subscription cadence. It doesn't replace, restyle, or override the Add to Cart button — that stays whatever your theme provides. The customer's selection in the widget feeds through to the theme's Add to Cart action.
Frequency option titles — for example, Delivered every month and Delivered every 2 months — come from the plan, not from this editor. To change a frequency's display name, edit the plan in Roadmap → Subscriptions → Plans → [the plan] under Delivery options & discounts.
Where to find it
In Roadmap, open Subscriptions, then Edit Subscription Widget in the top-right, and select the Product Page editor from the page selector at the top.
How the editor is laid out
A live preview of the widget on the left, a Settings panel on the right with five collapsible groups: Widget Display, Fonts, Price & Benefits, Background & Borders, Spacing. Edits in Settings reflect in the preview immediately so you can see the impact before saving.
A note at the bottom of the editor reminds you that these settings only apply when each product template has the block set to Use Config From: From Admin in the theme editor. Templates set to From Blocks instead use per-block overrides — see Adding the subscription widget to your product pages.
Settings panel: Widget Display
Labels, ordering, and selection visuals.
Primary title
Headline above the purchase options. Common choices: Purchase Options, Choose how to buy, or blank.
One-time purchase label
The label for the buy-once option. Defaults to One-time purchase.
Option order
Whether one-time or subscribe is shown first. Most stores lead with subscribe to highlight the discount.
Frequency display
Radio buttons or dropdown.
Hide frequency options until selected
When on, the frequency picker is hidden until the customer picks the subscribe radio. Useful for a tidy default state on mobile.
Outer selector ring colour
Border colour around each radio option.
Inner selection colour
Dot colour that fills the selected option. Use your brand accent for native feel.
Selector size
Pixel size of the radio circles. Larger reads friendlier. Smaller reads more refined.
Dot style
Visual style of the selected-option indicator — small, medium, or large fill.
Settings panel: Fonts
Type controls for the widget's labels. Two sub-groups: Primary — titles and option labels — and Paragraph — supporting copy and benefits.
For each sub-group:
Text size
Font size in px.
Text color
Color for the text in this group.
Font weight
Weight, for example 400 Normal, 500 Medium, or 700 Bold.
By default the widget inherits the theme's font family. These overrides only adjust size, color, and weight — not the family itself.
Settings panel: Price & Benefits
How the subscription discount and value props are communicated. Three sub-sections: Price, Benefits, Benefit Styling, Benefit Spacing, and Notes.
Price
Price color
Color of the displayed price.
Price font size
Size in px.
Price font weight
Weight, for example Normal or Medium.
Benefits
A bulleted value-prop list that appears under the subscribe option. You manage the lines directly in the editor, or override them per product with a metafield.
Subtitle
Optional one-line lead-in, for example Your order includes: shown above the bullets.
Subtitle text size / color / font weight
Type controls for the subtitle.
Benefit list style
Tick Marks (✓), plain bullets, or none.
Benefits (list)
Add lines individually with + Add. Each row is one benefit, for example Save 15% on every order, Free shipping, or Cancel anytime.
Benefits metafield
Optional. A product metafield of type list.single_line_text_field. When set on a product, overrides the admin benefit list for that product specifically. The preview always shows the admin list, not the metafield.
Benefit Styling
Text color
Benefit row text color.
Icon color
Tick or bullet icon color.
Font size / Font weight
Type controls for the benefit text.
Icon size
Size of the leading icon in px.
Item spacing
Vertical gap between benefit rows in px.
Benefit Spacing
Show benefit spacing indicators in preview
Preview-only overlay that shows the padding values as coloured rectangles. Helps with alignment; never visible on the live site.
Space above subtitle
Padding above the subtitle and benefits content.
Padding left / Padding right
Inset of the benefit content from the option container.
Notes
A short HTML-supported note that displays below the benefits area. Useful for fine-print messaging like Pause or cancel anytime in your account.
Note color
Text color for the note.
Subscription note (supports HTML)
Free-text field that accepts inline HTML tags like <b>, <i>, <br>, <ul>, <li>, <a>, and <span>.
Settings panel: Background & Borders
The container wrapping each option and the wrapper around all of them.
Outer border color
Border around the widget container.
Background block color
Fill color of the entire widget container.
Selected option background
Fill colour of the option the customer has currently picked. It lifts it visually.
Outer border thickness
Border width in px.
Outer border radius
Corner-rounding of the widget container in px.
A separate Divider sub-group controls the line between the subscribe option and the one-time option:
Divider/line-break color
Divider color.
Divider thickness
Line width in px.
Divider style
Solid, Dashed, or Dotted.
Settings panel: Spacing
Show spacing indicators in preview
Preview-only overlay showing padding values as coloured rectangles. Off by default; never visible on the live site.
Option vertical padding
Top and bottom padding inside each option row in px. Controls how tall each row reads.
What customers see
A widget on the product page with two top-level options:
Subscribe & save — or your custom label — showing the available cadences and their discounts.
One-time purchase showing the regular price.
When the customer picks subscribe and a cadence, the Add to Cart button uses the subscription price. From there it's a normal Shopify checkout.
How styling cascades
The widget inherits fonts — family — and base layout from your Shopify theme by default. Anything you set in this editor — colors, sizes, weights, padding, border treatments, and benefit copy — overrides the theme for the widget specifically.
For per-template overrides, for example a different colour scheme on your gift-card product template, set the block in the theme editor to Use Config From: From Blocks and configure that block's settings instead. Most stores stay on From Admin so a single change in Roadmap propagates everywhere.
Common scenarios
The widget looks fine but customers say they're confused about the discount
Check the Price & Benefits group. Most confusion comes from the per-cycle savings language being ambiguous, or from the discount not being visible next to the cadence. Add explicit benefit lines like Save 15% on every order and Free shipping to make the value clear.
I want one-time purchase to be the default
Set Option order to lead with one-time. This both shows it first and pre-selects it. Subscribe and save remains available below.
The widget colors don't match my theme
The Outer selector ring color and Inner selection color are the two most visible color choices. Match them to your theme's accent or button color for the most native look.
The widget is too tall on mobile
Turn on Hide frequency options until selected in Widget Display. The widget collapses until the customer picks subscribe, then expands to show cadences.
I changed a frequency name in this editor and it didn't take effect
Frequency names aren't set in this editor — they live on the plan. Open Roadmap → Subscriptions → Plans, edit the plan's Plan name column under each frequency row, and the new name flows into the widget automatically.
I want different benefits for one specific product
Use the Benefits metafield. Add a metafield of type list.single_line_text_field to the product, for example custom.subscription_benefits, set the metafield key in the editor, and that product's widget shows the metafield list instead of the admin list. Other products continue to use the admin list.
Related guides
Last updated