Styles in Nova control the look of your whole customer portal theme, from button colors to card shadows and typography. Together with the Texts tab and the custom code editors, they let you match the portal to your brand and change every label your subscribers see.
This article covers how to find and change styles and texts, and when to use Custom CSS and Custom JS.
Styles
The Styles tab controls the look of the whole theme. To find a style, you can:
Click the component you want to change in Inspect mode
Use the search bar
Scroll through the style groups
To restore a group's defaults, click Reset on that group. Some additional styles added in Nova include:
Buttons: Along with colors, the corner radius, and hover intensity can also be configured without any custom code
Cards: You can choose to hide or show card shadows to match their storefront's aesthetic.
Typography: Heading 1 to 4 and Paragraph 1 to 3 sizes (rem, px, or em) along with line height can be modified in the styles section.
Texts
The Texts tab lists every label, button, and message on the page you're previewing. To find a field:
Click on the target component in Inspect mode
Use the search bar
Scroll through the available text groups
You can choose to modify any of the available texts, and manage their translations in Loop admin > Settings > Multilingual texts.
Custom CSS and Custom JS
Use Custom CSS and Custom JS for changes the Styles and Texts tabs don't cover. Both code editors expand, so longer code is easier to read and edit.
Every section, including custom sections you add, has an HTML ID in its settings. Copy it to target that section in Custom CSS.
FAQs
Can I change the button shape without custom code?
Yes, open Styles > Buttons to set the corner radius, colors and hover intensity.
Can I remove the shadows on cards?
Yes, you can hide card shadows in the Cards style group to match your storefront.
How do I undo my style changes?
Click Reset on a style group to restore that group's default styles.
Where do I translate the texts in the customer portal?
Navigate to Loop admin > Settings > Multilingual texts to manage translations for any text you change in the Texts tab.
Can I style a single section with Custom CSS?
Yes, copy the section's HTML ID from its settings and use it as the selector in Custom CSS.
Need help?
No worries - we're here for you! If you have any questions or need assistance, feel free to email us at [email protected] or chat with us using the support beacon at the bottom right of your screen.
Regards,
Loop subscriptions team 🙂