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

Install Shopify Subscription Widget 1.0

The Shopify Subscription Widget 1.0 is available on your product pages only. Install the Shopify Subscription Widget 1.0 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 1.0 and drag the Subscription Widget 1.0 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 app block on to make the widget live on your storefront. 

Upgrade to Shopify Subscription Widget 1.0

You can upgrade to the Shopify Subscription Widget 1.0 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 Subscription Widget 1.0, 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 Shopify Subscription Widget 1.0 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 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 Subscription Widget 1.0.

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 Subscription Widget 1.0? 

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 Subscription Widget 1.0?

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