Overview of the Shopify 2.0 subscription widget

Shopify has launched their Online 2.0 framework for their storefront themes. Recharge has launched Shopify 2.0 Widget to match Shopify’s new Online Store framework. With 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. 

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.

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 which is available and supported by Shopify theme store.
• For more information on Online Store 2.0 and upgrading your stores theme, refer to Upgrading to Online Store 2.0.
• The initial install of the Shopify Widget 2.0 will direct you to the default product template page. The widget will function on any product page. The widget cannot be integrated into collection pages.

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 then select Themes.

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

3. In the left sidebar, click on Add block within the Product information section. 

4. Click on 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. Select Next and 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 I switch between one-time and subscription options. 

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

There is a message advising me to upgrade the widget from the JS subscription widget 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. 

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? 

We don't recommend this 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 accidentally remove it, don't worry - you can easily add it back by following the steps in: Install Shopify 2.0 Subscription Widget.

If you want to temporarily hide the widget from showing just 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. 

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. 

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

To use the JS widget out of 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 on a Shopify 1.0 Theme. 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.