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
- Do the settings in Translations work with Novum?
- What’s the difference between the Theme Editor and the Themes Customer Portal?
- How can I make minor style customizations to my Customer Portal?
- How can I customize the product cards in the Toss these in and Add products section?
Do the settings in Translations work with Novum?
Not at the moment. If you want to change the labels and text your customers see, we recommend using the Legacy Storefront Portal or Theme Engine.
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.
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.
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>