Noirva Theme

Configuration Guide for Store Owners

Version 1.0

Welcome to Noirva Theme

Noirva - A refined, editorial template for fashion & apparel stores

This guide will help you customize your store's look and feel. No coding knowledge required! Each section below explains how to configure different parts of your theme using the built-in theme editor. See the theme in action in the live preview, read more on the Noirva theme page or get it from the Ecwid App Market.

🚀 How to Use This Guide

  1. Open your theme editor/customization panel
  2. Find the section you want to customize
  3. Refer to this guide for what each setting does
  4. Make your changes and save
  5. Preview your changes before publishing

📋 Common Settings

Most sections share these settings:

  • Background: Choose colors or gradients for section backgrounds
  • Color schemes: Noirva has 22 sections, and most of them come in a light and a dark variation (e.g. "Brand Story — Light" and "Brand Story — Dark"). The light variations use the default color scheme, the dark ones a scheme with the darkest color of your palette as the background. You can switch any section to another scheme in the Design tab; its text, cards and buttons follow it and stay readable
  • Follows your palette: With the default scheme, white sections take your palette's page background and tinted sections its soft container color, while photo heroes keep their own colors. So a dark palette (like the Noir template) gives a dark page. A color you pick by hand in a section's Design tab always wins
  • Text Styling: Adjust size, color, bold, or italic, or hide a text
  • Show/Hide: Toggle elements on or off
  • Round Corners: On by default in most sections (off in the Hero); turn it off for square photos and cards
  • Accent Color: The gold details of the theme (small labels above titles, stars, ticker dots, highlights) use the "Strong accent" color of your store palette — change it under Design → Colors. Noirva darkens or lightens it just enough to stay readable on light and dark backgrounds
  • Buttons: Pill-shaped by default; each button setting lets you change appearance (solid, outline, text link), shape, size and color
  • Mobile Responsive: Everything works on phones and tablets automatically

Note: Section titles use the heading font of your template and all other text its body font. Title sizes are the size on wide screens — titles scale down on smaller screens.

Templates: Noirva ships with three templates that share the same sections and categories but differ in palette, fonts and home page:

  • Ivory (listed as "Noirva (Light)") — white and warm ivory with near-black text and a deep gold accent; Sora headings, Work Sans text; square corners. Its home page is a copy of the live preview: Hero Slider, Promo Banner, Product Grid, Shop by Category, Brand Story, Lookbook, Collections, Featured Product, Flash Sale, Logo Bar, Bundle Builder, Sale Marquee, Category Pills, Hero, Testimonials, Instagram Feed and two Marquee Tickers
  • Noir (listed as "Noirva (Noir)") — a dark, magazine-like store: near-black palette with a gold accent, Playfair Display headings, Manrope text, square corners and the dark header. Home page: full-screen Hero, Marquee Ticker, Collections, Lookbook, Scroll Manifesto, Product Grid, Dual Spotlight, Brand Story, Featured Product, Testimonials and Instagram Feed
  • Rouge (listed as "Noirva (Bold)") — a sale-driven store: light palette with a crimson accent, Syne headings, DM Sans text, rounded corners and the light footer. Home page: sale Hero, Category Pills, Product Grid, Flash Sale, Sale Marquee, Shop by Category, Featured Product, Lifestyle Shop, Bundle Builder, Promo Banner, FAQ and Logo Bar

Sections a template does not show (for example the Size Guide, which no template places on the home page) can be added with "Add section".

Product sections (Product Grid, Featured Product, Dual Spotlight, Bundle Builder, Lifestyle Shop and Flash Sale) show the products you pick. Left at "All products" or "Products by category", they show your newest products, so they are filled right after installing a template.

🎞️ Hero Slider

A full-width slider of photos, each with a small label, a large title, a short text and two buttons. The text of each slide fades and rises in, a soft gradient keeps it readable over the photo, and round arrows sit at the bottom right on wide screens (phones swipe). Two variations: Hero Slider — Dark and Hero Slider — Light.

Content Settings

⏱️ Autoplay

  • Autoplay: (TOGGLE) Automatically advance to the next slide (default: ON)
  • Autoplay Interval (seconds): (INPUTBOX) Time per slide; empty means 6 seconds

🖼️ Slides

Type: DECK (Repeatable, max 8)

  • Slide Image: (IMAGE) Slide photo
  • Eyebrow Text: (INPUTBOX) Small label above the title, e.g. "New Collection"
  • Slide Title: (INPUTBOX) Slide headline, e.g. "The New Season"
  • Slide Description: (TEXTAREA) Short paragraph under the title
  • Slide Button: (BUTTON) Main button (default: "Shop Now")
  • Slide Button (Secondary): (BUTTON) Optional second button

Design Settings

🎨 Styling

  • Eyebrow Text: (TEXT) Size (10-14px), color, bold/italic (default: 11px bold, accent color)
  • Slide Title: (TEXT) Size (28-80px), color, bold/italic (default: 60px bold, white)
  • Slide Description: (TEXT) Size (13-20px), color, bold/italic (default: 16px)
  • Primary Button Style: (BUTTON) Appearance, shape, size, color (default: Solid, Pill, Medium, white)
  • Secondary Button Style: (BUTTON) Appearance, shape, size, color (default: Outline, Pill, Medium, white)
  • Background: (BACKGROUND) Section background (default: dark charcoal)

🌟 Hero

A single large banner with a small label, a headline, a description and two buttons, in four layouts. Four variations: Hero — Dark Overlay, Hero — Split Light, Hero — Centered Sale and Hero — Follows colour scheme.

Content Settings

📐 Layout Style

  • Layout Style: (SELECTBOX) Choose the hero layout (default: Full Image Overlay):
    • • Full Image Overlay: Text over a full-width photo
    • • Text Left, Image Right: Text panel beside the photo
    • • Text Right, Image Left: The same, mirrored
    • • Centered Overlay: Centered text over the photo
  • Hero Image: (IMAGE) The photo

📝 Text & Buttons

  • Eyebrow Text: (INPUTBOX) Small label, e.g. "New Collection"
  • Headline: (INPUTBOX) e.g. "Dress for the Moment"
  • Description: (TEXTAREA) Short paragraph under the headline
  • Primary CTA: (BUTTON) (default: "Shop Now")
  • Secondary CTA: (BUTTON) (default: "View Lookbook")

Design Settings

🎛️ Display Options

  • Round Corners: (TOGGLE) (default: OFF)
  • Fullscreen Width: (TOGGLE) The split layouts span the whole window; off, they stay in the page column (default: ON)
  • Hero Image: (IMAGE) Color overlay over the photo (default: dark overlay)

🎨 Styling

  • Eyebrow Text: (TEXT) Size (10-14px), color, bold/italic (default: 11px bold, accent color)
  • Headline: (TEXT) Size (28-96px), color, bold/italic (default: 64px bold, white)
  • Description: (TEXT) Size (13-20px), color, bold/italic (default: 16px)
  • Primary CTA: (BUTTON) Appearance, shape, size, color (default: Solid, Pill, Medium, white)
  • Secondary CTA: (BUTTON) Appearance, shape, size, color (default: Outline, Pill, Medium, white)
  • Background: (BACKGROUND) Section background (default: dark charcoal)

🚚 Promo Banner

A row of your store's promises — e.g. "Fast & Free Shipping", "Secure Checkout", "Easy Returns" — each with an icon in a circle, a title and one line of text. Four per row on wide screens, two on phones. Two variations: Promo Banner — Light and Promo Banner — Dark.

Content Settings

✅ Features

Type: DECK (Repeatable, max 6)

  • Icon: (SELECTBOX) Shipping box, Delivery truck, Shield / secure, Lock, Returns / refresh, Support headset, Gift, Heart, Star, Sparkles, Credit card or Clock (default: Shipping box)
  • Title: (INPUTBOX) e.g. "Fast & Free Shipping"; features without a title are hidden
  • Description: (INPUTBOX) One short line under the title

Design Settings

🎨 Styling

  • Background: (BACKGROUND) Section background (default: white)
  • Text: (TEXT) Size (14-16px), color, bold/italic (default: 14px)

🛍️ Product Grid

"New Arrivals": up to 8 product cards as a swipeable carousel with arrows or a fixed grid. Each card shows the photo (the second photo on hover), the product's ribbon, name, price (with the old price crossed out on sale) and up to five color dots; a button slides up over the photo on hover and the card opens the product page. When the products come from more than one category, filter pills ("All" plus each category) appear above them. Variation: Product Grid — 4 Columns.

Content Settings

📝 Heading

  • Eyebrow Text: (INPUTBOX) e.g. "Curated For You"
  • Section Title: (INPUTBOX) e.g. "New Arrivals"
  • Description: (TEXTAREA) e.g. "The latest pieces, just in."
  • View All Button: (BUTTON) Beside the heading on wide screens (default: "View All")

🗂️ Products & Layout

  • Products: (PRODUCT_SELECTOR) Up to 8 products; "All products" or a category shows the newest ones
  • Display Mode: (SELECTBOX) "Carousel (swipeable)" or "Grid (fixed)" (default: Carousel)
  • Columns: (SELECTBOX) 2, 3 or 4 products per row on wide screens; phones show two (default: 4 Columns)
  • Card button text: (INPUTBOX) The button on the photo (default: "Quick Add"); it opens the product page

Design Settings

🎛️ Display Options

  • Round Corners: (TOGGLE) Rounded photos (default: ON)
  • Show Second Image on Hover: (TOGGLE) (default: ON)

🎨 Styling

  • Section Title: (TEXT) Size (20-44px), color, bold/italic (default: 36px bold)
  • Description: (TEXT) Size (13-16px), color, bold/italic (default: 14px)
  • View All Button: (BUTTON) Appearance, shape, size, color (default: Outline, Pill, Medium)
  • Card button: (BUTTON) Appearance, shape, size, color (default: Outline, Pill, Medium)
  • Background: (BACKGROUND) Section background (default: white)

🏷️ Shop by Category

Tall category cards with a photo and the name and subtitle underneath. On hover a button slides up over the photo (always visible on touch screens); the whole card is clickable. Up to six cards share one row on wide screens. Two variations: Shop by Category — 6 Columns (light) and Shop by Category — 4 Columns (dark).

Content Settings

📝 Heading

  • Section Title: (INPUTBOX) e.g. "Shop by Category"
  • Description: (TEXTAREA) e.g. "Explore our curated collections."

🗂️ Categories

Type: DECK (Repeatable, max 8)

  • Category Image: (IMAGE)
  • Category Name: (INPUTBOX) e.g. "Women"
  • Subtitle: (INPUTBOX) e.g. "120+ styles"
  • Link: (BUTTON) Destination of the card; its title is the button text (default: "Shop Now")

Design Settings

🎨 Styling

  • Round Corners: (TOGGLE) (default: ON)
  • Section Title: (TEXT) Size (20-44px), color, bold/italic (default: 36px bold)
  • Description: (TEXT) Size (13-16px), color, bold/italic (default: 14px)
  • Card button: (BUTTON) Appearance, shape, size, color (default: Solid, Pill, Small, white)
  • Background: (BACKGROUND) Section background (default: white)

📖 Brand Story

Your story beside a half-width photo: a small label, a headline, a paragraph, up to four figures in small boxes (e.g. "20 Yrs — Crafting Quality"), a button and an optional signature. Two variations: Brand Story — Light and Brand Story — Dark.

Content Settings

📝 Story

  • Layout: (SELECTBOX) Image Left or Image Right; on phones the photo is above the text (default: Image Left)
  • Eyebrow Text: (INPUTBOX) e.g. "Our Heritage"
  • Headline: (INPUTBOX) e.g. "Our Story"
  • Story Text: (TEXTAREA)
  • Signature (optional): (INPUTBOX) e.g. "— The Founders", shown in italics under the button
  • Button: (BUTTON) (default: "Discover More")
  • Image: (IMAGE)

🔢 Stats

Type: DECK (Repeatable, max 4)

  • Value: (INPUTBOX) e.g. "20 Yrs"
  • Label: (INPUTBOX) e.g. "Crafting Quality"

Design Settings

🎨 Styling

  • Headline: (TEXT) Size (24-42px), color, bold/italic (default: 36px bold)
  • Story Text: (TEXT) Size (14-18px), color, bold/italic (default: 16px)
  • Button: (BUTTON) Appearance, shape, size, color (default: Outline, Pill, Medium)
  • Background: (BACKGROUND) Section background (default: light gray)

📷 Lookbook

"The Lookbook": a row of tall look cards, each with a category tag, a title and a button on a gradient at the bottom of the photo, with a "View All" button beside the heading. Two variations: Lookbook — Light and Lookbook — Dark.

Content Settings

📝 Heading

  • Eyebrow Text: (INPUTBOX) e.g. "Style Inspiration"
  • Section Title: (INPUTBOX) e.g. "The Lookbook"
  • Description: (TEXTAREA) e.g. "Explore how to wear our latest pieces."
  • View All Button: (BUTTON) (default: "View All Looks"); moves under the row on phones

🖼️ Lookbook Items

Type: DECK (Repeatable, max 6)

  • Item Image: (IMAGE)
  • Category: (INPUTBOX) Tag on the photo, e.g. "Women"
  • Title: (INPUTBOX) e.g. "Summer Essentials"
  • Link: (BUTTON) Destination of the card; its title is the button text

Design Settings

🎨 Styling

  • Round Corners: (TOGGLE) (default: ON)
  • Section Title: (TEXT) Size (20-48px), color, bold/italic (default: 36px bold)
  • Description: (TEXT) Size (13-18px), color, bold/italic (default: 15px)
  • Button Style: (BUTTON) The View All button (default: Outline, Pill, Medium)
  • Card button: (BUTTON) The buttons on the photos (default: Solid, Pill, Small, white)
  • Background: (BACKGROUND) Section background (default: white)

🧥 Collections

"Shop by Collection": up to four photo tiles in an editorial arrangement — the first tile is always the largest, at the left; the others fill the right half. Each tile has a season tag, a name, a subtitle and a button over a gradient at the bottom of the photo. Two variations: Collections — Light and Collections — Dark.

Content Settings

📝 Heading

  • Eyebrow Text: (INPUTBOX) e.g. "Our Collections"
  • Section Title: (INPUTBOX) e.g. "Shop by Collection"
  • View All Button: (BUTTON) (default: "View All Collections")

🖼️ Collections

Type: DECK (Repeatable, max 4)

  • Collection Image: (IMAGE)
  • Season Tag: (INPUTBOX) e.g. "SS25"
  • Collection Name: (INPUTBOX) e.g. "Resort Collection"
  • Subtitle: (INPUTBOX) e.g. "42 pieces"
  • CTA Button: (BUTTON) (default: "Explore")

Design Settings

🎨 Styling

  • Round Corners: (TOGGLE) (default: ON)
  • Section Title: (TEXT) Size (20-36px), color, bold/italic (default: 36px bold)
  • Card Title Style: (TEXT) Size (16-24px), color, bold/italic (default: 20px bold, white)
  • Card Subtitle Style: (TEXT) Size (12-15px), color, bold/italic (default: 13px)
  • CTA Button: (BUTTON) The View All button (default: Outline, Pill, Medium)
  • Card button: (BUTTON) The buttons on the tiles (default: Solid, Pill, Small, white)
  • Background: (BACKGROUND) Section background (default: white)

⏳ Flash Sale

A countdown in the spotlight: a label, a headline, a short text, a days / hours / minutes / seconds timer, a coupon code with a "Copy" button and one button. When the end date has passed, the timer is replaced by "This offer has ended." Optionally, a photo behind the text and two columns of your products scrolling up and down beside it. Two variations: Flash Sale — Light and Flash Sale — Dark.

Content Settings

📝 Text & Countdown

  • Eyebrow Text: (INPUTBOX) e.g. "Limited Time Offer"
  • Headline: (INPUTBOX) e.g. "Flash Sale — Up to 40% Off"
  • Description: (TEXTAREA)
  • Sale End Date (ISO 8601): (INPUTBOX) The moment the timer counts down to, e.g. 2026-12-31T23:59:59
  • CTA Button: (BUTTON) (default: "Shop the Sale")

🎟️ Coupon

  • Coupon Code: (INPUTBOX) e.g. "SALE40"; shoppers can copy it with one click
  • Coupon Label: (INPUTBOX) e.g. "Use code at checkout"

The section only shows the code — create the matching discount coupon in your Ecwid admin.

🖼️ Photo & Product Marquee

  • Sliding Products (Left Column): (PRODUCT_SELECTOR) Up to 8 products
  • Sliding Products (Right Column): (PRODUCT_SELECTOR) Up to 8 products
  • Background Image: (IMAGE) Photo behind the text, darkened for readability

Both extras are off until you turn them on in the Design tab. The product columns show on wide screens.

Design Settings

🎛️ Display Options

  • Show background image: (TOGGLE) (default: OFF)
  • Show product marquee: (TOGGLE) (default: OFF)

🎨 Styling

  • Headline: (TEXT) Size (28-56px), color, bold/italic (default: 36px bold)
  • Description: (TEXT) Size (14-18px), color, bold/italic (default: 16px)
  • Button Style: (BUTTON) Appearance, shape, size, color (default: Outline, Pill, Medium)
  • Background: (BACKGROUND) Section background (default: light gray)

🔖 Logo Bar

"As Seen In": a row of press or partner logos under a small caption, shown in gray and in full color on hover (inverted on dark backgrounds). With six logos or more the row moves on its own; fewer are centered. Two variations: Logo Bar — Light and Logo Bar — Dark.

Content Settings

🏷️ Logos

  • Section Title: (INPUTBOX) e.g. "As Seen In"

Logos: DECK (Repeatable, max 12)

  • Logo Image: (IMAGE)
  • Alt Text: (INPUTBOX) The publication's name, used as the image description

Design Settings

🎨 Styling

  • Section Title: (TEXT) Size (12-14px), color, bold/italic (default: 13px)
  • Background: (BACKGROUND) Section background (default: light gray)

🧺 Bundle Builder

"The Perfect Style Pairing": three products side by side. Shoppers add each one to the bundle with the button on its photo, choose its options (colors as swatches, other options such as size as round buttons), see the running total and add the whole bundle to the cart with one button. The total is the sum of the chosen products' prices. Variation: Bundle Builder.

Content Settings

🛍️ Bundle

  • Section Title: (INPUTBOX) e.g. "The Perfect Style Pairing"
  • Description: (TEXTAREA)
  • Bundle Products: (PRODUCT_SELECTOR) Up to 3 products
  • Add to Cart Button Text: (INPUTBOX) e.g. "Add to cart"

Design Settings

🎨 Styling

  • Round Corners: (TOGGLE) (default: ON)
  • Title Style: (TEXT) Size (24-48px), color, bold/italic (default: 36px bold)
  • Button Style: (BUTTON) Appearance, shape, size, color of the "Add to cart" button (default: Outline, Pill, Medium)
  • Background: (BACKGROUND) Section background (default: light gray)

🏷️ Sale Marquee

Up to four tall photo panels, each with a large index number, a heading, a short text, a button and a moving ticker strip along the bottom (e.g. "TANK TOP SALE"). Variation: Sale Marquee — Light.

Content Settings

🖼️ Panels

  • Section Title: (INPUTBOX) e.g. "Minimal Fashion"

Panels: DECK (Repeatable, max 4)

  • Panel Image: (IMAGE)
  • Ticker Text: (INPUTBOX) e.g. "TANK TOP SALE"; empty hides the strip
  • Index Number: (INPUTBOX) e.g. "01"
  • Heading: (INPUTBOX) e.g. "Modern Fits for Modern Life"
  • Description: (TEXTAREA)
  • Button: (BUTTON) (default: "Shop Now")

Design Settings

🎨 Styling

  • Title Style: (TEXT) Size (24-48px), color, bold/italic (default: 36px bold)
  • Panel Heading Style: (TEXT) Size (18-28px), color, bold/italic (default: 20px bold, white)
  • Card button: (BUTTON) Appearance, shape, size, color (default: Solid, Pill, Small, white)
  • Background: (BACKGROUND) Section background (default: light gray)
  • Round Corners: (TOGGLE) (default: ON)

💊 Category Pills

A heading with a row of outlined pill links, e.g. to your categories. The row scrolls sideways when it is wider than the screen, with soft fades at the edges. Variation: Category Pills — Light.

Content Settings

📝 Heading & Pills

  • Eyebrow: (INPUTBOX) e.g. "Curated For You"
  • Section Title: (INPUTBOX) e.g. "New Season, New Style"
  • Subtitle: (INPUTBOX)

Category Pills: DECK (Repeatable, max 14) - Each with a Pill (BUTTON) for its text and destination

Design Settings

🎨 Styling

  • Eyebrow Style: (TEXT) Size (11-14px), color, bold/italic (default: 12px, accent color)
  • Title Style: (TEXT) Size (28-56px), color, bold/italic (default: 36px bold)
  • Subtitle Style: (TEXT) Size (14-18px), color, bold/italic (default: 16px)
  • Pill Shape: (SELECTBOX) Pill, Rounded Corners or Rectangle (default: Pill)
  • Background: (BACKGROUND) Section background (default: white)

💬 Testimonials

"What Our Customers Say": review cards with stars, the quote, a round customer photo (or their initial) with name and location. One, two or three whole cards per view depending on the screen, with arrows to move the row. Two variations: Customer Testimonials — Light and Customer Testimonials — Dark.

Content Settings

📝 Heading

  • Eyebrow Text: (INPUTBOX) e.g. "Reviews"
  • Section Title: (INPUTBOX) e.g. "What Our Customers Say"
  • Autoplay: (TOGGLE) Moves to the next review every 6 seconds and pauses while the pointer is over it; works when there are more than three reviews (default: ON)

⭐ Testimonials

Type: DECK (Repeatable, max 10)

  • Quote: (TEXTAREA) The review text
  • Customer Name: (INPUTBOX) e.g. "Sarah M."
  • Location: (INPUTBOX) e.g. "New York, USA"
  • Customer Photo: (IMAGE) Optional; without it the first letter of the name is shown
  • Star Rating: (SELECTBOX) 5, 4 or 3 Stars (default: 5 Stars)

Design Settings

🎨 Styling

  • Round Corners: (TOGGLE) Rounded review cards (default: ON)
  • Section Title: (TEXT) Size (20-36px), color, bold/italic (default: 36px bold)
  • Quote: (TEXT) Size (16-28px), color, bold/italic (default: 18px)
  • Author Style: (TEXT) Size (12-16px), color, bold/italic (default: 14px bold)
  • Background: (BACKGROUND) Section background (default: white)

📸 Instagram Feed

A mosaic of square photos — the first one twice as large — with your Instagram handle and a follow button. On hover a photo shows the likes and comments you entered and, for shoppable posts, a "Shop" tag. The photos are the ones you upload (it is not a live Instagram connection); every photo opens your profile link. Variation: Instagram Feed — Mosaic.

Content Settings

📝 Heading & Profile

  • Eyebrow Text: (INPUTBOX) e.g. "Follow Us"
  • Section Title: (INPUTBOX) e.g. "Our Instagram"
  • Instagram Handle: (INPUTBOX) e.g. "@yourbrand", shown with the Instagram icon under the title
  • Profile Link: (BUTTON) Your profile address (default: "Follow us on Instagram")

🖼️ Posts

Type: DECK (Repeatable, max 12)

  • Post Image: (IMAGE)
  • Caption: (INPUTBOX) Used as the image description
  • Likes: (INPUTBOX) e.g. "1200"
  • Comments: (INPUTBOX) e.g. "48"
  • Shoppable Post: (TOGGLE) Shows a "Shop" tag on hover (default: OFF)

Design Settings

🎨 Styling

  • Round Corners: (TOGGLE) Rounded photos (default: ON)
  • Section Title: (TEXT) Size (24-48px), color, bold/italic (default: 36px bold)
  • Button Style: (BUTTON) Appearance, shape, size, color of the follow button (default: Outline, Pill, Medium)
  • Background: (BACKGROUND) Section background (default: light gray)

➡️ Marquee Ticker

A band of large uppercase words that keeps moving across the screen, separated by accent-colored dots — a good divider between sections. Two variations: Marquee Ticker — Light (moving left) and Marquee Ticker — Dark (moving right).

Content Settings

📝 Words

  • Tags (comma separated): (TEXTAREA) e.g. TANK TOP, SUMMER, SHIRTS, JACKETS
  • Scroll Direction: (SELECTBOX) Left or Right (default: Left)

Design Settings

🎨 Styling

  • Background: (BACKGROUND) Section background (default: light gray); the words turn white on a dark background and near-black on a light one

✍️ Scroll Manifesto

One large statement that lights up word by word as the visitor scrolls: the section stays on screen while the words change from faint to full color. Variation: Scroll Manifesto.

Content Settings

📝 Statement

  • Manifesto Text: (TEXTAREA) e.g. "Classic designs, exceptional quality, and everyday versatility made to keep you looking confident wherever you go."

Design Settings

🎨 Styling

  • Text Style: (TEXT) Color, bold/italic; the size scales with the screen
  • Background: (BACKGROUND) Section background (default: light gray)

🌗 Dual Product Spotlight

Two products side by side on two contrasting halves (light at the left, dark at the right by default), each with its photo, name, your description and its price. Name, photo and price come live from your store, and the photo opens the product page. Variation: Dual Product Spotlight.

Content Settings

🛍️ Products

  • Left Product: (PRODUCT_SELECTOR) One product
  • Left Description: (TEXTAREA)
  • Right Product: (PRODUCT_SELECTOR) One product
  • Right Description: (TEXTAREA)

Design Settings

🎨 Styling

  • Left Background: (BACKGROUND) (default: light gray)
  • Right Background: (BACKGROUND) (default: dark charcoal)

The text on each half turns white or near-black automatically to stay readable.

🎯 Lifestyle Shop Banner

A wide lifestyle photo with a label, headline, text and button over it, and a panel beside it with a row of product cards (photo, ribbon, name and price) that scrolls sideways with arrows. On tablets and phones the photo, the text and the products stack. Variation: Lifestyle Shop Banner.

Content Settings

📝 Banner & Products

  • Eyebrow Text: (INPUTBOX) e.g. "Everyday Essentials"
  • Headline: (INPUTBOX) e.g. "Wear Premium Comfort Every Single Day"
  • Description: (TEXTAREA)
  • Button: (BUTTON) (default: "Explore")
  • Background Image: (IMAGE) The lifestyle photo
  • Featured Products: (PRODUCT_SELECTOR) Up to 6 products; "All products" or a category shows the 4 newest

Design Settings

🎨 Styling

  • Headline Style: (TEXT) Size (28-48px), color, bold/italic (default: 36px bold, white)
  • Round Corners: (TOGGLE) (default: ON)
  • Product Panel Background: (BACKGROUND) Background behind the product row (default: gray)
  • Button Style: (BUTTON) Appearance, shape, size, color (default: Solid, Pill, Medium, white)

❓ FAQ

"Frequently Asked Questions": the heading at the left and an accordion of questions beside it on wide screens (stacked on phones). One answer is open at a time; the plus icon turns into a cross when open. Two variations: FAQ — Light and FAQ — Dark.

Content Settings

📝 Heading

  • Section Title: (INPUTBOX) e.g. "Frequently Asked Questions"
  • Subtitle: (INPUTBOX) e.g. "Everything you need to know"

❓ Questions

Type: DECK (Repeatable, max 20)

  • Question: (INPUTBOX) e.g. "How do I care for this garment?"
  • Answer: (TEXTAREA)

Design Settings

🎨 Styling

  • Section Title: (TEXT) Size (20-36px), color, bold/italic (default: 36px bold)
  • Subtitle: (TEXT) Size (14-20px), color, bold/italic (default: 16px)
  • Question: (TEXT) Size (15-20px), color, bold/italic (default: 16px bold)
  • Answer: (TEXT) Size (13-17px), color, bold/italic (default: 15px)
  • Background: (BACKGROUND) Section background (default: light gray)

📏 Size Guide

Size charts in tabs (e.g. Tops, Bottoms, Shoes): each tab shows a table built from the lines you type and an optional note under it. Tables scroll sideways on phones. Two variations: Size Guide — Light and Size Guide — Dark.

Content Settings

📝 Heading

  • Section Title: (INPUTBOX) e.g. "Size Guide"
  • Subtitle: (INPUTBOX) e.g. "Find your perfect fit"

📋 Size Categories

Type: DECK (Repeatable, max 6)

  • Tab Label: (INPUTBOX) e.g. "Tops"
  • Size Note: (TEXTAREA) e.g. "Measurements are in centimeters. For a relaxed fit, size up."
  • Table Data (CSV): (TEXTAREA) One row per line, values separated by commas; the first line is the header row, e.g. Size,Chest,Waist,Hip then XS,80-84,60-64,86-90

Design Settings

🎨 Styling

  • Section Title: (TEXT) Size (20-36px), color, bold/italic (default: 36px bold)
  • Table Header Style: (TEXT) Size (11-14px), color, bold/italic (default: 12px bold)
  • Table Body Style: (TEXT) Size (12-15px), color, bold/italic (default: 13px)
  • Background: (BACKGROUND) Section background (default: white)

👗 Product Page

The Noirva product page: a mosaic gallery (one large image with the next three stacked beside it), a buy panel with pill-shaped option buttons and "Add to Bag", a note under the button, a service box with up to four notes and icons, the description and extra details as accordions or tabs, and a sticky add-to-cart bar. Found in the editor under Pages → Product page. Colors follow the color scheme of the store section.

Layout Presets

🧩 Seven Arrangements

  • Sidebar on the right (default) — gallery left, buy panel right
  • Description under the image — sidebar right, description below the gallery
  • Sidebar on the left
  • Three columns, sidebar right and Three columns, sidebar left
  • Split — the image fills the left half of the window, the buy panel the right half
  • Showcase — a full-width image row with the buy box as a card floating over it

Pick one with the layout icons at the top of the Product page settings.

Content Settings

🛒 Buy Panel

  • Note under Add to Bag: (INPUTBOX) One short line, e.g. "Free shipping on orders over $50"
  • Service note 1–4: (INPUTBOX) Short lines in the service box under the button, each with an icon by position: shipping, secure checkout, returns, support (defaults: "Fast & Free Shipping", "100% Secure Checkout", "Returns & Exchanges", "Our Premium Support"). Empty notes are hidden; with all four empty the box is not shown

📑 Extra Details

  • Extra details 1: Shipping & delivery title (INPUTBOX) and Shipping & delivery text (TEXTAREA) (default title: "Fit & Fabric")
  • Extra details 2: Returns title (INPUTBOX) and Returns text (TEXTAREA) (default title: "Delivery & Returns")
  • Description tab — title: (INPUTBOX) Optional name of the description's own tab when details are shown as tabs; empty uses the store's "Product Details" heading

Each extra block needs both a title and a text; clear them to hide it. The texts are the same on every product page.

Design Settings

🖼️ Image Gallery

  • Image placement: (SELECTBOX) Horizontal, Vertical or Full size images (default: Full size images)
  • Full size images: large image with side column: (TOGGLE) The first image large with the next three stacked beside it (default: ON)
  • Full size images: two per row: (TOGGLE) (default: OFF)
  • Zoom image on hover: (TOGGLE) (default: ON)
  • Show image alt text as description: (TOGGLE) (default: OFF)
  • Rounded image corners: (TOGGLE) (default: ON)

🎨 Options & Add to Bag

  • Color swatches — Size: (SELECTBOX) Small, Medium or Large (default: Medium)
  • Color swatches — Shape: (SELECTBOX) Circle, Square or Rounded Square (default: Circle)
  • Stock availability / Number of items / Product quantity: (TOGGLE) (default: ON)
  • Sticky add to cart bar: (TOGGLE) Once the page's own button has scrolled out of view, a bar at the bottom of the window shows the photo, name, price and chosen size, the size buttons (when there is more than one size) and the add button. It uses the page's own controls, so if a required option is missing the page scrolls to it (default: ON)

🧭 Navigation & Details

  • Breadcrumbs: (SELECTBOX) Show in sidebar, Show in header, or Do not show (default: Show in sidebar)
  • Show navigation arrows: (TOGGLE) Previous/next product (default: ON)
  • Show details as: (SELECTBOX) Accordions or Tabs (default: Accordions)
  • Collapsible product details and extra details: (TOGGLE) (default: ON)
  • Open product details by default: (TOGGLE) (default: ON)
  • Weight / Product attributes / Product description: (TOGGLE) (default: ON)

⚙️ Standard Ecwid Options

Show SKU (off by default), Loyalty bonuses, Outlets & stock, Estimated delivery time, Wholesale prices, Product reviews (one card or multiple cards), Favorites button and Share buttons (optionally as icons) — shown by default.

🗂️ Category Page

The page of a single category: a category header ("Split" by default — the title, breadcrumbs and the category's product count beside a rounded image), subcategory pills or another list style, filters and the product grid. Found in the editor under Pages → Category page. Colors follow the color scheme of the store section.

Content Settings

📝 Header

  • Header button: (BUTTON) Optional button in the category header
  • Subcategory slider — heading: (INPUTBOX) Title above the subcategory slider, e.g. "Shop by edit"

Design Settings

🖼️ Category Header

  • Category header: (SELECTBOX) Split (text beside the image), Simple title, Title with image and description, Banner (text over the image), or Cover (centred text over the image) (default: Split)
  • Header height: (SELECTBOX) 300–700px (default: 500px)
  • Rounded header corners: (TOGGLE) (default: ON)
  • Full-width header (breadcrumbs inside): (TOGGLE) (default: OFF)
  • Tinted band behind title and categories (simple title): (TOGGLE) With "Simple title", puts the title and the subcategories on a tinted band (default: OFF)
  • Black & white header image: (TOGGLE) (default: OFF)
  • Header image position: (SELECTBOX) Centered or From top (default: Centered)
  • Header background color / Header text color: (COLOR_PICKER)

🔎 Filters & Navigation

  • Category view: (SELECTBOX) Expanded or Collapsed categories (default: Collapsed)
  • Product filter placement: (SELECTBOX) On catalog and category pages, or On category pages (default: On category pages)
  • Filter panel orientation: (SELECTBOX) Vertical or Horizontal (default: Vertical)
  • Side to show filters: (SELECTBOX) Left or Right (default: Left)
  • Expand filter panel: (TOGGLE) (default: OFF)
  • Show "Sort by" options / Show bottom navigation menu / Show "Sign In" link: (TOGGLE) (default: ON)

🃏 Product Cards

  • Card grid spacing: (SELECTBOX) None, Narrow, Medium or Wide (default: Wide)
  • Content alignment: (SELECTBOX) Center, Left, Justify or Right (default: Left)
  • Image proportions: (SELECTBOX) Square (1:1), Portrait (2:3), Portrait (3:4), Landscape (4:3) or Landscape (2:3) (default: Portrait 2:3)
  • Card size: (SELECTBOX) Small, Medium or Large — sets how many cards fit in a row (default: Large)
  • Product name / Product subtitle / Price / SKU / "Buy now" button / Product rating: (SELECTBOX) Show, Do not show, or Show on mouse hover (defaults: name, subtitle, price and rating shown; SKU and "Buy now" hidden)
  • Color swatches: (SELECTBOX) Show or Do not show (default: Show)
  • Rating view: (SELECTBOX) Five stars or One star; plus Show average product rating / Show total number of reviews (TOGGLE, ON)
  • Rounded product image corners: (TOGGLE) (default: ON)
  • Show product card frame: (TOGGLE) (default: OFF)
  • Show main product image: (TOGGLE) (default: ON)
  • Show additional image on hover: (TOGGLE) (default: OFF)

📂 Subcategories

  • Show categories as: (SELECTBOX) Default, Slider, Tabs, Pills, Cards, Rows with thumbnail, or Image tiles (default: Pills)
  • Rounded corners on category images: (TOGGLE) (default: ON)
  • Name position: (SELECTBOX) On the image, Below the image, On mouse hover, Hide category names, or Hide category images (default: On the image)

🏬 Catalog Page

The main store page. By default it opens with a full-width banner (a tinted band with the texts until you add an image), then a slider of your main categories with their names and product counts, "All" plus category pills right above the products, and the product grid. Found in the editor under Pages → Catalog page. Colors follow the color scheme of the store section.

Content Settings

🖼️ Banner & Second Panel

  • Banner — image / small line / title / text under the title / button: (IMAGE, INPUTBOX, BUTTON) Used when the top of the page is "Banner" or "Two image panels" (defaults: "Shop all", "All Products", "Curated pieces for the modern wardrobe.")
  • Second panel (beside the banner) — image / small line / title / button: The second panel of "Two image panels side by side"

📂 Categories, Tile & Heading

  • Category row — small line above the heading / heading / text: (INPUTBOX) Heading above the category row (defaults: "Browse", "Shop by Category")
  • Category panels — button label: (INPUTBOX) (default: "Shop now")
  • Text tile — small line / title / button: A text tile at the end of the category row
  • Heading — small line above the title / title / text under the title: (INPUTBOX, TEXTAREA) An optional heading above the products

Design Settings

🎛️ Page Layout

  • Top of the page: (SELECTBOX) Banner (one image), Two image panels side by side, or Nothing (default: Banner)
  • Banner height: (SELECTBOX) 300–700 px (default: 500 px)

📂 Categories

  • Show categories as: (SELECTBOX) Slider (name and product count below), Portrait cards (one row), Full-width image panels, Hidden (products only), Default, Circles, Cards, Rows with thumbnail, or Image tiles (default: Slider)
  • Rounded corners on category images: (TOGGLE) (default: ON)
  • Show category pills above the products: (TOGGLE) "All" plus your main categories (default: ON)
  • Category panels per row: (SELECTBOX) 1–4 (default: 2)
  • Show a button on the category panels: (TOGGLE) (default: ON)
  • Show the "Featured products" title: (TOGGLE) (default: OFF)
  • Name position: (SELECTBOX) On the image, Below the image, On mouse hover, Hide category names, or Hide category images (default: On the image)

🔎 Filters & Product Cards

Same filter, navigation and product card settings as the Category Page (category view, filter placement and side, "Sort by", card grid spacing, image proportions, card size, what each card shows, rating view, rounded corners). On the catalog page color swatches on the cards are hidden by default.

🔎 Search Page

The page that opens when a shopper searches from the header. It has no settings of its own: the results use Noirva's product cards in the same column as the rest of the site, with the filter and product card settings of the Category Page. Colors follow the color scheme of the store section.

📖 Property Type Reference

INPUTBOX

Single-line text input for short content like titles, labels, URLs

TEXTAREA

Multi-line text input for descriptions, long content

BUTTON

Button configuration with text and link URL

IMAGE

Image upload supporting multiple resolutions (mobile/desktop, low/hi-res)

TOGGLE

On/off switch for enabling/disabling features

SELECTBOX

Dropdown menu with predefined options

DECK

Repeatable card items for creating lists, carousels, multiple entries

PRODUCT_SELECTOR

Pick products from your store catalog with configurable maximum

BACKGROUND

Background color or gradient picker with preset colors

TEXT

Advanced text styling: size, color, bold, italic, visibility

COLOR_PICKER

A single color, e.g. for the category header

LOGO

Your store logo image or store name, as set in the editor

NAVIGATION_MENU

Menu builder for top-level items and their sub-items

INFO

Information display with description and optional action button

DIVIDER

Visual separator in settings panel