The Subscription Widget is the visual representation of the recurring subscription offer on your storefront. It allows the customer to choose the subscription option on your product page. You can customize the Subscription Widget within Recharge to match the look and feel of your storefront as well as modify the text that appears to your customers.
- Recharge Checkout on Shopify
- Shopify Checkout Integration
Modifications to the BigCommerce Subscription Widget must be made directly in code, please reference our Developer Documentation for more information. Customizations to code are not covered in the Recharge design and integration policy.
Access your Subscription Widget settings
- Select the wrench icon at the top of your Recharge Dashboard.
- Select Subscription widget from the dropdown to open the settings page.
Subscription Widget status
Confirm or change the published status of the Subscription Widget on your storefront using the Subscription widget status section.
Subscription Widget settings
Product page purchase options
Update the verbiage around purchase and delivery options by entering your own translation.
When a customer accesses a subscription product page, either the one-time or subscription purchase option will automatically be selected. You can determine which option is selected by default under the Default selected option.
You can also choose which purchase option is displayed first by updating your selection under Purchase options order.
Update the Subscription Widget color options under Font color.
Customers can learn more about the subscription by selecting the Subscription details link on the Subscription Widget. Enter a new phrase in the Subscription details link verbiage text box to update the link name. Use the Subscription details icon color option to switch between a black or white icon.
Translate the subscription frequency options customers can choose from under Frequency translations.
Subscription details popup
You can further modify the Subscription details pop-up by changing the background and font color as well as the text that displays.
Reach out to the ReCharge support team if you would like to make the following modifications or adjustments:
- Remove the subscription details pop-up
- Remove the subscription detail icon
- Remove the Learn more link within the subscription details pop-up
- Remove the Powered by ReCharge badge
- Update the Learn more link
- Update the Powered by ReCharge badge link
Preview the Subscription Widget
Subscription widget preview
View your changes to the Subscription Widget in real-time under Subscription widget preview on the Subscription Widget settings page.
This preview automatically reflects any changes you make to your widget settings, allowing you to perfect your customizations before committing to them.
Preview the Subscription Widget on your storefront
You can preview the Subscription Widget on your storefront after saving any changes to your widget settings 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.
?recharge=trueto the end of the product page URL.
- Press Enter.
- Press 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.
Shopify Checkout merchants
You can use the preview icon on the Subscription Widget settings page to load a preview of your subscription widget once you have added at least one product to Recharge.
- Access the Subscription widget settings page from your Recharge admin.
- Scroll down to the Subscription widget preview section.
- Use the preview icon to open a preview of the subscription widget on your storefront.
You can use the Developer Console to access Recharge in preview mode if you were unable to do so through an updated URL, or the preview button.
- 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.
If you need help modifying the subscription widget, you can reach out to a trusted Recharge Partner for help.
To view guides and tutorials for customizing your Recharge integration, visit the Developer Docs.
Didn’t find what you’re looking for?Contact us