Shopify launched their Online 2.0 framework for their storefront themes. Recharge launched the Legacy Widget to match Shopify’s new Online Store framework. With the Legacy Widget, you can now place the subscription widget on your product page directly through the Online Store editor in Shopify. The Legacy Widget works out of the box with Online Store 2.0 themes and makes it easier for merchants to get setup on Recharge and more easily customize the placement of their widget on the product page.

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

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 stores 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.

Compatibility

• Merchants who install Recharge after March 21st, 2022 using the Shopify Checkout Integration automatically have access to this feature when configuring the Recharge app for the first time.
• Merchants who are on Shopify Checkout Integration or Migrated Shopify Checkout Integration can upgrade to the Legacy Widget in the merchant portal under the Subscription Widget settings.

Install Legacy Widget

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 Apps under Templates. Click the + icon and then Add app block.
   • Alternatively, click Add section if this is your first time adding an app block to your theme.
     
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

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

This is expected behavior for this label to not update due to a Shopify limitation.

Subscription-only products may also be affected, where the full price is displayed, not 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:

• Ensure the app block is not set to hidden within the Shopify Theme Editor.
• Confirm the widget is published in your subscription widget settings. 
• If your product's inventory is being tracked, ensure there is inventory. If there is no inventory the widget will not display.
• Confirm the product you are working with has a Product Subscription Plan assigned. 
• Review any third-party apps in use and their compatibility with your integration. This includes using a Pagebuilder app.
• Clear your cache. For more information, visit Refresh your cache. 
• Update your browser to the latest version. 

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

FAQs

Can I remove the Legacy Widget from my theme? 

It is not recommended unless you convert to the Subscription Widget, or have built out your own widget instead. 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 from showing, use the unpublish action within 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 position of the details link within 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 customization the subscription widget. CSS customizations are not supported by the Recharge Support team.

Considerations