How to customize the SMART Subscriptions widget

Updated November 1, 2026 · SMART Subscriptions (E-TRADE PARTNER)

Open Widget in SMART Subscriptions to style the product-page purchase options with a live preview: texts, colors, spacing, typography, the sale badge, the price before discount, custom CSS, and translations. You can also select subscription by default or hide one-time purchase; both settings apply to every product with a SMART plan.

A coffee brand launches monthly beans with 10% off for subscribers. The plan is assigned and the Subscriptions Widget is on the product template, but the widget still looks generic: default labels, mismatched colors, and one-time purchase selected first. Shoppers skim past the offer.

The fix is widget presentation, not a new billing model. Match your storefront language, make the subscription choice obvious, and only then worry about deeper plan settings like discounts or billing frequencies.

Why widget customization matters

• Plain labels convert better than internal plan names customers do not recognize.
• Brand colors and spacing make the purchase options feel like part of the product page, not a bolted-on app block.
• Translations keep the same offer clear in every storefront language you support.
• Selecting subscription by default steers the default path without changing checkout itself.

What Shopify can and cannot do natively

Shopify selling plans power the subscription choice at checkout, but native admin tools do not give you a product-page purchase-options widget with merchant-controlled text, colors, spacing, CSS, and translations. Theme work alone can show purchase options on some themes, yet it is usually harder to keep labels and defaults consistent across products.

Setup steps in SMART Subscriptions

1. Install SMART Subscriptions and create a plan in Plans. Each subscription option’s Label is the name shoppers see in the widget.
2. From the Setup Guide on Home, open the theme editor and add the Subscriptions Widget app block to the live product template.
3. Open Widget. Edit the title, one-time purchase text, discount badge (default “SAVE {{ discount_amount }}”), subscription info lines, and interval words.
4. Set colors, spacing, and typography (text sizes and weights) so the block matches your product page. The live preview updates as you go.
5. Turn Show sale badge and Show price before discount on or off.
6. Add custom CSS only when the built-in controls are not enough.
7. Open Manage translations and add text for every storefront language. Translate option labels in Plans.
8. Choose Select subscription by default or Hide one-time purchase option if you want them. Both apply to every product with a SMART plan.
9. Save, hard-refresh the product page, and place a test order. Confirm the selected option and labels match what you configured.

Worked example: subscription-first coffee product page

A roastery sells a 250 g bag as both one-time and monthly subscribe & save. They want the page to lead with “Subscribe & save 10%” in their brand green, keep one-time available as a secondary choice, and show French labels when the storefront language is French.

1. In Plans, set the monthly option’s Label to “Subscribe & save 10%” and assign the bag product.
2. In Widget, turn on Select subscription by default and leave one-time purchase visible.
3. Keep the one-time purchase text as “One-time purchase”, or rewrite it.
4. Set brand green as the selected option background and adjust spacing.
5. Add French one-time purchase text in Manage translations, and French for the option label in Plans.
6. Test the English and French product pages, then complete one checkout on each path.

Shoppers still can buy once, but the default path is the subscription offer, in language that matches the brand.

Practical tips

• Put the discount in the option label when it is part of the offer, or rely on the automatic SAVE badge.
• Use Hide one-time purchase option only if every product with a SMART plan is subscription-only. For single products, check “Only sell this product as a subscription” in Shopify admin; the widget then hides one-time on that product. Details: hide one-time purchase.
• Keep custom CSS small. Use the built-in texts, colors, spacing, and typography controls first.
• After any widget change, retest on mobile. Purchase options are easy to misread on a small screen.
• For the full plan setup path, start with how to set up product subscriptions.
• If you are still learning selling plans, read how Shopify subscriptions work.

Frequently asked questions