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 provides an overview on the subscription widget settings and the steps to modify your 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
Field |
Purpose |
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. |
Delivery dropdown verbiage |
Apply custom text to the menu title for delivery options. Not all templates show the delivery dropdown option.
Note: The delivery dropdown options are always used for accessibility purposes, even if the theme does not display the 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
Note: Widget templates are not applicable to subscription-only and prepaid products.
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:
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:
- Open an individual product page on your storefront.
- 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. - 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 (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:
- 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, we recommend you work with a certified Recharge partner.
- Visit Recharge’s Developer Documentation for guides and tutorials to further customize your Recharge Integration.