Advanced widget customizations
- Before you start
- Display the subscription widget on pages other than the product page
- Move the location of the subscription widget on your product pages
- Customize HTML elements
- Hide the 'Need help accessing your subscription?' link from the Customer Login page
- Update the color of the selected radio buttons
- Display the subscription widget on a custom theme
- Additional resources
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.
- Recharge Checkout on BigCommerce
- Recharge Checkout on Shopify
- Shopify Checkout Integration
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.
Note: Customizations contained in this guide are outside Recharge's scope of support. It is recommended that you work with a third-party developer to implement advanced customizations.
Display the subscription widget on pages other than the product page
Note: This is applicable to merchants using the Shopify Checkout Integration.
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.
Note: This is an advanced customization outside our scope of support. We recommend working with a third-party developer to implement this customization.
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 Subscription Widget 1.0
If your are using the Shopify Subscription Widget 1.0, use the Shopify Theme Editor to drag and drop the subscription widget to your preferred location on the product page.
Customize HTML elements
Note: This is applicable to merchants using the Shopify Checkout Integration.
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.
Note: This is an advanced customization outside our scope of support. We recommend working with a third-party developer to implement this customization.
Hide the 'Need help accessing your subscription?' link from the Customer Login page
Note: This is applicable to merchants using the Shopify Checkout Integration.
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
Note: This is applicable to merchants using the Shopify Checkout Integration.
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
Note: This is applicable to merchants using the Shopify Checkout Integration.
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.