When you create a subscription plan in Subi, a subscription widget is automatically added to your product page.

You can fully customize this widget to:

All customization settings are available inside the Storefront section of Subi.
​

You can now manage all widget settings.
​

Most of your customers shop on their phones, so the widget editor opens with your widget shown on a phone-sized product page. This applies to the Subscribe & save widget, the Membership widget and the Volume discount widget.

To see the widget on a desktop-sized product page instead, click the phone button at the top right of the editor. Click it again to go back to the phone preview. The editor opens on the phone preview again the next time you open it.

The full-width widgets (Build a box, Fixed bundle, Included products and the Access denied page) always open on the desktop-sized preview and have no phone button.

In the phone preview, the subscription details open when you hover over them, as they do on a computer. On a real phone your customers tap to open them.

A blue box in the preview marks the part of the widget you are editing, with the setting's name on a blue tab above it. When the editor opens, the box surrounds the whole widget. When you click a setting in the Design tab, such as Purchase option default or Description, the box moves to the part of the widget that setting changes.

Settings that change the whole widget, such as Appearance, Widget position and Custom CSS, keep the box around the whole widget. On the Subscribe & save widget the box marks individual parts; on the other widget types it marks the whole widget.

Yes. The undo and redo arrows at the top right of the editor, next to the phone button, step back and forward through the changes you made since you opened the editor, in every tab. Typing in a field counts as one change. Undo back to your saved settings and the Save bar disappears.

The arrows are dimmed when there is nothing to undo or redo. Switching to another widget type starts a fresh history.

You have four widget styles to choose from for the Subscribe & Save subscription. Select your preferred style, then click on Live Widget to see how it appears on your product page.

You can control how purchase options appear inside the widget.

Choose which option is automatically selected when customers land on the product page:

The selected option will be pre-selected for every shopper.
​

You can also control which option appears first:

This allows you to prioritize subscription sales if desired.
​

You can customize how subscription information appears inside the widget.

Choose how descriptions are shown:

Tooltips are useful if you prefer a cleaner layout while still providing additional information when customers hover or click.
​

You can control whether the main product price is displayed and dynamically synced with the selected purchase option.
​

The price updates automatically depending on whether the customer selects:

The product price changes based on the selected option.
​

Example:
$20.70 $23.00
Badge: Save 10%

The price reflects the one-time purchase amount.
​

Your subscription widget can show the saving in money next to the percent, so customers see what they save on every delivery. For example, on a $67.00 product with a 20% subscription discount, the plan reads Save $13.40 (20%) instead of Save 20%. The setting is Show saving as an amount, right under Show product price in the widget customization settings, and it is on by default.

If you need assistance customizing your widget: