Customizing the Novum customer portal theme FAQ

This article answers some of the common questions regarding customizing the Novum customer portal theme. If you are using the Prima customer portal theme, refer to Customizing the Prima customer portal theme. 

Sections

• What’s the difference between the Theme Editor and the Customer Portal Themes?
• Do the settings in the Translations settings page work with Novum?
• How can I make minor style customizations to my Customer Portal?
• How can I customize the product cards in the Try something new and Add products section?
• How do I customize the colors of the Novum customer portal?
• How can I customize the font of the Novum customer portal?

What’s the difference between the Theme Editor and the customer portal themes?

The Recharge Theme Editor, powered by the Theme Engine, is a feature available to all Recharge Pro merchants. It provides merchants with the ability to completely customize the customer portal experience including new functionality using custom coding.

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 in your Theme Editor:

1. Click Storefront in your merchant portal and select Theme editor.
2. Click Create new theme.
3. Choose Novum for your Theme template and click Create theme. 

Refer to Access the Recharge Theme Engine to learn more.

Do the settings in the Translations page work with Novum?

Yes, the language settings available in Translations work with the Novum theme. You can access this in your merchant portal:

1. Click Storefront in your merchant portal and select Translations.
2. Choose the Customer Portal - Themes tab. 

Refer to the Translations guide to learn more. 

How can I make minor style customizations to my customer portal?

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.

Refer to Customizing CSS styles in Recharge for more information.

How can I customize the product cards in the Try something new and Add products section?

Yes, you can make changes to Novum's HTML, CSS, and JavaScript. 

1. Click Storefront in your merchant portal and select Customer portal. 
2. Scroll down to the Customize styles section. In this section, you can hide specific items, change the styling of the Try something new product cards, and more.

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.

Adjust in the Translations settings

1. Click Storefront in your merchant portal and select Translations.
2. Choose the Customer Portal - Themes tab. 
3. Select the Subscriptions / Onetimes tab to find the translations specifically available for the Novum customer portal theme. 

How can I customize the colors of the Novum customer portal?

You can customize the colors of the Novum customer portal by clicking Storefront in your merhant portal, selecting Customer portal and navigating to the Customize styles section.

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;
}

How can I customize the font of the Novum customer portal?

In your merchant portal, click Storefront and select Customer portal. Scroll down to the Customize styles sections, and place your code using a font name and font family (such as serif, san-serif, monospace, for example). Afterwards, scroll further down and click the Save button.

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>