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:

1. Click Storefront in your merchant portal and select Customer portal. 
2. 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

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>