The Subscription Widget empowers you to take your subscription offerings on the Shopify product page to the next level through a highly customized customer experience.

This guide provides set-up instructions so you can use the widget on your storefront. 

Before you start

• This guide refers to the Subscription Widget (formally known as Subscription Widget 2.0). See Legacy Widget for information on the Legacy Widget (formally known as Subscription 1.0).

• The Subscription Widget is available to stores that meet the following criteria:

  • Utilizes Product Subscription Plans
    • To confirm your store is using Product Subscription Plans, refer to How to confirm your store uses Product Subscription Plans
  • Has a Shopify 2.0 theme published
    • To confirm that you have a published Shopify 2.0 theme, refer to Confirming the version of your Shopify theme
• A/B testing and widget analytics are only available to Pro and Custom plan stores
• You can only use one subscription widget on a specific product template at a time
• You must disable the Legacy Widget when you enable the Subscription Widget

Approve the widget scopes

The first time you use the Subscription Widget, you’ll need to approve the required widget scopes in Shopify:

1. Select Cross-Sell & Upsell in the merchant portal and click Product page.
2. Click Get started.
3. Click Approve permissions in Shopify to open your Shopify admin.
4. Click Update. This will enable the following scopes:
   1. write_pixels
   2. read_customer_events
   3. read_markets
5. Navigate back to the Product page in Recharge and click Get started again to design the widget.

Step 1 - Add the widget app block to your Shopify theme

Add the widget app block to the product page in your Shopify theme:

1. Select Themes under Online Store to open the Theme Editor in Shopify.
2. Click Customize on the theme you wish to edit.
3. Use the Page Selector drop-down at the top of the page to switch from the Home Page to the Product page. Select the relevant Product Template or use the default one.
4. Review the Product page. Make sure to view the product page for a subscription product.
5. Click Add section and select Apps.
6. Select Subscription Widget depending on your plan and the type of widget you are creating.
7. Drag and position the widget as needed.
8. Save your changes.
9. Optional - Repeat Steps 4-9 to add the widget to additional product templates.

Step 2 - Access the canvas

Open the flow canvas in your Recharge merchant portal to create and customize your widget:

1. Select Cross-Sell & Upsell in the merchant portal and click Product page.
2. Click Create widget from template.
3. Select one of the following options:
   • Standard widget: Update and customize the Subscription Widget. Available to all merchants.
   • A/B test: optimize content and design: Use a pre-built A/B testing template to design and test two separate widgets to understand your customers’ preferences. Available to merchants on the Pro or Custom plans.

Step 3 - Review the trigger node

By default, when activated, Recharge shows the subscription widget to all customers whenever they open a product page for a product available as a subscription.

You can keep this as is, or add a condition so that the subscription widget only appears when a product uses a specific product template.

1. Click on the Trigger node.
2. Click Add to add a condition.
3. Select Add product template to choose the the template.
4. Choose the product template from the list of available templates. You can choose multiple templates.
5. Click Apply to set the condition.

Optional - Review the A/B test node

Recharge adds the A/B test node to the template by default. The node is automatically set to give customers a 50/50 chance of entering either path. Click on the node to adjust the probability of a customer entering each path in the A/B test.

Step 4 - Customize the widget experience

Create and customize your widget directly in Recharge using the widget customizer:

1. Click the Subscription widget node on the flow canvas. 
2. Click Customize subscription widget.

3. Update the following settings to edit and customize the widget experience:

   • Default selections
   • Styling
   • Labels and inputs
   • Badge
   • Benefits and information
   • Interval labels

Use the widget preview on the right-side of the page to preview your changes in real-time.

Default selections

Use the Default selections tab to confirm if customers should:

• Have the subscription or the one-time version of the product immediately selected when they access the product page
• See the one-time or subscription version of the product first when they access the product page

Styling

Change the widget colors, border radius, and size on the Styling tab.

Labels and inputs

Update the widget labels, such as “Subscribe and save”, “One-time” or the delivery frequency options.

Badge

Update the text and color for the subscription discount badge on the widget.

Benefits and information

Update the messaging customers see encouraging them to purchase the product as a subscription. This includes the discount amount, any benefits to subscribing, or drawbacks to making a one-time purchase, such as highlighting the discount amount they lose.

Variables

Use the following variables when designing your benefits and information content:

• {discount}: Use this variable in the Benefits text box to display the subscribe and save discount amount customers receive if they subscribe
• {maxDiscount}: Use this variable in the One-time drawbacks text box to let customers know the maximum discount they miss out on by not subscribing

Learn more link

Recharge uses HTML and CSS to provide a default learn more template that highlights subscription benefits.

The content used in the default template is a collection of messaging that has been successful for other merchants. You can keep the text as is, or update the learn more content using HTML/CSS with more personalized information.

Interval labels

Update the interval labels used to display the subscription frequencies available for the product, such as the words “day”, “week”, or “month”.

Optional - Preview the widget

Preview the widget on your storefront before activating it to confirm it appears as intended:

1. Click the Subscription widget node on the flow canvas. 
2. Select Customize subscription widget.
3. Click preview in your store.
4. Use the drop-down menu to select a theme to preview the widget. You can use your active theme, or select a draft theme to preview the widget on an unpublished theme.
5. Search for a subscription product to use in your preview. 
6. Click Preview to open the widget on your storefront.

Step 5 - Save and activate the widget

You can test the automated experience before activating it to ensure it works as intended:

1. Click Save in the top-right corner.
2. Select Activate in the top right corner to enable the widget.

Step 6 - Test the widget on your storefront

Confirm that the widget acts and appears as you intended:

1. Navigate to your Shopify storefront.
2. Open the product page for a subscription product.
3. Confirm that the widget appearance matches what you set in your Recharge merchant portal.

You can finish testing your widget here, or perform a test order to test the customer experience completely.

Edit the widget

You can change and edit the standard widget experience at any point, even after you activate the widget.

You cannot change the widgets configured as part of an A/B test experience after activating the experience. Recharge recommends duplicating your existing experience and applying your changes to the new one to make edits or update the widget.

Follow the steps below if you need to make any changes to A/B test widgets, including updating the benefit text or editing the interval labels:

1. Select Cross-Sell & Upsell in the merchant portal and click Product page.
2. Access the widget you want to duplicate.
3. Click on the three vertical dots menu at top right and select Duplicate.
4. Click on the Subscription Widget node to edit the widget. Click Apply to save your changes.
5. Save and activate the widget.
6. Navigate back to the Product page. Hover over the existing widget and click on the three vertical dots menu to reaccess the Actions menu.
7. Click Deactivate to disable the original widget.

After deactivating the original widget, customers will only interact with the new widget that uses your applied changes.

Review Analytics

If you are on the Pro or Custom plan you can view widget analytics to track its performance. Tracking starts automatically as soon as you activate your widget, allowing you to monitor add-to-cart clicks and their resulting checkouts. Widget analytics excludes data from accelerated checkout buttons.

Click on the Performance tab to access the widget analytics.

1. Review the widget analytics to gather more information on the following data points:
   • Subscriber opt-in rate
   • Page impressions
   • Revenue
   • Add-to-carts
   • Checkout revenue
2. Use the Product, Template, Flow, or A/B test filters to filter your data and understand how customers interact with the widget.

Discrepancies between data sources

Subscription Widget analytics uses front-end pixels, which may result in missing data. It is expected that the data shown on the Subscription Widget Performance tab may differ from data available in Shopify, or other Recharge Analytics data.

Recharge doesn’t recommend relying on Widget Analytics as exact figures or a source of truth. However, this data is valuable for understanding trends and measuring the performance of your widget to optimize conversion rates and improve the customer experience.

Considerations

Consider the following when using the Subscription Widget or Advanced Subscription Widget:

Consideration	Notes
Bundles	Dynamic bundles uses its own widget to display the bundles option to customers. Fixed-price and Preset bundles use the Subscription Widget. You can create a bundles-specific product page template, and then design a widget to display on this template that specifically highlights the benefits of your bundled products.
Product Subscription Plans	You must have Product Subscription Plans enabled to use the Subscription Widget. Follow the instructions listed on How to convert to Product Subscription Plans if you wish to upgrade to use the widget. The widget respects the sort order of your product subscription plans set for a product. The plans list on the widget resets if you change the order of the product's plans. You cannot select specific frequencies to display first, instead at this time frequencies are preselected.
Page builder apps	Page builder apps such as Pagefly and Shogun are not compatible with the Subscription Widget out-of-the-box.
Shopify themes	The Subscription Widget is compatible with all free Shopify themes, and most paid Shopify themes See Subscription Widget app block not appearing in the Shopify Theme Editor if you are unable to see the app block.
Shopify Markets	You can completely translate the Subscription Widget, and it is compatible with Shopify Markets. See How can I translate the Subscription Widget? for more information.
Price label	The price label on the product page does not update when switching between one-time and subscription options due to a Shopify limitation. The price does display on the widget to help prevent customer confusion.
Payment	If you use manual payment capture or authorization capture on Shopify, the order isn't paid at checkout. In these cases, widget analytics only reflect the checkout information after you successfully capture the payment.

Resources

Getting Started resources

• Getting started with the Subscription Widget

Set-up instructions

• How to customize the Subscription Widget
• How to create different widgets for individual products using product templates in Shopify using the Subscription Widget

Troubleshooting resources

• Subscription Widget not visible on the product page in the Shopify Theme Editor

Frequently Asked Questions

• Subscription Widget FAQs

Developer Docs

• How to update the Subscription Widget using CSS