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
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. 

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.