Customize CSS Styles on ReCharge and Checkout

This guide will briefly cover some customization of the CSS on the following pages:

  • Customer Portal
  • Checkout
  • Main Shopify Site (product, cart, collections, etc...)
  • Widget on Product Page

Customer Portal

In your ReCharge Dashboard under Settings > Customer Portal you will have two fields in which to change the CSS along with a series of other control settings. You can add CSS tags, HTML entries, and even JavaScript code.

Don't forget Save to ensure all your changes are applied.

Checkout

In your ReCharge Dashboard under Settings > Checkout you can add the URL of your current checkout CSS. You can also edit some colors and also add more styles directly if needed.

Don't forget Save to ensure all your changes are applied.

Main Shopify Site

For the product, cart and collections pages, the CSS can be adjusted on your main Shopify site like normal. If you wish to adjust the CSS of the subscription radio widget, you can find the code in your Shopify theme editor in the subscription-product.liquid file.

Widget on Product Page

To edit the CSS of the widget in your product page, in your ReCharge Dashboard under Settings > Subscription Widget you can change the verbiage, as well as the color of the font and background.

If you need to change more CSS here, you will have to open the snippet called subscription-product.liquid in your theme editor in Shopify and go into the line 309 where it says: 

/* Add custom CSS below */

Don't forget Save to ensure all your changes are applied.

Still stuck? How can we help? Still stuck? How can we help?