The subscription widget is what shoppers see on your product pages: the choice between a one-time purchase and a subscription, the delivery frequencies and the savings. This guide takes you from choosing a design to seeing the widget live on a product page. It takes about 5 minutes.
Before you start: the widget only shows on products that belong to an active subscription plan. If you don't have one yet, see Create a subscription plan.
Step 1: Open the widget settings
- In your Shopify admin, open Apps → RecurX Subscriptions.
- Go to Subscriptions.
- In the Widget card, click Customize widget.
Step 2: Choose a template
The first time you open the widget page, RecurX shows Choose a template. Each card is a live preview built from one of your real plans and products.
- Use the filters (All designs, Supplements, Pet, Beauty, Food & drink, Apparel, Tech, Works anywhere) to see designs suited to your kind of store.
- Click the design you want. RecurX opens the editor for that design.
Tip: You can change the design at any time: click Change template above the preview, or Templates at the top of the editor.
Step 3: Turn on the RecurX app embed
The widget reaches your storefront through an app embed in your theme. The Widget on your store card at the top of the editor tells you whether it's on.
- If the card says Not active, click Open theme editor. Your theme editor opens with the RecurX app embed selected.
You can also get there from Shopify yourself: go to Online Store → Themes and click Edit theme on your current theme.
Step 4: Switch on RecurX Subscriptions and save the theme
- In the theme editor, click the App embeds icon in the left toolbar.
- Type RecurX in Search app embeds.
- Switch on RecurX Subscriptions.
- Click Save in the top right corner.
Note: RecurX Upsells and RecurX Page Gate are separate embeds. You only need them if you use Upsells or members-only pages — see Storefront widgets overview.
Step 5: Check the status in RecurX
Go back to Customize widget in RecurX. The card now shows Active: Your widget shows on product pages through the RecurX app embed. If it still shows the old status, click Check again.
On most themes RecurX places the widget next to your Add to cart button by itself. If your theme doesn't leave room for it, click Add it to my product page. This opens your theme editor with the RecurX block already added to your product template — just press Save there.
Step 6: Customize the widget
The editor has three tabs, and the Preview on the right updates as you type. Use Preview plan and Preview product to see the widget with a specific plan and product, and the device icons to check tablet and mobile.
- Content — the heading and option labels (One-time option, Subscription option), the Why subscribe section and its Benefits, Plan badges and Unit price. Leave a label unchanged to keep the design's own wording, which RecurX translates for your shoppers.
- Design — Colors, Typography and Shape and spacing. To match your theme, see Smart theme color matching.
- Behavior — Options (for example Select the subscription option by default and the Savings badge format), Add to cart, Prepaid plans, the celebration message and the rewards badge.
More views holds Product cards and Advanced (custom CSS).
Note: Some options are on the Pro plan: the Label templates, gift line and rules card, the Cart widget and Product cards. See RecurX billing & plan management.
Step 7: Save your changes
As soon as you change something, Shopify's save bar appears at the top of the page. Click Save to publish the changes to your storefront, or Discard to undo them.
Step 8: Check a product page
Open a product that belongs to one of your plans on your storefront. The widget appears with your plans, prices and savings.
If you don't see it, work through Widget not showing on my product page.
What happens next
- Only plan products show the widget. A product that isn't in an active plan keeps its normal Add to cart button.
- Language: the widget follows your storefront's language. Change its text per language on the Translations page.
- Other storefront features (cart widget, upsells, build-a-box, quiz, membership) are listed in Storefront widgets overview.
Troubleshooting
- The status says "Reinstall required" — RecurX needs updated permissions. Reinstall the app to grant them. Click Reinstall app on the card.
- "The theme editor couldn't be opened. Try again." — open the theme editor yourself from Online Store → Themes → Edit theme and follow Step 4.
- Banner "Nothing shows on your store yet" — the embed is on, but no plan has a product. Add a product to a plan in Subscriptions → Plans.