Customizing the Novum customer portal theme
This guide explains how to get started using advanced customizations with the Novum customer portal theme.
Before you start
- CSS customizations can be added through your Recharge customer portal settings.
- The language settings available in Translations work with the Novum theme.
- The Theme Editor is not required to access or activate the customer portal themes, including the Novum theme. However, if you do have access to the Theme Editor, you can select and customize the Novum theme files. Refer to Access the Recharge Theme Engine to learn more.
Customize product cards
You can hide specific items, change the styling of the Try something new product cards, and more using HTML, CSS, and JavaScript:
- Click Storefront in your merchant portal and select Customer portal.
- Scroll down to the Customize styles section, which contains space for you to customize the header code, footer code, and credit card page CSS, depending on your Recharge checkout platform.
Modify all product cards
Modify Try something new
.js-toggle-card.text-center.rc_element_wrapper.rc_single_product_card-wrapper
Modify Add products
.rc_product_card.border-light.text-center.rc_single_product_card-wrapper
Modify a single product card
Use the product ID for the card you want to modify (see instructions for finding the product ID in Shopify or BigCommerce). All product card IDs are tied to the product ID.
<style>
#product_1234567891011 {
background-color: #7FC582 !important;
}
</style>
Hide a specific product
You can use CSS to hide the product from the Add product and the Try something new sections.
<style>
#product_1234567891011 {
display: none;
}
</style>
Hide the Try something new section
The easiest way to completely hide the Try something new section without affecting other parts of the customer portal is to hide the whole section using CSS.
In Footer HTML/CSS/JS section of your customer portal settings, select the upsells--wrapper element and give it a display: none; tag.
Refer to Customizing CSS styles in Recharge for more information.
Additional customizations
Customize the colors of Novum
Using the new variables, put your CSS into the Header, Footer, and Credit Card fields. CSS is centralized for colors, you can modify it in one place and it will be visible across all of the Novum customer portal.
The Credit Card field is not applicable to merchants using the Shopify Checkout Integration, as the checkout process is handled directly by Shopify. These merchants can refer to Shopify's guide on customizing the style of your checkout.
New variables
Variable |
Function |
preview-primary: #FFFFFF; | Modifies the product preview modal background, card background, modal background, primary button color, and the primary button hover color. |
primary-background: #F8F8F8; | Modifies the theme background color. |
secondary-background: #F0F0F0; |
Modifies navbar/menu background, divider on subscription card in subsciprtions.html and borders on inputs. |
button-primary: #252525; | Modifies primary button background, primary button hover background, navbar option color, H2, and H3 titles. |
button-secondary: #252525; | Modifies card titles. |
input-color: #252525; | Modifies H4 titles, paragraphs, and spans. |
color-light-green: #50B68E; |
Modifies the text color of the upcoming charge date and the delivery schedule's frequency. |
Example code
/* Colors */
body#recharge-novum {
--preview-primary: #ffffff;
--primary-background: #f8f8f8;
--secondary-background: #f0f0f0;
--button-primary: #252525;
--button-secondary: #252525;
--input-color: #252525;
}body#recharge-novum {
--primary-color: var(--button-primary);
--color-white: var(--preview-primary);
--color-black: #000000;
--color-green: var(--input-color);
--color-red: #ff0000;
--color-dark-red: #ec3d11;
--color-transparent: #00000000;
--color-light-green: #50B68E;
--color-dark-green: var(--button-secondary);
--color-light-blue: var(--secondary-background);
--color-thin-blue: var(--secondary-background);
--color-turquoise-blue: #09919E;
--color-gray: #808f99;
--background-color: var(--primary-background);
--background-green: var(--button-primary);
--color-subscription-expired: #c0c0c0;
--border-color: var(--secondary-background);
--info-modal-color-dark: #424242;
--info-modal-color-light-gray: #cccccc;
--color-orange: #f1833b;
--info-modal-color-blue: #317d94;
}
Customize the font
You can update the font used in Novum by placing your code using a font name and font family directly in the Customize styles section.
Example code
<style>
body#recharge-novum {
--custom-primary-font: "Font name", sans-serif";
--custom-secondary-font: "Font name", sans-serif";
}body#recharge-novum {
--recharge-te-primary-font: var(--custom-primary-font);
--recharge-te-secondary-font: var(--custom-primary-font);
}
</style>