Modifying the subscription widget

The subscription widget is the visual representation of your store’s recurring subscription offerings. It 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.

This guide takes you through modifying your subscription widget to match the look and feel of your storefront.

Access your Subscription Widget settings

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

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 Recharge subscription widget to learn more.

Subscription widget settings

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

Widget templates

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 between any of the templates.

Changing Templates

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

• Radio (default template)
• Radio Group
• Button Group
• Checkbox

Radio example:

Radio group example:

Button group example:

Checkbox example:

Further customization

You can generate and inject widgets on other pages and customize the look of the widget further using JavaScript. See the JavaScript Subscription Widget article in Recharge's Developer Documentation for more information.

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 or Creating subscription rules for the Shopify Checkout Integration 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.

Additional resources

• If you want to further customize your subscription widget and do not have a developer, please visit the Recharge Partner Directory for a list of development agencies.
• Visit Recharge’s Developer Documentation for guides and tutorials to further customize your Recharge Integration.