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

Using the Legacy Subscription Widget

Relevant to: Shopify Checkout Integration Migrated Shopify Checkout Integration
This guide describes the Legacy Subscription Widget, which is no longer officially supported or under active development. It remains available for merchants who continue to use the legacy widget. Recharge recommends using the current Recharge subscription widget for new implementations. Recharge Support may have limited ability to troubleshoot issues related to the legacy widget.

The Legacy Widget integrates seamlessly with Online Store 2.0 themes, allowing you to place the subscription widget directly on your product page using the Shopify Theme Editor.

This article explains how a store can install or upgrade to the Legacy Widget (formerly known as the Shopify Subscription Widget 1.0). 

Platform:

  • Shopify Checkout Integration
  • Migrated Shopify Checkout Integration

Before you start

  • The Subscription Widget app block must be enabled on your Shopify Theme Editor product page. If you wish to hide the widget, you can use the unpublish setting in the merchant portal.
  • You must have a 2.0 Shopify theme supported by the Shopify theme store. For more information on Online Store 2.0 and upgrading your store's theme, refer to Upgrading to Online Store 2.0.
  • Installing the block widget applies automatically to the default product page. You must install the block widget separately on each template if you have created custom product page templates.
  • Recharge disables the Legacy Widget by default for all new stores or for stores that use the new Subscription Widget. 
Note: The Legacy Subscription Widget is deprecated and no longer supported for new stores. Recharge recommends migrating to the Subscription Widget for an improved experience and continued support.

Install Legacy Widget

Note: You must have an Online Store 2.0 theme to proceed with setup.

The Legacy Widget is available on your product pages only. Install the Legacy Widget through your theme in Shopify:

  1. In the Shopify Admin, click Online Store and select Themes.
  2. Find the theme that you want to edit and click Customize.
  3. Click Home page and then Products from the drop-down menu. Choose the product page where you want to add the widget.
  4. Locate the Product information section. Hover over Product information, click the ➕ icon, then select Add block.
  5. Search for Legacy Widget under Apps.
  6. Optional - Hover over the Legacy Widget app block, and click on the vertical dot menu to move the block to an alternative location.  
  7. Click Save to confirm the widget's placement on the product page. 
  8. Set the widget status to Published in your Recharge merchant portal. 
  9. Publish your Shopify theme.

Upgrade to Legacy Widget

Note: You must have an Online Store 2.0 theme to proceed with the upgrade. The theme must be live for verification to work.

You can upgrade to the Legacy Widget to work with any 2.0 theme:

1. In the merchant portal, click Storefront, and select Subscription widget. 

2. A prompt to upgrade will display in the Widget status section:

3. Follow the steps to Install Legacy Widget, and select Verify to confirm. 

Troubleshooting

The price label on the product page does not update when switching between one-time and subscription options

It is expected behavior for this label not to update

Subscription-only products may also be affected, with the full price displayed rather than the discounted price.

I selected a specific product to use when configuring my widget, and now I can't see the subscription widget on my subscription product pages

It is highly recommended that you keep the dynamic product source setting enabled to ensure that the subscription widget renders correctly for all subscription products, and is a standard shopping experience for your customers. 

Setting a static product as the product source conflicts with Recharge settings. It is recommended to avoid this setting unless you are working with developers building a customer experience. You can connect the product source back to dynamic at any time under the Change menu:

I want to enable the Legacy Widget and am on the Recharge Checkout Integration. 

Stores on the Recharge Checkout Integration use the liquid widget and must convert to the Shopify Checkout Integration prior to using a 2.0 theme. 

My widget is published and the widget is not displaying.

Try the following steps to troubleshoot your Widget:

Contact Shopify support if the widget is published in Recharge, but is not visible on the Shopify storefront.

Frequently asked questions

Can I remove the Legacy Widget from my theme? ⌄

It is not recommended unless you switch to the Subscription Widget or build your own widget. Removing the app block will prevent customers from subscribing to products. If you do remove the widget, you can easily add it back by following the steps in: Install Legacy Widget. To temporarily hide the widget, use the unpublish action in the subscription widget settings in your merchant portal.

How do I change the position of the subscription details link? ⌄

You can drag and drop the details link's position in your Shopify Theme Editor.

Do I need to upgrade to the Legacy Widget? ⌄

The message to upgrade the widget is dismissible and you can upgrade to the Shopify 1.0 subscription widget at any time.

Can I use the Legacy Widget on pages other than product page templates? ⌄

The widget will function on any product page and is not compatible on other page templates or collections.

Can I build out a custom widget using Ajax and the JS widget functions on other pages? ⌄

You can build your own custom JS widget that works on any page and with both Shopify's 1.0 and 2.0 themes. Please refer to Advanced widget commands on Recharge's Developer Docs for more information, or work with a certified Recharge partner to implement advanced customizations.

How do I customize the Legacy Widget? ⌄

You can drag and drop the app block in your Shopify Theme Editor to choose where you want the widget placed on your product page. You can use CSS directly in your Shopify theme files to further customize the subscription widget. CSS customizations are not supported by the Recharge Support team.

Considerations

Consideration

Notes
Multi-currency Legacy Widget is compatible with Shopify Markets multi-currency. 
Was this article helpful?
0 out of 0 found this helpful

Related articles

Didn’t find what you’re looking for?

Contact us