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 click the wrench icon then select the 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
- Recharge Checkout on Shopify
- Recharge Checkout on BigCommerce
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
- Recharge Checkout on Shopify
- Recharge Checkout on BigCommerce
In your Recharge Dashboard click the wrench icon then select Checkout, where 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
- Recharge Checkout on Shopify
To edit the CSS of the widget in your product page, in your Recharge Dashboard click the wrench icon then select Subscription Widget, where 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.
