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
Customer Portal styling
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 to Save to ensure all your changes are applied.
Credit card page styling
Customers can update their billing information on the Credit card page. You can add additional CSS to this page to control some visual aspects of the page.
Add custom CSS to the Credit card page through the Customer Portal settings page in your ReCharge Admin.
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.
Hide the ReCharge Logo from your checkout
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.
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.