Nova is in early beta. To request access for your store, contact your customer success manager (CSM) or email us at [email protected].
Nova is our newest customer portal theme, with a modern design for desktop and mobile, built around the features and flexibility that brands need most.
It offers a two-column desktop layout and more built-in functionality than earlier themes, such as no-code content sections, click actions, and a navigation bar. It also adds flexible styling for buttons, typography, and cards, all without custom code.
Nova covers the same customer portal pages as Advent, with a cleaner, more cohesive design and a modular layout you can customize
Subscriptions list page
Subscription details page
Gift details page
Gift recipient landing page
Your existing settings in Loop admin > Customer portal > Preferences still decide which actions your customers can take. Nova changes how the portal looks and how it's arranged, and customer actions stay the same.
Creating a Nova theme
Every new Nova theme starts as a draft. Drafts are only visible to you until you publish one to set it live.
Navigate to Loop admin > Customer portal > Themes, then click Create new under Draft themes.
Select Nova.
In Duplicate from, choose Start from a blank Nova theme or an existing Nova theme. Only Nova themes appear in this list.
Enter a Theme name, then click Create.
Click Customize on the new draft to open the editor.
Arranging the layout
The sections on subscription list page, gift details page, and gift recipient landing page on Nova match those in Advent. However, on desktop, Nova splits the subscription details page into four zones. Mobile has no columns, so every section stacks in one list that you can order separately.
Header: Full width, at the top
Main: Wider left column
Side: Narrower right column
Footer: Full width, at the bottom
In the Layout tab, you can:
Drag sections to reorder sections within a zone (desktop) or in the single list (mobile)
Click the eye icon to hide a section on the device you're editing
Click the arrow on a section to open its settings
Click + Add a section to add content in any zone
Default sections
Each page comes with a set of built-in sections. The table lists them in their default order. Note that custom sections can be added on
Page | Sections (default order) |
Subscription details: Header |
|
Subscription details: Main column |
|
Subscription details: Side column |
|
Subscription details: Footer |
|
Subscriptions list |
|
Gift details |
|
Gift recipient landing |
|
Settings offered for default sections
Several built-in sections have their own UI settings.
Subscription details page:
Navigation bar
The navigation bar is designed to help subscribers quickly navigate through their subscription details page. Open the Layout tab to configure this section.
Choose to show/hide separately on desktop and mobile
Configure up to 5 sections
Each tab has an icon, a name and a target section it scrolls to (any section on the page, including ones you add)
Subscription overview
The subscription overview card displays the next order date, subscription value, and subscription frequency. It also allows subscribers to edit frequency, or access the subscription management options configured by the you. Open the Layout tab to configure this section.
Buttons that can be shown on the card:
Order now, Delay, Reschedule, Skip, Gift, Change frequency, Cancel subscription, Pause subscription, Talk to customer support (with your own link), More menu, and Custom buttonsYou can hide, reorder, or move buttons to the more menu
Note: If a preference required to enable a button is not configured, it will be disabled in the admin portal UI, and hidden in the customer portal.
Products info
The products info section contains the products added in a subscription. Its settings can also be found in the Layout tab, and are used to configure product cards.
Show quick action buttons, which adds a quantity selector to product cards (Styles > Cards)
Choice of Primary and Secondary button: Hide button, Skip, Swap or Edit
Show button with icons only
Footer buttons
The footer buttons are placed at the bottom of the subscription details page. You can choose between the following to configure a Secondary and Tertiary button: Don't show, Pause subscription, Cancel subscription, Skip, Gift, Reschedule, Delay, Order now or Custom button.
Subscription list page:
Active contracts and actions
You can choose to show an order now button on the subscription card on the list page.
Custom sections
Adding a custom section
Custom section presets let you add your own content to any page or zone without writing code. Nova offers five types, and the Layout tab tags each one as Custom so you can tell it apart from built-in sections.
In the Layout tab, open the zone where you want the content.
Click + Add a section, then select a section type.
Fill in the section's fields.
You can reorder, hide per device, or delete a custom section. Every custom section has an Internal section name that only you see, an HTML ID, and Show on desktop and Show on mobile toggles. Each section also supports variables. Use the { } button in any text field to insert variables such as {{customer_first_name}}.
Type | Use it for |
Image | A photo or banner with an optional link or click action. |
Video | A product demo, how-to, or brand video. |
Text banner | A rich text editor and images with up to two buttons. |
FAQ | Common questions in an expandable list. |
Custom section | Any other rich content. |
Click actions for custom sections
Images and Text banner buttons can trigger an action when your customers click them.
Action | What happens | What you set up |
Don't do anything | Nothing; the content is display-only | — |
Open a link in new tab | Opens your URL in a new tab | The URL |
Trigger 'Order now' | Starts the Order now flow for that subscription | — |
Apply a discount | Applies a discount to the subscription | A Shopify discount code |
Add a product | Adds a product to the subscription | Product and purchase options |
For example, a skincare brand could add an image banner to promote a new serum they have launched and set its click action to Add a product.
Section visibility
Keep in mind, a section appears to your customers on their portal only when all three of these conditions are true:
The section is visible for that device in the Layout tab (eye icon, or the Show on desktop and Show on mobile toggles).
The related action or feature is turned on in your Loop settings. These can be found in preferences, settings, or alongside the respective feature pages in the admin portal depending on the section.
The section's own display condition is met.
Styles, texts, and custom code
Styles
The Styles tab controls the look of the whole theme.
To find a style, you can:
Click on the target component in Inspect mode
Use the search bar
Scroll through the available 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 when you would like to make more granular changes to your theme. Every section, including the ones you add, has an HTML ID in its settings that you can copy and target in Custom CSS. Both code editors are expandable, to make it easier to read and edit code.
What's new with Nova
Nova and Advent are both customer portal themes, and both use the same editor tabs: Layout, Styles, Texts, Custom CSS, and Custom JS. They differ in how the page is laid out and how much you can configure without code.
Area | Advent | Nova |
Desktop layout | One column of sections | Four zones: Header, Main column, Side column, and Footer. The main and side columns sit side by side. |
Mobile layout | Same order as desktop | Arranged separately, as one stacked list |
Section visibility by device | Same sections on desktop and mobile | Show or hide a custom section on desktop and mobile independently |
Custom sections | HTML custom sections (rich text editor) | No-code Image, Video, Text banner, and FAQ sections, plus the standard custom section |
Click actions in custom sections | Built with custom code | Open a link, trigger Order now, apply a Shopify discount code, or add a product. Custom code is still supported. |
In-portal navigation | Built with custom code | Navigation bar with up to 5 tabs that jump to sections |
Subscription actions | Dedicated sections (Order actions, Pause subscription, Cancel subscription) that you position in the list | Buttons on the Subscription overview card, a More menu, and Footer buttons. You choose and reorder each one. |
Additional built-in sections | None | Upcoming delivery banner, Order summary, Subscription savings, Manage other subscriptions |
Button styling | Color | Color, corner radius presets, and hover intensity |
Typography | Set with Custom CSS | Heading 1 to 4 and Paragraph 1 to 3 sizes (rem, px, or em), and line height |
Cards | Colors | Colors plus an optional shadow |
Both themes give your subscribers the same core experience. The difference is mostly in how you build and customize the portal. Nova suits brands that want a two-column desktop layout, no-code content sections, and more styling control in the editor. We're committed to enhancing Nova to make managing subscriptions easier for you and your subscribers.
FAQs
Can I switch my Advent theme to Nova?
Yes, create a new Nova theme from blank or from another Nova theme and publish it. Your Advent themes stay in Draft themes, so you can switch back at any time by publishing one.
Where can upsells go in Nova?
Upsells have one position: the Side column on desktop. If you don't use upsells, you can also fill the Side column with your own content, such as an educational video or a custom promotional banner.
Which discounts can a banner or image apply?
Banners and images can apply Shopify discount codes only.
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 🙂