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.
- Recharge Checkout on Shopify
- Recharge Checkout on BigCommerce
- Shopify Checkout Integration
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 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.
|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 drop-down verbiage||
Apply custom text to the menu title for delivery options. Not all templates show the delivery drop-down option.
Note: The delivery drop-down options are always used for accessibility purposes, even if the theme does not display the options.
Update your subscription widget's font color, selection background, and text color.
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.
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 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.
Note: Widget templates are not applicable to subscription only and pre-paid products.
In the Widget Templates section, select one of the four widget templates:
- Radio (default template)
- Radio Group
- Button Group
Radio group example:
Button 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:
- 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 (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:
- Navigate to a product page on your storefront.
- Open the Developer Console from your browser's tools.
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.
Didn’t find what you’re looking for?Contact us