> For the complete documentation index, see [llms.txt](https://docs.roadmap.so/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.roadmap.so/subscriptions/storefront-and-accounts/configuring-the-product-page-subscription-widget.md).

# 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](/subscriptions/storefront-and-accounts/adding-the-subscription-widget-to-your-product-pages.md). For the customer's account-page subscription card, see [Configuring the Customer Subscriptions widget (legacy customer accounts)](/subscriptions/storefront-and-accounts/configuring-the-customer-subscriptions-widget-legacy-customer-accounts.md) or [Configuring the Subscription Management block (new customer accounts)](/subscriptions/storefront-and-accounts/configuring-the-subscription-management-block-new-customer-accounts.md).

#### 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](/subscriptions/storefront-and-accounts/adding-the-subscription-widget-to-your-product-pages.md).

#### Settings panel: Widget Display

Labels, ordering, and selection visuals.

| Field                                 | Effect                                                                                                                           |
| ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| 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:

| Field       | Effect                                                         |
| ----------- | -------------------------------------------------------------- |
| 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**

| Field             | Effect                                |
| ----------------- | ------------------------------------- |
| 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.

| Field                                    | Effect                                                                                                                                                                                                                  |
| ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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**

| Field                   | Effect                                   |
| ----------------------- | ---------------------------------------- |
| 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**

| Field                                      | Effect                                                                                                                           |
| ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
| 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.`

| Field                             | Effect                                                                                                        |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| 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.

| Field                      | Effect                                                                             |
| -------------------------- | ---------------------------------------------------------------------------------- |
| 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:

| Field                    | Effect                          |
| ------------------------ | ------------------------------- |
| Divider/line-break color | Divider color.                  |
| Divider thickness        | Line width in px.               |
| Divider style            | `Solid`, `Dashed`, or `Dotted`. |

#### Settings panel: Spacing

| Field                              | Effect                                                                                                              |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| 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:

1. **Subscribe & save** — or your custom label — showing the available cadences and their discounts.
2. **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

* [Adding the subscription widget to your product pages](/subscriptions/storefront-and-accounts/adding-the-subscription-widget-to-your-product-pages.md)
* [Subscription plan settings, field by field](/subscriptions/getting-started/subscription-plan-settings-field-by-field.md)
* [Configuring the Customer Subscriptions widget (legacy customer accounts)](/subscriptions/storefront-and-accounts/configuring-the-customer-subscriptions-widget-legacy-customer-accounts.md)
* [Configuring the Subscription Management block (new customer accounts)](/subscriptions/storefront-and-accounts/configuring-the-subscription-management-block-new-customer-accounts.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.roadmap.so/subscriptions/storefront-and-accounts/configuring-the-product-page-subscription-widget.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.