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.
Note: To hide the ReCharge logo on the checkout in the top right, use .admin-notice{ display:none !important; }in the CSS editor on the checkout settings page.
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 150 where it says:
/* Add custom CSS below */
Don't forget Save to ensure all your changes are applied.