Overview of the Shopify 2.0 subscription widget

Shopify launched their Online 2.0 framework for their storefront themes. Recharge launched the Shopify 2.0 Widget to match Shopify’s new Online Store framework. With the Shopify 2.0 Widget, you can now place the subscription widget on your product page directly through the Online Store editor in Shopify. The Shopify 2.0 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 Shopify 2.0 Widget. 

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.

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 Shopify 2.0 Widget in the merchant portal under the Subscription Widget settings.
• This feature is not available to merchants on the Recharge Checkout on Shopify. Contact the Recharge support team if you are interested in converting to the Shopify Checkout to use this feature.
  • If you are using the original subscription widget on the Recharge Checkout on Shopify, refer to Understanding the Recharge subscription widget for more information. 
  • Online Store 2.0 themes are available for merchants on the Recharge Checkout on Shopify. This platform does not have support for Online Store 2.0 themes out of the box and will require additional code customizations to integrate Recharge with these themes. Reach out to the Recharge support team for assistance with using 2.0 themes on the Recharge Checkout on Shopify.

Install Shopify 2.0 Subscription Widget

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

1. In the Shopify Admin, click Online Store and select Themes.

2. Click Customize on the intended theme and select the Default Product page. 

3. Click on Add block within the Product information section. 

4. Click Subscription Widget and drag the subscription app block where you want it to appear on the product page. Select Save to confirm the widget's placement on the product page. 

5. Ensure the widget status is set to Published in your Recharge merchant portal. 

6. Publish the theme you've added the add block on to make the widget live on your storefront. 

Upgrade to Shopify 2.0 Subscription Widget

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

1. In the merchant portal, click Storefront, then select Subscription Widget. 

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

3. Follow the steps to Install Shopify 2.0 Subscription 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.

I want to enable the Shopify 2.0 subscription 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.

You can try the following steps to troubleshoot your Widget:

• Ensure the app block is not set to hidden within the Shopify Theme Editor.
• Make sure the widget is published in your subscription widget settings. 
• 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.

Contact the Recharge Support team if you have any issues or discrepancies with the widget.

FAQ

Can I remove the 2.0 Subscription widget from my theme? 

It is not recommended unless you have built out your own widget and want to use it 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 Shopify 2.0 Subscription 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 Shopify 2.0 widget? 

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

Can I use the 2.0 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?

To use the JS widget out of the box, your store must be using a Shopify 1.0 theme. Recharge will not be supporting customizations to the JS widget to work with 2.0 themes.

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.

How do I customize the Shopify 2.0 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.