Change CSS styles on ReCharge + Checkout

You can customize the CSS on the following pages:

  • Customer Portal
  • Checkout Pages
  • Pages on your main Shopify site (product, cart, collections, etc.)

Customer Portal

To edit the CSS of the Customer Portal you have to open your ReCharge panel --> General Settings --> Customize Customer Portal --> there you have two fields to change the css. 

You can add CSS tags, HTML entries and even JS code directly in the Header/Footer sections:

Don't forget to hit the save button to ensure all your changes will be applied.

Checkout Page

To edit the CSS of the ReCharge Checkout Page you have to open your ReCharge panel --> General Settings --> Checkout Page --> there you can add the url of your current checkout CSS, edit some colors and also add more styles directly if you need it.

CSS Adjustments to your Main Shopify Site

For the product/cart/collections/etc. pages, the CSS can be adjusted on your main Shopify site like normal. If you wish to adjust the CSS of the subscription radio options/widget, you can find 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 you have to open your ReCharge panel --> Subscription Widget --> and there you can change the color of the font and the color of background.

If you need to change more CSS there you have to open the snippet called "subscription-product.liquid" in your Theme Editor on Shopify and go into the lines 205 and 326. 

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