Articles in this section

See more

Customizing the Novum themes customer portal

This article goes through common questions about customizing the new Novum themes customer portal we've received over the beta and since release. See the dedicated Themes Customer Portal article for general information.

Sections

Note: The questions in this article require custom code and are not supported by ReCharge as per our design policy. If you require further assistance, visit the ReCharge Partner Directory.

What’s the difference between the Theme Editor and the Themes Customer Portal?

The Theme Editor, powered by the Theme Engine, is a feature available to all Pro merchants. It gives users 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 Themes Customer Portal and Novum theme. However, if you do have access to the Theme Editor, you can select and customize the Novum theme files by clicking Create new theme in the Theme Editor.

Do the settings in Translations work with Novum?

Yes, the language settings available in Translations work with the Novum theme.

Note: Language only found in Novum, such as Toss these in, isn't available to change in Translations yet. It is on our roadmap to eventually add the additional language fields to our translation settings so that you can customize every facet of the customer portal.

How can I make minor style customizations to my Customer Portal?

Open up your ReCharge Dashboard and go to Settings and Customer Portal.

There’s a section titled Customize styles, which contains space for you to customize the header code, footer code, and credit card page CSS.

Note: For security reasons, it is not possible to make changes to the Credit Card page through _card.css. Instead, you can make CSS changes through Settings, Customer Portal, Credit card page CSS.

How can I customize the product cards in the Toss these in and Add products section?

You can make changes to Novum's HTML, CSS, and JS in Settings, Customer Portal, Customize styles. Using this section, you can hide specific items, change the styling of the Toss these in product cards, and more.

Modify all product cards

Modify Toss me in

.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. 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 Toss these in sections.

<style>
 #product_1234567891011 {
  display: none;
 }
</style>

Hide the Toss me in section

The easiest way to completely hide the Toss these in section without affecting other parts of the customer portal is to hide the whole section using CSS.

In Footer HTML/CSS/JS section, select the upsells--wrapper element and give it a display: none; tag.

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

You can customize the colors of the Novum customer portal through Settings > Customer portal > Customize styles. 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 portal.

Note: The changes listed in this section were released on December 7th, 2020. All stores using the standard Novum theme changed over to the new Neutral color palette and have access to 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

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

Related articles