Spectra Theme

Configuration Guide for Store Owners

Version 1.0

Welcome to Spectra Theme

This guide will help you customize your store's look and feel. No coding knowledge required! Spectra is a soft, botanical template for skincare and beauty stores. Each section below explains how to configure the different parts of your theme using the built-in theme editor.

🚀 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:

  • Color scheme: Every section follows the color scheme you pick under Design → Color scheme; most sections come in a light and a dark variation
  • Background: Choose colors or gradients for section backgrounds (a saved background color wins over the color scheme)
  • Text Styling: Adjust size, color, bold, or italic, or hide a text
  • Show/Hide: Toggle elements on or off
  • Heading alignment: Left by default; most sections let you center or right-align their heading
  • Round corners: On by default; turn it off to give the photos and cards of that section square corners
  • Warm photo tone: Where offered, a soft warm filter that keeps photos in the theme's palette (on by default)
  • Italic Words: Put asterisks around a word in a title to set it in italics, e.g. Questions, *answered*
  • Buttons: Pill-shaped by default; button settings let you change appearance, shape and size
  • Accent Color: Button hovers, the bag count, sale prices, numbers and small details use the "Strong accent" color of your store palette (rose clay by default) — change it under Design → Colors
  • Mobile Responsive: Everything works on phones and tablets automatically

Note: Spectra's typography is part of the design: titles use the Cormorant headline font in regular weight, with the italic accent word you mark with asterisks, and body text and buttons use Jost. Title sizes are the size on wide screens — titles scale down smoothly on smaller screens.

🎞️ Hero Slider

The first section of the home page: one or more slides with a title, text and buttons, in three layouts — Split (text beside the photo), Full bleed (text over the photo) and Arch (an arched photo, used on the About page).

🎭 Ready-made variations

Add the section from "Add section" in one of its variations: Hero slider — Split; Hero slider — Full bleed, dark; Hero slider — Arch (About). Dark variations use a dark color scheme; switch any variation to another scheme under Design → Color scheme.

Content Settings

📝 Content

  • Hero style: (SELECTBOX) Split: photo beside a tinted text panel. Full bleed: one large photo with a text card. Arch: text beside an arched photo, with slide tabs. Options: “Split”, “Full bleed”, “Arch” (default: Split)
  • Autoplay: (TOGGLE) Automatically advance to the next slide. (default: ON)
  • Time per slide: (SELECTBOX) Time each slide stays on screen. Options: “3 seconds”, “4 seconds”, “5 seconds”, “6 seconds”, “8 seconds”, “10 seconds”, “12 seconds” (default: 6 seconds)

🗂️ Slides (up to 5)

  • Kicker (also the tab label in the Arch style): (INPUTBOX) Single-line text (default: “New batch”)
  • Title: (INPUTBOX) Single-line text (default: “Rosehip oil, *pressed* this month”)
  • Text: (TEXTAREA) Longer text (default: “A nightly face oil that softens and evens skin tone. Small batch, c…”)
  • Button: (BUTTON) Button text and where it links to
  • Photo: (IMAGE) Upload an image

Design Settings

🎛️ Display Options

  • Round corners: (TOGGLE) On/off switch (default: ON)
  • Warm photo tone: (TOGGLE) On/off switch (default: ON)
  • Button: (BUTTON) Button look: appearance (solid, outline or text link), shape and size (default: solid, pill, medium)

🎨 Text Styling

  • Kicker: (TEXT) Size (11-14px), color, bold/italic, show or hide (default: 12px, #9a5a52)
  • Title: (TEXT) Size (60-96px), color, bold/italic, show or hide (default: 84px, #3a2a26)
  • Text: (TEXT) Size (15-20px), color, bold/italic, show or hide (default: 17px, #6e5751)

🖌️ Colors & Backgrounds

  • Background: (BACKGROUND) Background color or gradient (default: #faf6f2)

🏷️ Shop by Ritual

Category tiles with arched photos and names, linking to your store categories — the design's "Shop by ritual" row.

🎭 Ready-made variations

Add the section from "Add section" in one of its variations: Shop by ritual — Arched tiles; Shop by ritual — Dark, four steps. Dark variations use a dark color scheme; switch any variation to another scheme under Design → Color scheme.

Content Settings

📝 Content

  • Kicker: (INPUTBOX) Single-line text
  • Title: (INPUTBOX) Single-line text (default: “Shop by *ritual*”)
  • Link beside the title: (BUTTON) Button text and where it links to

🗂️ Category tiles (up to 8)

  • Image: (IMAGE) Upload an image
  • Store category (link and product count; else found by the tile name): (CATEGORY_SELECTOR) Pick a category from your store
  • Name (replaces the category name): (INPUTBOX) Single-line text
  • Tile link: (BUTTON) Button text and where it links to

Design Settings

🎛️ Display Options

  • Heading alignment: (SELECTBOX) Options: “Left”, “Center”, “Right” (default: Left)
  • Round corners: (TOGGLE) On/off switch (default: ON)
  • Warm photo tone: (TOGGLE) On/off switch (default: ON)
  • Show product count: (TOGGLE) On/off switch (default: ON)
  • Link beside the title: (BUTTON) Button look: appearance (solid, outline or text link), shape and size (default: text link, pill, medium)

🎨 Text Styling

  • Kicker: (TEXT) Size (11-14px), color, bold/italic, show or hide (default: 12px, #9a5a52)
  • Title: (TEXT) Size (44-72px), color, bold/italic, show or hide (default: 60px, #3a2a26)
  • Tile name: (TEXT) Size (18-30px), color, bold/italic, show or hide (default: 22px, #3a2a26)

🖌️ Colors & Backgrounds

  • Background: (BACKGROUND) Background color or gradient (default: #faf6f2)

🛍️ Product Tabs

A product grid or carousel with up to three tabs. Each tab shows your newest products, your store order, a category or products you pick, with quick add to bag.

🎭 Ready-made variations

Add the section from "Add section" in one of its variations: Best sellers — Light grid; Product tabs — Dark carousel. Dark variations use a dark color scheme; switch any variation to another scheme under Design → Color scheme.

Content Settings

📝 Content

  • Kicker: (INPUTBOX) Single-line text
  • Title: (INPUTBOX) Single-line text (default: “Our *best sellers*”)
  • Link next to the title: (BUTTON) Button text and where it links to
  • Tab 1 — label (also finds the category by name): (INPUTBOX) Single-line text (default: “Best Sellers”)
  • Tab 1 — products to show: (SELECTBOX) A category shows the category picked below; with none picked, the store category named like the tab, else the first one. Newest products and Store order need no setup. Picked products always win. Up to 8 products. With one tab label, no tabs are shown. Options: “Newest products”, “Store order (featured first)”, “A category”, “Picked products” (default: A category)
  • Tab 1 — category (for "A category"): (CATEGORY_SELECTOR) Pick a category from your store
  • Tab 1 — picked products: (PRODUCT_SELECTOR) Pick up to 8 products from your store
  • Tab 2 — label (fill in to show tabs): (INPUTBOX) Single-line text
  • Tab 2 — products to show: (SELECTBOX) A category shows the category picked below; with none picked, the store category named like the tab, else the first one. Newest products and Store order need no setup. Picked products always win. Up to 8 products. With one tab label, no tabs are shown. Options: “Newest products”, “Store order (featured first)”, “A category”, “Picked products” (default: A category)
  • Tab 2 — category (for "A category"): (CATEGORY_SELECTOR) Pick a category from your store
  • Tab 2 — picked products: (PRODUCT_SELECTOR) Pick up to 8 products from your store
  • Tab 3 — label: (INPUTBOX) Single-line text
  • Tab 3 — products to show: (SELECTBOX) A category shows the category picked below; with none picked, the store category named like the tab, else the first one. Newest products and Store order need no setup. Picked products always win. Up to 8 products. With one tab label, no tabs are shown. Options: “Newest products”, “Store order (featured first)”, “A category”, “Picked products” (default: A category)
  • Tab 3 — category (for "A category"): (CATEGORY_SELECTOR) Pick a category from your store
  • Tab 3 — picked products: (PRODUCT_SELECTOR) Pick up to 8 products from your store
  • Display mode: (SELECTBOX) Grid wraps the products into rows; the carousel keeps them in one row with arrows. Options: “Grid”, “Carousel” (default: Grid)
  • Grid density: (SELECTBOX) Comfortable shows larger cards, compact fits more per row. Phones always show two per row. Options: “Comfortable”, “Compact” (default: Comfortable)
  • Card button — text: (INPUTBOX) Single-line text (default: “Add to bag”)
  • Card button — text after adding: (INPUTBOX) Single-line text (default: “Added”)
  • Card button — size prompt (products whose only option is a size): (INPUTBOX) Single-line text (default: “Choose a size”)
  • Card button — text for products with several options: (INPUTBOX) Single-line text (default: “Choose options”)
  • Card button — text when sold out: (INPUTBOX) Single-line text (default: “Sold out”)

Design Settings

🎛️ Display Options

  • Heading alignment: (SELECTBOX) Where the title sits. Centred and right stack the link and the tabs under it. Options: “Left”, “Centre”, “Right” (default: Left)
  • Round corners: (TOGGLE) On/off switch (default: ON)
  • Warm photo tone: (TOGGLE) On/off switch (default: ON)
  • Show the product subtitle under the name: (TOGGLE) On/off switch (default: ON)
  • Ribbon colours: (SELECTBOX) Product ribbons such as “Sale” or “New”: the theme's rose pill, or the colour set for the ribbon on the product. Options: “As designed (rose pill)”, “Product's ribbon colour” (default: As designed (rose pill))
  • Link next to the title: (BUTTON) Button look: appearance (solid, outline or text link), shape and size (default: text link, pill, medium)
  • Card button: (BUTTON) Button look: appearance (solid, outline or text link), shape and size (default: outline, pill, medium)

🎨 Text Styling

  • Kicker: (TEXT) Size (11-14px), color, bold/italic, show or hide (default: 12px, #9a5a52)
  • Title: (TEXT) Size (44-76px), color, bold/italic, show or hide (default: 60px, #3a2a26)

🖌️ Colors & Backgrounds

  • Background: (BACKGROUND) Background color or gradient (default: #faf6f2)

🌿 Key Ingredients

A full-width band with a title and a grid of ingredients — a round photo, a name and a short text each.

🎭 Ready-made variations

Add the section from "Add section" in one of its variations: Key Ingredients — Blush band; Key Ingredients — Dark, three actives. Dark variations use a dark color scheme; switch any variation to another scheme under Design → Color scheme.

Content Settings

📝 Content

  • Title: (INPUTBOX) Single-line text (default: “What goes *into* every bottle”)

🗂️ Ingredients (up to 8)

  • Name: (INPUTBOX) Single-line text (default: “Rosehip seed oil”)
  • Text: (TEXTAREA) Longer text (default: “Rich in vitamin A and fatty acids. Helps even tone and soften texture.”)
  • Photo (shown round): (IMAGE) Upload an image

Design Settings

🎛️ Display Options

  • Heading alignment: (SELECTBOX) Where the title sits above the ingredients. Options: “Left”, “Center”, “Right” (default: Left)
  • Round corners: (TOGGLE) On/off switch (default: ON)
  • Warm photo tone: (TOGGLE) On/off switch (default: ON)

🎨 Text Styling

  • Title: (TEXT) Size (44-68px), color, bold/italic, show or hide (default: 60px, #3a2a26)
  • Ingredient name: (TEXT) Size (22-32px), color, bold/italic, show or hide (default: 26px, #3a2a26)
  • Ingredient text: (TEXT) Size (14-17px), color, bold/italic, show or hide (default: 15px, #3a2a26)

🖌️ Colors & Backgrounds

  • Background: (BACKGROUND) Background color or gradient (default: #f1e5dd)

🎯 Shop the Look

One photo with points on it. Each point links to a product from your store, shown in a small card with an "Add to bag" link.

🎭 Ready-made variations

Add the section from "Add section" in one of its variations: Shop the Look — Landscape photo; Shop the Look — Portrait photo, centred. Dark variations use a dark color scheme; switch any variation to another scheme under Design → Color scheme.

Content Settings

📝 Content

  • Title: (INPUTBOX) Single-line text (default: “Your daily *ritual*”)
  • Note beside the title: (INPUTBOX) Single-line text (default: “Tap a point to see the product.”)
  • Photo shape: (SELECTBOX) Landscape fills the page column; portrait is a centred 4:5 photo. Options: “Landscape (3:2, full column)”, “Portrait (4:5, centred)” (default: Landscape (3:2, full column))
  • Photo: (IMAGE) Upload an image

🗂️ Points on the photo (up to 6)

  • Product: (PRODUCT_SELECTOR) Pick a product from your store
  • Horizontal position: (SELECTBOX) Where the point sits on the photo, measured from the left edge. Options: “5%” to “95%” (default: 50%)
  • Vertical position: (SELECTBOX) Where the point sits on the photo, measured from the top edge. Options: “5%” to “95%” (default: 50%)

Design Settings

🎛️ Display Options

  • Heading alignment: (SELECTBOX) Where the title and the note sit above the photo. Options: “Left”, “Center”, “Right” (default: Left)
  • Round corners: (TOGGLE) On/off switch (default: ON)
  • Warm photo tone: (TOGGLE) On/off switch (default: ON)

🎨 Text Styling

  • Title: (TEXT) Size (44-68px), color, bold/italic, show or hide (default: 60px, #3a2a26)
  • Note: (TEXT) Size (14-17px), color, bold/italic, show or hide (default: 15px, #6e5751)

🖌️ Colors & Backgrounds

  • Background: (BACKGROUND) Background color or gradient (default: #faf6f2)

🔀 Before / After

A band with a compare slider: drag the handle to reveal the "before" and "after" photos, beside a kicker, title, text and button.

🎭 Ready-made variations

Add the section from "Add section" in one of its variations: Before / After — Blush band; Before / After — Dark, photo right. Dark variations use a dark color scheme; switch any variation to another scheme under Design → Color scheme.

Content Settings

📝 Content

  • Before photo: (IMAGE) Upload an image
  • After photo: (IMAGE) Upload an image
  • Before label: (INPUTBOX) Single-line text (default: “Before · week 0”)
  • After label: (INPUTBOX) Single-line text (default: “After · week 8”)
  • Photo side: (SELECTBOX) The side of the compare photo on wide screens. On phones the photo comes first. Options: “Left”, “Right” (default: Left)
  • Kicker: (INPUTBOX) Single-line text (default: “Real results”)
  • Title: (INPUTBOX) Single-line text (default: “Eight weeks with the *Daily Trio*”)
  • Text: (TEXTAREA) Longer text (default: “Unretouched photos from one of our testers, taken in the same light…”)
  • Button: (BUTTON) Button text and where it links to

Design Settings

🎛️ Display Options

  • Button: (BUTTON) Button look: appearance (solid, outline or text link), shape and size (default: solid, pill, medium)
  • Round corners: (TOGGLE) On/off switch (default: ON)
  • Warm photo tone: (TOGGLE) On/off switch (default: ON)

🎨 Text Styling

  • Title: (TEXT) Size (44-68px), color, bold/italic, show or hide (default: 60px, #3a2a26)
  • Text: (TEXT) Size (15-18px), color, bold/italic, show or hide (default: 17px, #3a2a26)

🖌️ Colors & Backgrounds

  • Background: (BACKGROUND) Background color or gradient (default: #f1e5dd)

⚡ Countdown Sale

A band with a countdown timer to an end date, a title, a button and a photo.

🎭 Ready-made variations

Add the section from "Add section" in one of its variations: Countdown Sale — Ink band; Countdown Sale — Blush band, photo left. Dark variations use a dark color scheme; switch any variation to another scheme under Design → Color scheme.

Content Settings

📝 Content

  • Kicker: (INPUTBOX) Single-line text (default: “For a limited time”)
  • Title (a new line breaks the title; *asterisks* set a word in italics): (TEXTAREA) Longer text (default: “25% off *all sets*”)
  • Show countdown: (TOGGLE) Counts down to the end date below. It hides itself when the date has passed or is empty. (default: ON)
  • Sale end date: (INPUTBOX) Single-line text (default: “2030-12-31T23:59:59”)
  • Button: (BUTTON) Button text and where it links to
  • Photo: (IMAGE) Upload an image
  • Photo side: (SELECTBOX) The side of the photo on wide screens. On phones the text comes first. Options: “Right”, “Left” (default: Right)

Design Settings

🎛️ Display Options

  • Round corners: (TOGGLE) On/off switch (default: ON)
  • Warm photo tone: (TOGGLE) On/off switch (default: ON)
  • Button: (BUTTON) Button look: appearance (solid, outline or text link), shape and size (default: solid, pill, medium)

🎨 Text Styling

  • Title: (TEXT) Size (44-68px), color, bold/italic, show or hide (default: 60px, #f5ebe4)

🖌️ Colors & Backgrounds

  • Band colour: (BACKGROUND) Background color or gradient (default: #3a2a26)

💬 Testimonials

A title and customer quotes side by side, each with the customer's name and town.

🎭 Ready-made variations

Add the section from "Add section" in one of its variations: Testimonials — Light; Testimonials — Dark. Dark variations use a dark color scheme; switch any variation to another scheme under Design → Color scheme.

Content Settings

📝 Content

  • Kicker (optional): (INPUTBOX) Single-line text
  • Title: (INPUTBOX) Single-line text (default: “In their *words*”)

🗂️ Quotes (up to 12)

  • Quote (quotation marks are added for you): (TEXTAREA) Longer text
  • Customer name: (INPUTBOX) Single-line text
  • Town or product: (INPUTBOX) Single-line text

Design Settings

🎛️ Display Options

  • Heading alignment: (SELECTBOX) Where the title sits above the quotes. Options: “Left”, “Center”, “Right” (default: Left)

🎨 Text Styling

  • Title: (TEXT) Size (40-60px), color, bold/italic, show or hide (default: 60px, #3a2a26)
  • Quote: (TEXT) Size (20-28px), color, bold/italic, show or hide (default: 24px, italic, #3a2a26)
  • Caption: (TEXT) Size (12-14px), color, bold/italic, show or hide (default: 13px, #6e5751)

🖌️ Colors & Backgrounds

  • Background: (BACKGROUND) Background color or gradient (default: #faf6f2)

📷 Instagram Gallery

A grid or moving row of photos with a link to your social profile; photos can link to products.

🎭 Ready-made variations

Add the section from "Add section" in one of its variations: Instagram — Grid, Light; Instagram — Moving Row, Dark. Dark variations use a dark color scheme; switch any variation to another scheme under Design → Color scheme.

Content Settings

📝 Content

  • Layout: (SELECTBOX) Grid: square photos side by side. Moving row: a full-width row of photos that loops on its own. Options: “Grid”, “Moving row” (default: Grid)
  • Speed: (SELECTBOX) How fast the moving row travels. It slows down while the pointer is over it. Options: “Slow”, “Normal”, “Fast” (default: Normal)
  • Title: (INPUTBOX) Single-line text (default: “Stay in the *glow*”)
  • Profile link (photos without their own link open it too): (BUTTON) Button text and where it links to

🗂️ Photos (up to 12)

  • Photo: (IMAGE) Upload an image
  • Description (for screen readers, not shown): (INPUTBOX) Single-line text
  • Linked product — the photo opens its page: (PRODUCT_SELECTOR) Pick a product from your store
  • Link if no product is picked (optional): (BUTTON) Button text and where it links to

Design Settings

🎛️ Display Options

  • Heading alignment: (SELECTBOX) Where the title and the profile link sit above the photos. Options: “Left”, “Center”, “Right” (default: Left)
  • Round corners: (TOGGLE) On/off switch (default: OFF)
  • Warm photo tone: (TOGGLE) On/off switch (default: ON)
  • Profile link: (BUTTON) Button look: appearance (solid, outline or text link), shape and size (default: text link, pill, medium)

🎨 Text Styling

  • Title: (TEXT) Size (40-60px), color, bold/italic, show or hide (default: 60px, #3a2a26)

🖌️ Colors & Backgrounds

  • Background: (BACKGROUND) Background color or gradient (default: #faf6f2)

📖 Brand Story

An arched photo beside your story — kicker, title, short paragraphs and a link. Used on the About page.

🎭 Ready-made variations

Add the section from "Add section" in one of its variations: Brand story — Light; Brand story — Dark. Dark variations use a dark color scheme; switch any variation to another scheme under Design → Color scheme.

Content Settings

📝 Content

  • Image position: (SELECTBOX) Side the photo sits on. On small screens the photo is always above the text. Options: “Left”, “Right” (default: Left)
  • Image (shown as an arch, 4:5): (IMAGE) Upload an image
  • Kicker: (INPUTBOX) Single-line text (default: “Who we are”)
  • Title: (INPUTBOX) Single-line text (default: “Better skin starts with *fewer, better* things”)
  • Text (a blank line starts a new paragraph): (TEXTAREA) Longer text (default: “Spectra began at a kitchen table with three oils, a notebook and a…”)
  • Link: (BUTTON) Button text and where it links to

Design Settings

🎛️ Display Options

  • Heading alignment: (SELECTBOX) How the kicker, title, text and link line up beside the photo. Options: “Left”, “Center”, “Right” (default: Left)
  • Round corners: (TOGGLE) On/off switch (default: ON)
  • Warm photo tone: (TOGGLE) On/off switch (default: ON)
  • Link: (BUTTON) Button look: appearance (solid, outline or text link), shape and size (default: text link, pill, medium)

🎨 Text Styling

  • Title: (TEXT) Size (40-60px), color, bold/italic, show or hide (default: 60px, #3a2a26)
  • Text: (TEXT) Size (15-18px), color, bold/italic, show or hide (default: 17px, #3a2a26)

🖌️ Colors & Backgrounds

  • Background: (BACKGROUND) Background color or gradient (default: #faf6f2)

✨ Values

Up to six short notes side by side (your values or promises), each with an optional number, a title and a text.

🎭 Ready-made variations

Add the section from "Add section" in one of its variations: Values — Blush, numbered; Values — Dark, compact. Dark variations use a dark color scheme; switch any variation to another scheme under Design → Color scheme.

Content Settings

📝 Content

  • Marker: (SELECTBOX) Number: 01, 02, … above each title, counted automatically. Compact: no number, smaller title (22px) and text (14px) — the size settings do not apply. Options: “Number”, “None”, “None, compact” (default: Number)

🗂️ Values (up to 6)

  • Title: (INPUTBOX) Single-line text (default: “Small batches”)
  • Text: (TEXTAREA) Longer text (default: “Mixed by hand in runs of a few hundred, so everything ships fresh.”)

Design Settings

🎨 Text Styling

  • Title: (TEXT) Size (22-34px), color, bold/italic, show or hide (default: 26px, #3a2a26)
  • Text: (TEXT) Size (14-17px), color, bold/italic, show or hide (default: 15px, #3a2a26)

🖌️ Colors & Backgrounds

  • Background: (BACKGROUND) Background color or gradient (default: #f1e5dd)

❓ FAQ

Questions and answers in an accordion. Left alignment puts the heading beside the questions; center or right puts it above them.

🎭 Ready-made variations

Add the section from "Add section" in one of its variations: FAQ — Light; FAQ — Dark. Dark variations use a dark color scheme; switch any variation to another scheme under Design → Color scheme.

Content Settings

📝 Content

  • Kicker: (INPUTBOX) Single-line text (default: “Help”)
  • Title: (INPUTBOX) Single-line text (default: “Questions, *answered*”)
  • Intro text: (TEXTAREA) Longer text (default: “Can’t find what you need? Write to us and a real person replies wit…”)
  • Open first question: (TOGGLE) Shows the first answer when the page loads. One question is open at a time. (default: ON)

🗂️ Questions (up to 20)

  • Question: (INPUTBOX) Single-line text (default: “How long does shipping take?”)
  • Answer: (TEXTAREA) Longer text (default: “Orders ship within two working days. Delivery takes 2–4 days.”)

Design Settings

🎛️ Display Options

  • Heading alignment: (SELECTBOX) Left: kicker, title and intro beside the questions. Center or right: above the questions. Options: “Left”, “Center”, “Right” (default: Left)

🎨 Text Styling

  • Title: (TEXT) Size (40-60px), color, bold/italic, show or hide (default: 60px, #3a2a26)
  • Intro text: (TEXT) Size (14-17px), color, bold/italic, show or hide (default: 15px, #6e5751)
  • Questions: (TEXT) Size (13-16px), color, bold/italic, show or hide (default: 14px, #3a2a26)
  • Answers: (TEXT) Size (14-17px), color, bold/italic, show or hide (default: 15px, #6e5751)

🖌️ Colors & Backgrounds

  • Background: (BACKGROUND) Background color or gradient (default: #faf6f2)

🪟 Promo Tiles

Two or three large photo tiles side by side, each with a title, text and button.

🎭 Ready-made variations

Add the section from "Add section" in one of its variations: Promo tiles — Light, two tiles; Promo tiles — Dark, three tiles. Dark variations use a dark color scheme; switch any variation to another scheme under Design → Color scheme.

Content Settings

🗂️ Tiles (up to 4)

  • Image: (IMAGE) Upload an image
  • Kicker: (INPUTBOX) Single-line text (default: “Sets & Gifts”)
  • Title: (INPUTBOX) Single-line text (default: “The *Daily Trio*, ready to give”)
  • Tile link (the whole tile opens it): (BUTTON) Button text and where it links to

Design Settings

🎛️ Display Options

  • Round corners: (TOGGLE) On/off switch (default: ON)
  • Warm photo tone: (TOGGLE) On/off switch (default: ON)
  • Photo shape: (SELECTBOX) The shape of every tile photo. Options: “Portrait (3:4)”, “Arch”, “Landscape (4:3)” (default: Portrait (3:4))
  • Link text on the card: (BUTTON) Button look: appearance (solid, outline or text link), shape and size (default: text link, pill, small)

🎨 Text Styling

  • Kicker: (TEXT) Size (10-13px), color, bold/italic, show or hide (default: 11px, #9a5a52)
  • Title: (TEXT) Size (20-36px), color, bold/italic, show or hide (default: 22px, #3a2a26)

🖌️ Colors & Backgrounds

  • Background: (BACKGROUND) Background color or gradient (default: #faf6f2)

💊 Category Pills

A row of pill-shaped links to your categories, with a title.

🎭 Ready-made variations

Add the section from "Add section" in one of its variations: Category pills — Light; Category pills — Dark, centred. Dark variations use a dark color scheme; switch any variation to another scheme under Design → Color scheme.

Content Settings

📝 Content

  • Kicker: (INPUTBOX) Single-line text
  • Title: (INPUTBOX) Single-line text (default: “Shop by *category*”)

🗂️ Pills (up to 14)

  • Store category (name, product count and link): (CATEGORY_SELECTOR) Pick a category from your store
  • Name (replaces the category name): (INPUTBOX) Single-line text (default: “Skincare”)
  • Link: (BUTTON) Button text and where it links to

Design Settings

🎛️ Display Options

  • Heading alignment: (SELECTBOX) Where the title sits; the pills follow it. Options: “Left”, “Centre”, “Right” (default: Left)
  • Layout: (SELECTBOX) Wrapped rows show every pill; one row scrolls sideways on small screens. Options: “Wrap to several rows”, “One scrolling row” (default: Wrap to several rows)
  • Show the product count (from the picked store category): (TOGGLE) On/off switch (default: OFF)

🎨 Text Styling

  • Kicker: (TEXT) Size (11-14px), color, bold/italic, show or hide (default: 12px, #9a5a52)
  • Title: (TEXT) Size (36-68px), color, bold/italic, show or hide (default: 60px, #3a2a26)

🖌️ Colors & Backgrounds

  • Background: (BACKGROUND) Background color or gradient (default: #faf6f2)

🏢 Press Row

Logos or names of the press and partners that featured you, as a static or moving row.

🎭 Ready-made variations

Add the section from "Add section" in one of its variations: Press Row — Static, Light; Press Row — Moving, Dark. Dark variations use a dark color scheme; switch any variation to another scheme under Design → Color scheme.

Content Settings

📝 Content

  • Layout: (SELECTBOX) Static row: the names sit in one centred row and wrap when they do not fit. Moving row: the names travel in an endless row. Options: “Static row”, “Moving row” (default: Static row)
  • Label: (INPUTBOX) Single-line text (default: “As seen in”)

🗂️ Publications (up to 12)

  • Name: (INPUTBOX) Single-line text
  • Logo image (optional): (IMAGE) Upload an image
  • Link (optional): (BUTTON) Button text and where it links to

Design Settings

🎨 Text Styling

  • Label: (TEXT) Size (11-14px), color, bold/italic, show or hide (default: 12px, #9a5a52)
  • Names: (TEXT) Size (24-34px), color, bold/italic, show or hide (default: 30px, #a8908a)

🖌️ Colors & Backgrounds

  • Background: (BACKGROUND) Background color or gradient (default: #faf6f2)

🧴 Product Page

The product page. Ecwid owns the gallery, price, options and Add to bag; Spectra styles them and adds the blocks below. The layout picker offers five layouts: sidebar right or left, description under the image, and three columns with the sidebar right or left.

ℹ️ Where these settings are

Open a product page in the editor. Texts are under Content; the theme's options sit under Design, inside Ecwid's groups (Image gallery, Options, Add to bag, Navigation, Product details).

Content Settings

📝 Note under Add to bag

  • Note under Add to bag: (INPUTBOX) Single-line text (default: “Free shipping over $60 · Ships in 1–2 business days”)

📝 Extra details 1 (accordion / tab)

  • Title: (INPUTBOX) Single-line text (default: “Details”)
  • Text: (TEXTAREA) Longer text (default: “Cold-pressed rosehip seed oil blended with sea buckthorn and vitami…”)

📝 Extra details 2 (accordion / tab)

  • Title: (INPUTBOX) Single-line text (default: “How to use”)
  • Text: (TEXTAREA) Longer text (default: “In the evening, warm three drops between your palms and press into…”)

📝 Extra details 3 (accordion / tab)

  • Title: (INPUTBOX) Single-line text (default: “Ingredients”)
  • Text: (TEXTAREA) Longer text (default: “Rosa canina seed oil, Hippophae rhamnoides oil, Squalane, Tocophero…”)

📝 Extra details 4 (accordion / tab)

  • Title: (INPUTBOX) Single-line text (default: “Shipping & returns”)
  • Text: (TEXTAREA) Longer text (default: “Free shipping on orders over $60. Unopened products can be returned…”)

📝 Description tab

  • Description tab — title: (INPUTBOX) Single-line text

📝 Service notes

  • Service note 1 — title: (INPUTBOX) Single-line text (default: “Free shipping over $60”)
  • Service note 1 — text: (INPUTBOX) Single-line text (default: “Ships in 1–2 business days”)
  • Service note 2 — title: (INPUTBOX) Single-line text (default: “Samples with every order”)
  • Service note 2 — text: (INPUTBOX) Single-line text (default: “Two minis to try, picked for your skin”)
  • Service note 3 — title: (INPUTBOX) Single-line text (default: “Refills for every bottle”)
  • Service note 3 — text: (INPUTBOX) Single-line text (default: “Return empties for a refill discount”)
  • Service note 4 — title: (INPUTBOX) Single-line text
  • Service note 4 — text: (INPUTBOX) Single-line text

Design Settings

Under the page's Design tab, next to Ecwid's own options in the same groups:

🎛️ Image gallery

  • Full size images layout: (SELECTBOX) Options: “Large image with side column”, “Two per row”, “Standard (first image large)” (default: Large image with side column)
  • Round corners: (TOGGLE) On/off switch (default: ON)
  • Ribbon colours: (SELECTBOX) Product ribbons such as “New” or “Sale”: the theme's accent pill, or the colour set for the ribbon on each product. Options: “As designed (accent pill)”, “Product's ribbon colour” (default: As designed (accent pill))

🎛️ Color swatches

  • Size buttons: (SELECTBOX) Options: “Boxes”, “Pills” (default: Pills)

🎛️ "Add to Bag" Button

  • Sticky add to bag bar: (TOGGLE) On/off switch (default: ON)
  • Sticky bar shows: (SELECTBOX) Options: “Product, variant and button”, “Also the size buttons” (default: Product, variant and button)
  • Service notes as: (SELECTBOX) Options: “List with dots”, “Icons, two per row” (default: List with dots)

🎛️ Navigation

  • Category name above the title: (TOGGLE) On/off switch (default: ON)

🎛️ Product details

  • Show details as: (SELECTBOX) Options: “Accordions”, “Tabs” (default: Accordions)
  • Collapsible product details and extra details: (TOGGLE) On/off switch (default: ON)
  • Open product details by default: (TOGGLE) On/off switch (default: ON)

🗂️ Category Page

The category page: a header with the category's title, description and image, the list of subcategories, filters and the product grid.

ℹ️ Product grid columns

The number of cards per row follows Ecwid's "Product card size": Large = 3, Medium = 4, Small = 5 on desktop; 2 / 3 / 3 on tablets and 1 / 2 / 2 on phones.

Content Settings

📝 Texts

  • Header button: (BUTTON) Button text and where it links to
  • Subcategory slider — heading: (INPUTBOX) Single-line text

📝 Perks row (under the products)

  • Perk 1 — title: (INPUTBOX) Single-line text (default: “Free shipping over $60”)
  • Perk 1 — text: (INPUTBOX) Single-line text (default: “Ships in 1–2 business days.”)
  • Perk 2 — title: (INPUTBOX) Single-line text (default: “Samples with every order”)
  • Perk 2 — text: (INPUTBOX) Single-line text (default: “Two minis to try, picked for your skin.”)
  • Perk 3 — title: (INPUTBOX) Single-line text (default: “Refills for every bottle”)
  • Perk 3 — text: (INPUTBOX) Single-line text (default: “Return empties for a refill discount.”)

Design Settings

Under the page's Design tab, next to Ecwid's own options in the same groups:

🎛️ Catalog page settings

  • Category header: (SELECTBOX) Options: “Tinted band (text beside the image)”, “Simple title”, “Title with image and description”, “Banner (text over the image)”, “Cover (centred text over the image)” (default: Tinted band (text beside the image))
  • Description position: (SELECTBOX) Where the category description shows. In the band, its first heading or short first line becomes the band's heading. Options: “Top (in the header)”, “Band below the products” (default: Top (in the header))
  • Header height: (SELECTBOX) Options: “300px”, “400px”, “500px”, “600px”, “700px” (default: 500px)
  • Round corners: (TOGGLE) On/off switch (default: ON)
  • Full-width header (breadcrumbs inside): (TOGGLE) On/off switch (default: OFF)
  • Tinted band behind title and categories (simple title): (TOGGLE) On/off switch (default: OFF)
  • Black & white header image: (TOGGLE) On/off switch (default: OFF)
  • Header image position: (SELECTBOX) Options: “Centered”, “From top” (default: Centered)
  • Header background color: (COLOR_PICKER) Pick a color (default: #3A2A26)
  • Header text color: (COLOR_PICKER) Pick a color (default: #FAF6F2)
  • Show the perks row under the products: (TOGGLE) On/off switch (default: ON)

🎛️ Product card settings

  • Ribbon colours: (SELECTBOX) Product ribbons such as “New” or “Sale”: the theme's accent pill, or the colour set for the ribbon on each product. Options: “As designed (accent pill)”, “Product's ribbon colour” (default: As designed (accent pill))

🎛️ Categories settings

  • Show categories as: (SELECTBOX) Options: “Default”, “Slider”, “Tabs”, “Pills”, “Cards”, “Rows with thumbnail”, “Image tiles” (default: Pills)
  • Pills: (SELECTBOX) Options: “With thumbnail and product count”, “Text only” (default: Text only)

🏬 Catalog Page

The store front page (/products): a top section, your categories and the featured products.

Content Settings

📝 Head of the page

  • Head — small line: (INPUTBOX) Single-line text (default: “The full collection”)
  • Head — title (*word* = italic): (INPUTBOX) Single-line text (default: “All *products*”)
  • Head — text under the title: (TEXTAREA) Longer text (default: “Every cleanser, serum, oil and cream we make — small batches, plant…”)
  • Head — text in the search field: (INPUTBOX) Single-line text (default: “Search cleansers, serums, oils…”)
  • Quick search term 1: (INPUTBOX) Single-line text (default: “Cleanser”)
  • Quick search term 2: (INPUTBOX) Single-line text (default: “Serum”)
  • Quick search term 3: (INPUTBOX) Single-line text (default: “Face oil”)
  • Quick search term 4: (INPUTBOX) Single-line text (default: “Moisturizer”)
  • Quick search term 5: (INPUTBOX) Single-line text (default: “Body”)

📝 Banner

  • Banner — image: (IMAGE) Upload an image
  • Banner — small line: (INPUTBOX) Single-line text (default: “New batch”)
  • Banner — title: (INPUTBOX) Single-line text (default: “All products”)
  • Banner — text under the title: (INPUTBOX) Single-line text (default: “Cleansers, serums, face oils and moisturizers, made in small batches.”)
  • Banner — button: (BUTTON) Button text and where it links to

📝 Second panel (beside the banner)

  • Second panel (beside the banner) — image: (IMAGE) Upload an image
  • Second panel (beside the banner) — small line: (INPUTBOX) Single-line text
  • Second panel (beside the banner) — title: (INPUTBOX) Single-line text
  • Second panel (beside the banner) — button: (BUTTON) Button text and where it links to

📝 Category row

  • Category row — small line above the heading: (INPUTBOX) Single-line text
  • Category row — heading: (INPUTBOX) Single-line text
  • Category row — text: (INPUTBOX) Single-line text
  • Category panels — button label: (INPUTBOX) Single-line text (default: “Shop now”)

📝 Text tile (end of the category row)

  • Text tile — small line: (INPUTBOX) Single-line text
  • Text tile — title: (INPUTBOX) Single-line text
  • Text tile — button: (BUTTON) Button text and where it links to

“Shop by” tiles

  • Tile 1 — small line: (INPUTBOX) Single-line text (default: “Under $40”)
  • Tile 1 — title and link: (BUTTON) Button text and where it links to
  • Tile 2 — small line: (INPUTBOX) Single-line text (default: “Limited time”)
  • Tile 2 — title and link: (BUTTON) Button text and where it links to
  • Tile 3 — small line: (INPUTBOX) Single-line text (default: “Curated”)
  • Tile 3 — title and link: (BUTTON) Button text and where it links to
  • Tile 4 — small line: (INPUTBOX) Single-line text (default: “Refill program”)
  • Tile 4 — title and link: (BUTTON) Button text and where it links to

📝 Products heading

  • Heading — small line above the title: (INPUTBOX) Single-line text
  • Heading — title: (INPUTBOX) Single-line text
  • Heading — text under the title: (TEXTAREA) Longer text

Design Settings

Under the page's Design tab, next to Ecwid's own options in the same groups:

🎛️ Catalog page settings

  • Top of the page: (SELECTBOX) Options: “Title”, “Banner (one image)”, “Two image panels side by side”, “Nothing” (default: Title)
  • Head alignment: (SELECTBOX) Alignment of the small line, title and text at the top of the page. Options: “Left”, “Center”, “Right” (default: Left)
  • Banner height: (SELECTBOX) Options: “300 px”, “400 px”, “500 px”, “600 px”, “700 px” (default: 500 px)
  • Show the search field and quick terms: (TOGGLE) On/off switch (default: OFF)
  • Show the “shop by” text tiles: (TOGGLE) On/off switch (default: OFF)
  • Show the product count above the products: (TOGGLE) On/off switch (default: ON)
  • Round corners: (TOGGLE) On/off switch (default: ON)

🎛️ Product card settings

  • Ribbon colours: (SELECTBOX) Product ribbons such as “New” or “Sale”: the theme's accent pill, or the colour set for the ribbon on each product. Options: “As designed (accent pill)”, “Product's ribbon colour” (default: As designed (accent pill))

🎛️ Categories settings

  • Show categories as: (SELECTBOX) Options: “Bento tiles (large and small)” to “Image tiles” (default: Hidden (products only))
  • Product shelves (one per category): (SELECTBOX) Options: “None”, “First category”, “First 2 categories”, “First 3 categories” (default: None)
  • Show category pills above the products: (TOGGLE) On/off switch (default: OFF)
  • Category panels per row: (SELECTBOX) Options: “1”, “2”, “3”, “4” (default: 2)
  • Show a button on the category panels: (TOGGLE) On/off switch (default: ON)
  • Show the “Featured products” title: (TOGGLE) On/off switch (default: OFF)

📖 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

CATEGORY_SELECTOR

Pick categories from your store with configurable maximum

BACKGROUND

Background color or gradient picker with preset colors

COLOR_PICKER

A single color, used by the store-page settings (e.g. the category header colors)

TEXT

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

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