Customizing CSS styles in Recharge

You can customize the CSS for the customer portal, checkout, subscription widget, and more, depending on your Recharge checkout platform. This guide covers the customization steps and compatibility for each platform. 

Platform compatibility

The sections you can customize differ based on the Recharge checkout platform you're using. Refer to the table below to confirm which sections in this guide are relevant to your platform. 

Customer portal

Customer portal styles

1. Click Storefront in the merchant portal and select Customer portal. 
2. Scroll down to the Customize styles section.
3. Add CSS, HTML, or JavaScript code in the Header and Footer sections. 
4. Click Save. 

Credit card page styles

Customers can update their billing information on the Credit card page.

1. Click Storefront in your merchant portal and select Customer portal. 
2. Scroll down to the Customize styles section.
3. Add additional CSS to the Credit card page CSS field to control visual aspects of the page.
4. Click Save. 

Checkout styles

1. Click Storefront in your merchant portal and select Checkout. 
2. Enter your customizations in the Styles section. 
   1. Enter your Logo or Favicon URLs. 
   2. Customize the colors and font for your button, links, and more. 
   3. Add custom CSS in the CSS editor box. 
3. Click Save. 

Hide the Recharge Logo from your checkout

To hide the Recharge logo from your checkout, add .admin-notice{ display:none !important; } to the CSS editor field on the Checkout Settings page.

Subscription widget on the product page

You can customize aspects of your subscription widget such as colors, fonts, and more. 

1. Click Storefront in your merchant portal and select Subscription widget. 
2. Make your desired customizations.
3. Click Save. 

Recharge Checkout on Shopify

Merchants using the Recharge Checkout on Shopify can add additional custom CSS in the Shopify theme editor. 

1. In your Shopify Admin, click Online Store and select Themes. 
2. On the theme you are working with, click Actions and Edit code. 
3. Open the subscription-product.liquid snippet and find /* Add custom CSS below */, and enter your custom CSS. 
4. Click Save. 

Shopify Checkout Integration

Merchants using the Shopify Checkout Integration can refer to the guide Advanced customizations to the JS subscription widget to learn more about additional customizations that can be made to the subscription widget.