Using and modifying the Legacy Subscription or Legacy Javascript Widget

The subscription widget is the visual representation of your store's recurring subscription offerings. 

You can make basic modifications to the subscription widget in the merchant portal, but you may want to implement customized solutions. The following guide provides an overview of the widget settings and steps to modify the widgets. 

Before you start

• All new stores have access to the Subscription Widget. If you are still on the Legacy Widget, Recharge recommends migrating to the Subscription Widget for an improved experience and continue support.
• 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

How it works

The subscription widget displays on all pages that have a recurring product (including one-time products with subscription options), allowing your customers to choose the subscription option on that product page.

Modifying the Legacy Widget

In your merchant portal, click Storefront and select Subscription widget. On this page, you can customize your subscription widget’s settings, and publish, unpublish, or preview your subscription widget.

• Subscription widget status
• Subscription widget settings
• Widget templates
• Preview the subscription widget on your storefront

Subscription widget status

Your subscription widget status shows whether or not the widget is published on your store:

Click Unpublish the subscription widget or Publish the subscription widget depending on your intention. Refer to Publish or unpublish the Legacy Javascript Widget to learn more.

Subscription widget settings

Recharge is currently updating the Legacy Subscription Widget experience as more merchants adopt the enhanced Subscription Widget. Depending on your store setup, you may see a banner on the Legacy Subscription widget settings page, or you may be redirected from it when you open the settings page from the Storefront menu.

Product page purchase options

Select your widget layout and update the verbiage for your purchase, delivery, and charge options by entering your own translation in each field. 

Default selected option

When a customer accesses a product page that has both one-time and subscription offerings, either the one-time or subscription purchase option is selected by default. Determine which option is selected automatically under the Default selected option.

Purchase options order

When a customer accesses a product page that has both one-time and subscription offerings, either the one-time or subscription purchase option is displayed first. Determine which purchase option is displayed first under Purchase options order.

Auto Inject

Auto Inject controls if the widget appears automatically on the page. When Auto Inject is disabled the widget does not instantly load on the page, but the CDN (Content Delivery Network) and the window.ReChargeWidget object will be available for custom development work.

You can still use the publish/unpublish feature to control the visibility of your widget but auto inject will control whether our widget shows up automatically or not.

Translation options

Update colors

Update your subscription widget's font color, selection background, and text color.

Frequency translations 

Apply custom text for your subscription frequency options in Frequency translations.

Subscription details popup

The subscription details popup provides customers with additional information regarding how your subscriptions work.

• Update the Subscription details link verbiage by entering a new link title in the text box.
• Choose either Dark or Light for your Subscription details icon color.
• Modify the background and font colors.
• Modify the "How it works" verbiage (this field accepts HTML formatting), and the link color and verbiage. 

Here is an example of the "How it works verbiage" on a subscription widget:

Click Save when you are finished making your customizations.

Other settings

Reach out to the Recharge support team if you would like to make the following modifications or adjustments:

• Remove the subscription details popup
• Remove the subscription detail icon
• Remove the Learn more link within the subscription details popup
• Remove the Powered by Recharge badge
• Update the Learn more link
• Update the Powered by Recharge badge link

Template types

Widget templates let you present Recharge subscription options on the product display page in four different styles. Changing templates will only affect the way your store displays options. There is no difference in functionality among the templates.

Changing Template types

In the Widget Templates section, select one of the four widget templates:

• Radio (default template)
• Button Group
• Checkbox
• Radio Group (not applicable to stores using Recharge Checkout on BigCommerce)

Radio example:
 

Button group example:

Checkbox example:

Radio group example:

Preview the subscription widget on your storefront

There are multiple methods you can use to preview your subscription widget depending on the Recharge platform you are using.

Method 1 - Subscription widget preview

The Subscription widget preview section automatically reflects any changes you make to your widget settings, allowing you to perfect your customizations before committing to them:

Method 2 - Preview the subscription widget using the URL parameter

You can preview the subscription widget on your storefront without publishing the widget. This allows you to test the widget and make any necessary changes before going live:

1. Open an individual product page on your storefront.
2. If you are using Shopify, add ?recharge=true to the end of the product page URL. If you’re using BigCommerce, add ?recharge=test to the end of the product page URL.
3. Press Enter.
4. Click OK to confirm that you are accessing Recharge in preview mode.

Once you've confirmed that you are accessing Recharge in preview mode, the subscription widget will render on the product page, even if the widget is set to unpublished.

Method 3 - Preview the widget with saved settings

Once you have added at least one product to Recharge (view Creating subscription rules for more information), click Preview the widget with saved settings under “Subscription widget status”:

Method 4 - Developer console

If you’re unable to preview the subscription widget using any of the previous methods, you can use the Developer Console from your browser’s tools:

1. Navigate to a product page on your storefront.
2. Open the Developer Console from your browser's tools.
3. Enter window.ReChargeWidget.enablePreviewMode() and press Enter.
4. A notification should appear advising you that you are in Recharge preview mode. Select Got it! to open Recharge in preview mode.

Advanced customizations

• Display the subscription widget on pages other than the product page
• Move the location of the subscription widget on your product pages
• Customize HTML elements
• Hide the 'Need help accessing your subscription?' link from the Customer Login page
• Update the color of the selected radio buttons
• Display the subscription widget on a custom theme

Display the subscription widget on pages other than the product page

The standard Legacy Javascript Widget works on the product page. 

If you wish to display the widget on another page, you must create a new instance of the widget, insert the new widget into your desired page's theme file, and follow the guide to redirect customers to the cart page using Ajax. 

Move the location of the subscription widget on your product pages

BigCommerce subscription widget

Use custom code to adjust the position of the subscription widget. Review customizing the Storefront for BigCommerce in the Developer Docs for more information. 

Recharge Checkout Integration on Shopify and Custom stores

Move the Recharge code snippet in your Shopify theme files to move the location of the subscription widget on the product page. See Changing the subscription widget location on the product page for more details. 

Shopify Checkout Integration Legacy Javascript Widget

To move the Legacy Javascript Widget, place the following code into the Shopify theme file (examples: product.liquid or product-form.liquid) that contains the form HTML tag displayed on the product page: 

<div class="rc-widget-injection-parent"></div>

The widget code looks for this HTML element and places the widget there when rendering the product page. 

Legacy Subscription Widget

If you are using the Legacy Subscription Widget, use the Shopify Theme Editor to drag and drop the subscription widget to your preferred location on the product page. 

Customize HTML elements

Shopify Checkout Integration stores use a JavaScript widget, which means there are no theme files to apply custom HTML. 

If you would like to customize HTML elements of your subscription widget, you must apply custom JavaScript to your store's theme code to modify the subscription widget. 

Hide the 'Need help accessing your subscription?' link from the Customer Login page

Add div#rc_login {display: none !important;} to your store's general CSS file to hide the Need help accessing your subscription? link. 

Update the color of the selected radio buttons

You will need to implement custom CSS to update the radio button color. We recommend working with a third-party developer to have this custom CSS added to your store. 

Display the subscription widget on a custom theme

If you are building a custom theme, you must ensure the theme is prepared to handle Shopify's Subscription APIs and the selling plans that are attached to the product when the product is added to Recharge. 

Additional resources

To view additional guides and tutorials for customizing your Recharge integration, visit Recharge's Developer Docs. 

If you want to further customize your subscription widget and do not have a developer, we recommend you work with a certified Recharge partner.