Skip to main content
  1. Recharge
  2. Products & subscriptions
  3. Subscription widget
  4. Using the subscription widget

How to A/B test a Subscription Widget

Relevant to: Shopify Checkout Integration Migrated Shopify Checkout Integration

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. You can also use a pre-built A/B testing template to design and test two separate widgets to understand your customers’ preferences.

This guide provides set-up instructions so you can A/B test the Subscription Widget. 

Platform:

  • Shopify Checkout Integration
  • Migrated Shopify Checkout Integration

Before you start

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 Subscription widget.
  2. Click Create widget from template.
  3. Select A/B test: optimize content and design.
  4. Click Set starting point to use the default configuration, or select a widget you've used before from the drop-down menu.

Step 3 - Review the trigger node

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

You can keep this as is, or add a condition so the subscription widget appears only 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 template.
  4. Choose the product template from the list of available templates. You can choose multiple templates.
  5. Click Apply to set the condition.

Step 4 - 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 a node to adjust the probability of a customer taking each path in the A/B test.

Step 5 - 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:

Use the widget preview on the right-side of the page to preview your changes in real-time. The widget preview may not display all customizations, as some settings are specific to certain subscription plan types. Be sure to adjust your plan type to view the applicable customizations. For example, the dynamic pricing setting only appears when you select the dynamic pricing plan type.

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
Tip: Recharge recommends allowing customers to purchase the product as a subscription by default, as data shows customer LTV is significantly higher for subscribers.

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.

Recharge only displays the badge for products that include a Subscribe and Save discount and are offered as one-time purchases.

Benefits and information

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

Tip: Make sure you list your benefits in bullet points, or they won’t display correctly on the product page.

Variables

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

Section

Variable

Description

Example
Labels and inputs > Frequency save {discount} Inserts the discount value (percentage or amount) applied when a customer chooses a subscription frequency. Save 15% when you subscribe monthly.
Badge > Badge Text {maxDiscount} Displays the maximum available discount across all subscription frequencies. Up to 25% off with subscription
Badge > Badge Text {discount} Inserts the discount value (percentage or amount) applied when a customer chooses a subscription frequency. Save 15% when you subscribe monthly.
Benefits and information > Static pricing {discountPrice} Displays the discounted product price after applying the subscription discount. Only $18.99 per order.
Benefits and information > Dynamic pricing {initialDiscountAmount} Displays the discount amount applied to the first order only. Get $5.00 off your first box.
Benefits and information > Dynamic pricing {initialDiscountPercentage} Displays the discount percentage applied to the first order only. Enjoy 20% off your first order
Benefits and information > Dynamic pricing {recurringDiscountAmount} Displays the discount amount applied to each recurring order. Save $3.00 on every renewal.
Benefits and information > Dynamic pricing {recurringDiscountPercentage} Displays the discount percentage applied to each recurring order. Enjoy 10% off every delivery.
Benefits and information > Dynamic pricing {recurringDiscountCount} Displays the number of recurring orders the discount will apply to. Discount applies for the first 3 orders
Benefits and information > Dynamic pricing {recurringDiscountCountWithInterval} Displays how many orders and at what interval the discount applies. Discount valid for 3 monthly orders.
Benefits and information > Benefits {discount} Inserts the discount value (percentage or amount) applied when a customer chooses a subscription frequency. Save 15% when you subscribe monthly.
Benefits and information > One-time drawbacks {maxDiscount} Displays the maximum discount customers miss out on if they buy as a one-time purchase instead of subscribing. You’ll miss out on 25% savings by ordering one-time.
Interval labels {interval} Inserts the interval number (e.g., 1, 2, 3). Deliver every 2 weeks.
Interval labels {chargeInterval} Combines the interval number with the unit (day, week, month). Charge every 3 months.
Interval labels {unitPrice} Displays the price per unit when sold as part of a subscription. Only $2.50 per bottle

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.

Tip: It’s important to check local and national laws on what information must be presented to customers when they purchase a subscription. Many countries and regions have laws that require you to provide clear and transparent information about subscriptions, including pricing, cancellation policies, and renewal terms.

Interval labels

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

Tip: See How can I translate the Subscription Widget? for detailed translation instructions.

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.

Subscription widget customization interface showing subscription settings, product selection, and preview options.

Step 6 - Save and activate the widget

You can test the automated flow 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 7 - 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 place a test order to fully test the customer experience.

Edit the widget

You cannot change the widgets configured for an A/B test flow after activating the flow. Recharge recommends duplicating your existing flow 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

View your widget analytics to track its performance. Tracking starts automatically when you activate your widget, allowing you to monitor add-to-cart clicks and the resulting checkouts. Widget analytics excludes data from accelerated checkout buttons.

Click the Performance tab to view 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.
Note: Recharge does not calculate the Subscriber Opt-in Rate for Subscription Orders if your theme uses the checkout.liquid theme file to customize the checkout experience. You must upgrade your Shopify Thank you page to ensure accurate tracking. Without Checkout Extensibility enabled, all subscription orders appear as one-time purchases (OTPs) in your Subscription Widget Analytics.

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 for measuring your widget's performance 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
  • Fixed-price and Dynamic bundles use their own widgets to display the bundles option to customers.
  • 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
Shopify Markets

An example of the widget translated into Spanish
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. 
Quantity adjustments pricing
  • The subscription widget does not dynamically update the displayed price when a customer adjusts the quantity on the product page. The displayed price remains fixed based on the initial quantity selection.
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.
Compare at price
  • The widget does not display the Shopify compare-at-price.
Advanced customizations
  • Customizations to the product page can interfere with the subscription widget and cause the error "Variant can only be purchased with a selling plan."
  • This happens when the selling plan isn’t correctly passed to the cart, preventing successful subscription purchases. If you’re adding custom elements to the product page, work with a developer to ensure your changes properly integrate with the subscription widget.
Widget placement
  • The Subscription Widget only works on product page templates. You cannot place the widget on other pages, such as your storefront's home page.

Resources

Getting Started resources

Set-up instructions

Troubleshooting resources

Frequently Asked Questions

Developer Docs

 

Was this article helpful?
0 out of 0 found this helpful

Related articles

Didn’t find what you’re looking for?

Contact us