Customizing the Novum customer portal theme
Relevant to:
Shopify Checkout Integration
Recharge Checkout on BigCommerce
BigCommerce Integration
Migrated Shopify Checkout Integration
This guide explains how to get started using advanced customizations with the Novum customer portal theme.
Note: The Prima and Novum customer portal themes will be deprecated on December 31, 2025. Starting in January 2025 merchants will be automatically upgraded to the Affinity portal. We recommend reviewing the theme functionality and upgrading before the deadline. Note that the upgrade to Affinity is final. For more details, see Upgrading to the Affinity customer portal FAQ.
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.
Note: Updating styling through CSS requires custom code and is not supported by Recharge as per the design and integration policy. If you require further assistance, work with a certified Recharge partner.
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.
Note: The changes listed in this section were released on December 7th, 2020. All stores using the standard Novum theme have been updated to the new Neutral color palette and can access the color variables immediately. For stores using the Theme Engine, you'll only see the new variables if you update your theme file.
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 entering the font name and 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>
Was this article helpful?
1 out of 1 found this helpful
