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. 

Platform	Sections you can customize
BigCommerce Checkout Integration	Customer portal styles Subscription widget on the product page Advanced customizations to the JS subscription widget Note: Merchants using the BigCommerce Checkout Integration do not have access to checkout settings in Recharge, as this is handled directly by BigCommerce. Refer to BigCommerce’s guide on Customizing the style of your checkout.
Recharge Checkout on BigCommerce	Customer portal styles Credit card page styles Checkout styles Subscription widget on the product page
Recharge Checkout on Shopify	Customer portal styles Credit card page styles Checkout styles Subscription widget on the product page Add additional CSS to subscription-product.liquid snippet in Shopify
Shopify Checkout Integration	Customer portal styles Subscription widget on the product page Advanced customizations to the JS subscription widget Note: Merchants using the Shopify Checkout Integration do not have access to checkout settings in Recharge, as this is handled directly by Shopify. Refer to Shopify's guide on Customizing the style of your checkout.

Customer portal

Customer portal styles

1. In the merchant portal, click Storefront 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. In the merchant portal, click Storefront 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. In the merchant portal, click Storefront 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. In the merchant portal, click Storefront 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. 

BigCommerce Checkout Integration

Merchants using the BigCommerce 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.