Skip to main content

Modifying the Subscription Widget

Shopify Checkout integration Recharge Checkout on Shopify
Sections

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.

Platform:
  • 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

  1. Select the wrench icon at the top of your Recharge Dashboard.
  2. 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. 

Confirm_the_subscription_widget_status_on_your_storefront.png

Subscription Widget settings

Product page purchase options

Update the verbiage around purchase and delivery options by entering your own translation. 

Screenshot_2021-06-15_at_12.16.28.png

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.

Subscription_widget___Settings___ReCharge_2021-01-21_11-19-44.png

You can also choose which purchase option is displayed first by updating your selection under Purchase options order.

Subscription_widget___Settings___ReCharge_2021-01-21_11-21-51.png

Update the Subscription Widget color options under Font color. 

Subscription_widget___Settings___ReCharge_2021-01-21_11-24-56.png

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.

2019-05-21_10-21-07__1_.jpg

Frequency translations 

Translate the subscription frequency options customers can choose from under Frequency translations.

Subscription_widget___Settings___ReCharge_2021-01-22_15-07-00.png

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.

Subpopup.jpg

Note: Please contact our support team if you are using the Shopify Checkout integration the updated subscription widget translations do not appear for existing products to ReCharge. 

Other settings

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.

2019-05-21_10-38-34__1_.jpg

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. 

  1. Open an individual product page on your storefront. 
  2. Add ?recharge=true to the end of the product page URL. 
  3. Press Enter.
  4. Press OK to confirm that you are accessing Recharge in preview mode.

ReCharge_preview_mode_accessed_through_updating_product_page_URL.png

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

Note: These options are only available to merchants using the Shopify Checkout Integration.  

Preview icon

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. 

  1. Access the Subscription widget settings page from your Recharge admin.
  2. Scroll down to the Subscription widget preview section.
  3. Use the preview icon to open a preview of the subscription widget on your storefront.

The_Preview_the_widget_button_allows_you_to_preview_the_widget_before_it_is_published.png

Developer console

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. 

  1. Navigate to a product page on your storefront. 
  2. Open the Developer Console from your Browser's Tools.  
  3. Enterwindow.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. 

ReCharge_preview_mode_is_announced_by_a_pop_up_once_preview_mode_is_enabled_in_the_developer_console_.png

Additional resources

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.

Was this article helpful?
3 out of 4 found this helpful

Related articles

Didn’t find what you’re looking for?

Contact us