NOVA — Setup Guide

Version 1.0 · 4 October 2026 · By UnderLoop

NOVA is an editable Framer website template for skincare and beauty brands. Use it to present products, tell your brand story and publish journal articles.

Start here

1. Open the remix link supplied with your purchase and choose Copy to add NOVA to your Framer workspace.
2. Rename your copy and replace the NOVA brand name, logo, contact information and demo content.
3. Edit Products and Journal in CMS. Check their list and detail pages after saving.
4. Add your real external checkout URLs, or keep the enquiry path and configure your contact details.
5. Update site images and SEO settings, publish, and complete the launch checklist below.

Framer hosting, domains and third-party services are separate from this template. Check the plan requirements for your intended site and its custom code before launching.

Included pages

Home, Shop, Products CMS detail, About, Ingredients, Journal listing, Journal CMS article, FAQ, Contact and 404. The demo contains six products and three journal articles.

Edit the design

Use the shared header/footer components and text/color styles for consistent changes. The palette combines ivory, warm white, charcoal, sage and stone; typography uses DM Serif Display and Inter.

Desktop begins at 1200 px; Tablet covers 810–1199 px; Phone covers widths below 810 px. Check each breakpoint after changing long text or imagery. Mobile navigation uses visible, wrapping links.

To edit a multi-paragraph text layer, select it in Layers and press Enter. Edit within the canvas text editor to preserve paragraph breaks and bold labels.

Products CMS

Edit product names, slugs, descriptions, display prices, sizes, images, ingredients, skin type and usage information in Products. Price Display is presentation text, not a live price connected to a payment service. Keep it consistent with the destination checkout.

Keep slugs unique. Changing a published slug changes its address; review any links and redirects. Featured and Sort Order support catalog presentation; verify the resulting list order in Home and Shop.

Hero Image appears in product cards and detail pages. Use consistent source proportions and check the crop at each breakpoint. Give images descriptive alt text.

Gallery Images appears as an inline grid below the main product image: two columns on desktop and one on phone. Empty galleries hide the grid. Daily Cleanser includes one supplementary image; the other demo galleries are empty. The gallery is not a lightbox or carousel.

If you use optional CMS fields, confirm their actual visible bindings in the detail template; the existence of a field alone does not guarantee that it is displayed.

Checkout and enquiries

External Checkout URL is optional:

• Filled: the detail page displays Shop this product, linking to your external destination.
• Empty: it displays Enquire about this product, linking to Contact.

Update the Contact page before accepting enquiries. Test every real checkout destination separately. NOVA does not include a cart, payment processing, stock tracking, tax calculation, shipping or order management.

Journal CMS

Replace Title, Slug, Excerpt, Cover, Body, Author, Date and Category. Edit article paragraphs and headings within the rich-text body. Check cover crops, article typography and the displayed author/date.

The current Journal SEO binding uses Title and Excerpt. An additional SEO Description field, if retained, does not automatically override that binding. Set a different binding in page settings if required.

Home slideshow

Home uses a native Slideshow inside the existing Hero image area. Its four image sources sit outside the page breakpoints on the Home canvas:

• Hero Slide 01 — Daily Cleanser
• Hero Slide 02 — Hydration Serum
• Hero Slide 03 — Barrier Cream
• Hero Slide 04 — Vitamin C Serum

Replace each source frame's image fill and alt text. Keep the Slideshow Content list connected to these frames. Defaults: autoplay, repeating sequence, 4.5-second interval, 1.2-second Ease in out slide, one item, zero gap; arrows, dots and dragging off.

Also replace the original image fill on Sage product still life. This remains the static image for visitors who prefer reduced motion. Keep that layer name or update its selector in Settings → Code → Focus styles. Do not change Hero dimensions just to fit a replacement image; review its crop instead.

Accessibility scripts

Two small entries in Settings → Code support the native design:

Focus styles provides visible keyboard focus, a light outline in the dark footer, a topmost inner outline for image cards, and the static Hero fallback for reduced motion.

NOVA accordion accessibility adds Space support and updates aria-expanded from the native Open/Closed variant. Keep the Question Row button layer name and the Open/Closed variant names, or update the script selectors when renaming them. Enter and mouse activation remain native.

Keep both entries enabled on all pages. Custom code is tested on the published site; the editor preview does not apply these global entries. After publishing, test Tab, Space and Enter on FAQ and product accordions and check the static Hero with reduced motion enabled.

Contact and newsletter

The Contact page contains demo contact information. Replace it with your chosen contact route. The newsletter section is a service-setup notice, not a working signup form. No contact-form or newsletter backend is included. Add and test your chosen service before collecting messages or subscriptions.

Images and demo content

All NOVA imagery is AI-generated, as confirmed by the creator. The products and packaging are fictional. Demo descriptions, ingredient information, prices and editorial text are illustrative. Replace them with accurate information for your own brand. Keep the demo disclosure while using NOVA as a demonstration brand.

SEO and brand images

Update Settings → General and individual page settings. Product titles/descriptions use Name and Short Description; Journal uses Title and Excerpt. Replace the 1200 × 630 social image, 64 × 64 light/dark favicons and 180 × 180 Apple touch icon. Keep the custom 404 page and verify it using a nonexistent address after publishing.

Launch checklist

• Replace the demo brand, product information and contact details.
• Verify all product, article, navigation and checkout links.
• Check desktop, tablet, 390 px and 320 px layouts, including long titles and empty galleries.
• Test Tab focus, Space/Enter accordions and mouse activation.
• Test 200% browser zoom and reduced motion on the published site.
• Check social previews, favicon, page titles and descriptions.
• Test any services you added, including checkout and forms.

License and support

One purchase covers one end website, for your own business or one client. Each separate website requires its own license. Do not resell or redistribute NOVA as a template, or share the purchase remix link publicly. See TERMS.md for the license, refund and support terms.

For purchase assistance, contact UnderLoop at underloopstudio@gmail.com. Include your purchase email or receipt reference and a short description of the issue. Do not send passwords or payment-card details.