The Recharge subscription widget is the visual representation of your store's recurring subscription offerings. You can make basic modifications to the subscription widget in the merchant portal, but you may want to implement customized solutions. The following guide covers advanced customization options for the Recharge subscription widget.

Before you start

• By default, Recharge automatically installs the widget code in your theme if:
  • Recharge was installed on your store after November 2nd, 2020.
  • Another recurring subscription app was not previously installed on your store.
  • The theme file is published on your store.
• Contact the Recharge support team if you need to have the widget code installed on a new or updated theme. 
• See Customizing CSS Styles in Recharge for a full list of CSS options.

Display the subscription widget on pages other than the product page

The standard JavaScript subscription widget works on the product page. 

If you wish to display the widget on another page, you must create a new instance of the widget, insert the new widget into your desired page's theme file, and follow the guide to redirect customers to the cart page using Ajax. 

Move the location of the subscription widget on your product pages

BigCommerce subscription widget

Use custom code to adjust the position of the subscription widget. Review customizing the Storefront for BigCommerce in the Developer Docs for more information. 

Recharge Checkout Integration on Shopify and Custom stores

Move the Recharge code snippet in your Shopify theme files to move the location of the subscription widget on the product page. See Changing the subscription widget location on the product page for more details. 

Shopify Checkout Integration JavaScript subscription widget

To move the subscription widget, place the following code into the Shopify theme file (examples: product.liquid or product-form.liquid) that contains the form HTML tag displayed on the product page: 

<div class="rc-widget-injection-parent"></div>

The widget code looks for this HTML element and places the widget there when rendering the product page. 

Shopify 2.0 widget

Use the Shopify Theme Editor to drag and drop the subscription widget to your preferred location on the product page. 

Customize HTML elements

Shopify Checkout Integration stores use a JavaScript widget, which means there are no theme files to apply custom HTML. 

If you would like to customize HTML elements of your subscription widget, you must apply custom JavaScript to your store's theme code to modify the subscription widget. 

Hide the 'Need help accessing your subscription?' link from the Customer Login page

Add div#rc_login {display: none !important;} to your store's general CSS file to hide the Need help accessing your subscription? link. 

Update the color of the selected radio buttons

You will need to implement custom CSS to update the radio button color. We recommend working with a third-party developer to have this custom CSS added to your store. 

Display the subscription widget on a custom theme

If you are building a custom theme, you must ensure the theme is prepared to handle Shopify's Subscription APIs and the selling plans that are attached to the product when the product is added to Recharge. 

Additional resources

To view additional guides and tutorials for customizing your Recharge integration, visit Recharge's Developer Docs.