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 Recharge Dashboard, click the wrench icon and select Subscription widget in the list. 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.
Customize your subscription widget settings
The following sections take you through customizing your subscription widget settings. These settings differ based on your eCommerce platform:
- If you are using Shopify, refer to Subscription widget settings for Shopify merchants.
- If you are using BigCommerce, refer to Subscription widget settings for BigCommerce.
Subscription widget settings for Shopify merchants
In your Recharge Dashboard, click the wrench icon select Subscription widget to begin customizing the following settings.
Product page purchase options
Update the verbiage for your purchase, delivery, and charge options by entering your own translation in each field.
Overview of product page purchase options
Field |
Purpose |
Platform availability |
| One time purchase option verbiage | Apply custom text to the “one-time purchase” option for products that are offered as both one-time and subscriptions. |
|
| Subscription option verbiage | Apply custom text to the “subscription purchase option” when no subscription discount is offered. |
|
| Subscribe and save option verbiage | Apply custom text to the “subscription purchase” option when a subscription discount is offered. |
|
| Delivery every verbiage | Apply custom text to the delivery frequency dropdown. |
|
| Charge every verbiage | Apply custom text to the charge frequency. |
|
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.
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:
Here is an example of the "Learn more link 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 your Recharge Dashboard, click the wrench icon and select Subscription widget. In the Widget Templates section, select one of the four widget templates (the default template is Radio, however, you can choose from Radio Group, Button Group, or 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.
Subscription widget settings for BigCommerce merchants
In your Recharge Dashboard, click the wrench icon and select Subscription widget to customize the settings below.
Product page purchase options
Merchants using the Recharge Checkout on BigCommerce can change their widget form type (button, checkbox, or radio), and customize the fields for purchase, subscription, delivery, and charge options based on the widget style.
Overview of product page purchase options
Field |
Purpose |
Widget form type |
| Widget form type | Change the type of subscription widget shown on your subscription product pages. | Choose between Button, Radio, or Checkbox for your widget form type. |
| One time purchase option verbiage | Apply custom text to the “one-time purchase” option for products that are offered as both one-time and subscriptions. | This dynamic field only displays when either Button or Radio are selected as the widget form type. |
| Subscription option verbiage | Apply custom text to the “subscription purchase option” when no subscription discount is offered. | Applicable to the Button and Radio widget form types. |
| Subscribe and save option verbiage | Apply custom text to the “subscription purchase” option when a subscription discount is offered. | Applicable to the Button, Checkbox, and Radio widget form type. |
| Subscribe & save extended label |
Apply additional custom text following the “Subscribe & save option” verbiage. For example: If your Subscribe & save verbiage is: “Subscribe & save 15%,” you can add the additional text “on every recurring order” in the extended label field. The final result would look like this: “Subscribe & save 15% on every recurring order,” as shown in the example below. |
This dynamic field only displays when Checkbox is selected as the widget form type. |
| Delivery every verbiage | Apply a custom text label to the delivery frequency dropdown. | Applicable to the Button, Checkbox, and Radio widget form types. |
| Charge every verbiage | Apply custom text to the charge frequency. | Applicable to the Button, Checkbox, and Radio widget form types. |
View examples of widget form types
Button example:
Checkbox example:
With the Subscribe & save extended label customized to include “on every recurring order:"
Radio button example:
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.
Update colors
Font colors
For the Button and Radio subscription widget form types, you can modify the color of the unselected option text. For the Checkbox subscription widget form type, you can modify the color of the bolded and unbolded text next to the checkbox.
Selection background and text color
Modify the background color and the text color of the selected option.
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:
Here is an example of the "Learn more link verbiage" on a subscription widget:
Click Save when you are finished with your customizations.
Other settings
Reach out to the Recharge support team if you would like to make the following modifications or adjustments:
- Enable the subscription details icon.
- Remove the subscription details popup.
- Remove or update the Learn more link URL in the subscription details popup.
- Remove the “Powered by Recharge” badge.
- Update the “Powered by Recharge” badge link URL.
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
In your Recharge admin, click the wrench icon and select Subscription widget.
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:
- Open an individual product page on your storefront.
- If you are using Shopify, add
?recharge=trueto the end of the product page URL. If you’re using BigCommerce, add?recharge=testto the end of the product page URL. - Press Enter.
- 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 (see instructions for adding products and creating subscription rules for the Shopify Checkout Integration or for the Recharge Checkout on BigCommerce), 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:
- Navigate to a product page on your storefront.
- Open the Developer Console from your browser's tools.
- Enter
window.ReChargeWidget.enablePreviewMode()and press Enter. - 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.
Didn’t find what you’re looking for?
Contact us