Welcome to Flaro Theme
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.
🚀 How to Use This Guide
- Open your theme editor/customization panel
- Find the section you want to customize
- Refer to this guide for what each setting does
- Make your changes and save
- Preview your changes before publishing
📋 Common Settings
Most sections share these settings:
- Background: Choose colors or gradients for section backgrounds
- Text Styling: Adjust size, color, bold, or italic
- Show/Hide: Toggle elements on or off
- Round Corners: On by default; turn it off to give the photos and cards of that section square corners
- Italic Words: Put asterisks around a word in a title to set it in italics, e.g.
Layers for *slow mornings* - Accent Color: Button hovers, the bag count, ticker dots, hotspot dots, sale prices and kicker numbers use the "Strong accent" color of your store palette (terracotta by default) — change it under Design → Colors
- Mobile Responsive: Everything works on phones and tablets automatically
Note: Flaro's typography is part of the design: titles always use the Instrument Serif headline font in regular weight, body text and buttons use Hanken Grotesk, and kickers (the small labels above titles) use JetBrains Mono. Title sizes are the size on wide screens — titles scale down smoothly on smaller screens.
📌 Header
The top navigation bar with logo, menu with dropdowns, announcement bar, search overlay with live results, account and bag, plus a menu drawer on phones.
Content Settings
🏷️ Logo & Header Style
- Logo: (LOGO) Your store logo or name
- Header style: (SELECTBOX) Choose the bar layout (default: Centered):
- • Centered: Menu left, logo in the middle
- • Left logo: Menu in the middle, with a search field
- • Two-row: Logo row, with the menu row below
- • Overlay: Transparent over the first section of the home page
ℹ️ About the Overlay Style
Overlay lays the bar over the first section of the home page (light text, no background) until the page scrolls or a menu opens. It shows on the live site at desktop width; other pages and the editor preview get the normal bar.
🧭 Navigation Menu
- Navigation menu: (NAVIGATION_MENU) Build your menu items and their sub-items in the editor
- About the menu: (INFO) Explains how the dropdowns are built
The dropdowns list exactly the sub-items you add to the Navigation menu, and a sub-item that has sub-items of its own becomes a titled column. An item without a Dropdown template card gets the simple one-column dropdown when it has sub-items, and stays a plain link when it has none. Store and category links with automatic dropdowns list your category tree.
🍔 Dropdown Templates
Type: DECK (Repeatable cards, max 20)
Decide how the dropdown of a root menu item looks. A card applies to the root item with the same name (capitals and surrounding spaces do not matter).
Each template card has:
- Menu item: (INPUTBOX) Name of the root menu item, e.g. "Women"
- Template: (SELECTBOX) Choose display style (default: Full width — columns):
- • Simple — one column: A compact list under the item
- • Full width — columns: A panel across the page with the sub-items as columns
- • Full width — columns + image tiles: The same panel with up to two image tiles at the right
- Tile 1 image (4:5): (IMAGE) Picture for the first tile
- Tile 1 label: (INPUTBOX) Caption of the first tile
- Tile 1 link: (BUTTON) Where the first tile leads
- Tile 2 image (4:5): (IMAGE) Picture for the second tile
- Tile 2 label: (INPUTBOX) Caption of the second tile
- Tile 2 link: (BUTTON) Where the second tile leads
ℹ️ About Image Tiles
The tiles of a card show only with the "Full width — columns + image tiles" template, at the right of that item's panel. An item without sub-items opens a panel only in that case, showing the tiles alone. On phones the tiles appear as a swipeable row inside the item's group of the menu drawer.
🔗 Secondary Links
Type: DECK (Repeatable, max 4)
Small links such as Stores or Repairs. They show at the top left of the Two-row header and under the menu in the phone drawer.
- Link: (BUTTON) Link text and destination
📢 Announcements
Type: DECK (Repeatable, max 5)
Rotating announcement messages displayed above the header.
- Announcement text: (INPUTBOX) Announcement message, e.g. "Free shipping over $120"
- Link (optional): (BUTTON) Optional link for the announcement
- Rotate announcements: (TOGGLE) Moves to the next line every 4 seconds; with one line the bar is static (default: ON)
🔍 Search
- Search field text: (INPUTBOX) Placeholder shown in the search field of the Left logo header (default: "Search coats, knits…")
- Trending searches: DECK (max 8) - Suggested search terms shown in the search overlay, each with a Term (INPUTBOX)
- Popular categories in search: (SELECTBOX) The four tiles shown in the search overlay before the visitor types — "Store categories (first four)", "Image tiles of the dropdown templates" or "Hide" (default: Store categories)
- Show products while typing: (TOGGLE) Shows up to 8 matching products in the search overlay; Enter always opens the full search page (default: ON)
📱 Phone Menu
- Phone menu button: (BUTTON) Call-to-action button inside the phone menu drawer
- Phone menu note: (INPUTBOX) Short note in the phone menu drawer, e.g. "Free shipping over $120"
🔗 Additional Resources
- Need help?: (INFO) Link to contact Infinite Apps for theme support
Design Settings
🎛️ Feature Toggles
- Logo: (LOGO) Logo appearance
- Sticky header: (TOGGLE) Keep header visible when scrolling (default: ON)
- Show search: (TOGGLE) Display search functionality (default: ON)
- Show account: (TOGGLE) Show account/login link (default: ON)
- Search, account and bag as: (SELECTBOX) Show them as "Words" or "Icons" (default: Words)
- Round corners: (TOGGLE) Enable rounded corners (default: ON)
- Show announcement bar: (TOGGLE) Display the announcement bar (default: ON)
- Show on mobile: (TOGGLE) Display the announcement bar on phones too (default: OFF)
🎨 Colors & Backgrounds
- Bar background: (BACKGROUND) Main header background (default: #f6f3ee)
- Menu text: (TEXT) Size (13-16px), color, bold/italic (default: 14px, #1d1b18)
- Bag count colour: (BACKGROUND) Background of the bag item count (default: #a4532f — follows the palette accent unless you change it)
- Announcement background: (BACKGROUND) Announcement bar background (default: #1d1b18)
- Announcement text: (TEXT) Size (11-13px), color, bold/italic (default: 12px, #f6f3ee)
🎞️ Hero Slider
The big opening section of the home page: up to 5 slides with a progress bar, shown in one of four styles.
Content Settings
📐 Hero Style
- Hero style: (SELECTBOX) Choose the look (default: Diptych):
- • Diptych: Two photos side by side
- • Full-bleed: One wide photo, centred text
- • Split wipe: Text panel beside the photo
- • Peek carousel: Slides with their neighbours peeking in
⏱️ Autoplay Settings
- Autoplay: (TOGGLE) Automatically advance to the next slide (default: ON)
- Time per slide: (SELECTBOX) 4, 5, 6.5, 8 or 10 seconds (default: 6.5 seconds)
🖼️ Slides
Type: DECK (Repeatable, max 5)
Each slide contains:
- Kicker: (INPUTBOX) Small label above the title, e.g. "AUTUMN / WINTER 26"
- Title: (INPUTBOX) Main headline — put asterisks around words to set them in italics:
Layers for *slow mornings* - Description: (TEXTAREA) Supporting text, shown in the Split wipe style
- Primary button: (BUTTON) Main call-to-action with link
- Secondary button: (BUTTON) Optional second call-to-action
- Photo A: (IMAGE) Portrait photo. Diptych: the left photo (the only one on phones). Split wipe: the photo beside the text
- Photo B: (IMAGE) Portrait photo. Diptych: the right photo. Leave empty to show photo A alone
- Wide photo: (IMAGE) Landscape photo for the Full-bleed and Peek carousel styles. Photo A is used when empty
- Progress label: (INPUTBOX) Shown next to the slide number above the progress bar in the Diptych style, e.g. "01 — Womenswear"
Design Settings
🎛️ Layout
- Section height: (SELECTBOX) "Screen height below the header", "Full screen height", "Large", "Medium" or "Small" (default: Screen height below the header)
- Round corners: (TOGGLE) Enable rounded corners (default: ON)
🎨 Styling
- Kicker: (TEXT) Size (11-14px), color, bold/italic (default: 12px, #f6f3ee)
- Title: (TEXT) Size (72-160px), color, bold/italic (default: 140px, #f6f3ee)
- Description: (TEXT) Size (15-20px), color, bold/italic (default: 17px, #4b463f)
- Primary button: (BUTTON) Appearance, shape, color (default: SOLID, PILL)
- Secondary button: (BUTTON) Appearance, shape, color (default: OUTLINE, PILL)
- Background (Split wipe, Peek carousel): (BACKGROUND) Section background, visible in those two styles (default: #f6f3ee)
📜 Marquee Ticker
An endless moving row of large serif phrases separated by dots.
Content Settings
💬 Phrases
Type: DECK (Repeatable, max 12)
- Text: (INPUTBOX) The phrase, e.g. "Natural fibers"
⚙️ Motion
- Italic every second item: (TOGGLE) Alternates regular and italic phrases (default: ON)
- Scroll direction: (SELECTBOX) "Left" or "Right" (default: Left)
- Speed: (SELECTBOX) "Slow", "Normal" or "Fast" (default: Normal)
Design Settings
🎨 Styling
- Text: (TEXT) Size (28-64px), color, bold/italic (default: 44px, #1d1b18)
- Dot colour: (SELECTBOX) "Accent" (the palette's Strong accent) or "Same as the text" (default: Accent)
- Background: (BACKGROUND) Section background (default: #f6f3ee)
🏷️ Category Tiles
Large photo tiles linking to your categories, with an optional product count and a link beside the section title.
Content Settings
📝 Header
- Kicker: (INPUTBOX) Small label above the title, e.g. "01 / Categories"
- Title: (INPUTBOX) Main heading — put asterisks around the word to set in italics, e.g. "Dress in *layers*"
- Link beside the title: (BUTTON) e.g. "Browse everything"
🗂️ Category Tiles
Type: DECK (Repeatable, max 8)
Each tile contains:
- Image: (IMAGE) Tile photo
- Store category: (CATEGORY_SELECTOR) Pick 1 category — provides the name and product count
- Name: (INPUTBOX) Optional — replaces the category name
- Tile link: (BUTTON) Where the tile leads
Design Settings
🎨 Styling
- Round corners: (TOGGLE) Enable rounded corners (default: ON)
- Show product count: (TOGGLE) Display the number of products on each tile (default: ON)
- Kicker: (TEXT) Size (11-14px), color, bold/italic (default: 12px, #6b6359)
- Title: (TEXT) Size (48-96px), color, bold/italic (default: 76px, #1d1b18)
- Tile name: (TEXT) Size (28-44px), color, bold/italic (default: 36px, #f6f3ee)
- Link beside the title: (BUTTON) Appearance, shape, color (default: TEXT)
- Background: (BACKGROUND) Section background (default: #f6f3ee)
🪟 Image Panels
Two or three tall photo panels side by side, each with a kicker, title, text and link.
Content Settings
🖼️ Panels
Type: DECK (Repeatable, max 3)
Each panel contains:
- Image: (IMAGE) Panel photo
- Kicker: (INPUTBOX) Small label, e.g. "Outerwear"
- Title: (INPUTBOX) Panel headline — put asterisks around a word to set it in italics
- Text: (TEXTAREA) Short description
- Link: (BUTTON) e.g. "Shop outerwear →"
Design Settings
🎛️ Display Options
- Round corners: (TOGGLE) Enable rounded corners (default: ON)
- Panel text: (SELECTBOX) "Appears on hover (always shown on touch screens)" or "Always shown" (default: Appears on hover)
- Space above: (SELECTBOX) "Standard" or "Joined to the section above" (default: Standard)
🎨 Styling
- Kicker: (TEXT) Size (11-14px), color, bold/italic (default: 12px, #f6f3ee)
- Title: (TEXT) Size (40-72px), color, bold/italic (default: 64px, #f6f3ee)
- Text: (TEXT) Size (14-17px), color, bold/italic (default: 15px, #e6dfd4)
- Link: (BUTTON) Appearance, shape, color (default: TEXT)
- Background: (BACKGROUND) Section background (default: #f6f3ee)
🛍️ Product Tabs
A product grid or carousel with up to three tabs (e.g. New in, Bestsellers, Knitwear) and a quick add button with size selection on each card.
Content Settings
📝 Header
- Kicker: (INPUTBOX) Small label above the title, e.g. "02 / The Edit"
- Title: (INPUTBOX) Main heading, e.g. "This week"
📑 Tabs 1–3
Each of the three tabs has:
- Tab — label: (INPUTBOX) Tab name (defaults: "New in", "Bestsellers", "Knitwear")
- Tab — products to show: (SELECTBOX) "Newest products", "Store order (featured first)", "A category" or "Picked products"
- Tab — category (for "A category"): (CATEGORY_SELECTOR) Pick 1 category
- Tab — picked products: (PRODUCT_SELECTOR) Choose up to 8 products
ℹ️ How Tabs Pick Products
Newest products and Store order need no setup. "A category" shows the category picked below it; with none picked, the store category named like the tab, otherwise the first one. Picked products always win. Each tab shows up to 8 products.
📐 Display
- Display mode: (SELECTBOX) "Grid" wraps the products into rows; "Carousel" keeps them in one row with arrows (default: Grid)
- Grid density: (SELECTBOX) "Comfortable" shows larger cards, "Compact" fits more per row. Phones always show two per row (default: Comfortable)
🛒 Quick Add
- Quick add — button text: (INPUTBOX) Default: "Quick add"
- Quick add — size prompt: (INPUTBOX) Default: "Quick add — select size"
- Quick add — text for products with options: (INPUTBOX) Default: "Choose options"
Design Settings
🎛️ Display Options
- Round corners: (TOGGLE) Enable rounded corners (default: ON)
- Ribbon colours: (SELECTBOX) Product ribbons such as "New" or "Sale": "As designed (light pill)" or "Product's ribbon colour" (default: As designed)
- Show second image on hover: (TOGGLE) Swap to the product's second photo on hover (default: ON)
🎨 Styling
- Kicker: (TEXT) Size (11-14px), color, bold/italic (default: 12px, #6b6359)
- Title: (TEXT) Size (48-88px), color, bold/italic (default: 76px, #1d1b18)
- Quick add button: (BUTTON) Appearance, shape, color (default: SOLID, PILL)
- Background: (BACKGROUND) Section background (default: #f6f3ee)
🧶 Fabric Guide
A list of fabrics beside a photo — each fabric shows its own image, text, care facts and a shop button.
Content Settings
📝 Header & Layout
- Kicker: (INPUTBOX) Small label above the title, e.g. "SHOP BY FABRIC"
- Title: (INPUTBOX) Main heading, e.g. "Know your *fibers*"
- Image position: (SELECTBOX) Side of the image on wide screens, "Right" or "Left" — on phones the list comes first (default: Right)
🧵 Fabrics
Type: DECK (Repeatable, max 6)
Each fabric contains:
- Name: (INPUTBOX) Fabric name, e.g. "Merino"
- Text: (TEXTAREA) What makes this fabric special
- Facts line: (INPUTBOX) Short care line, e.g. "HAND WASH COLD · DRY FLAT"
- Image: (IMAGE) Photo shown when this fabric is selected
- Button: (BUTTON) e.g. "Shop merino"
Design Settings
🎨 Styling
- Round corners: (TOGGLE) Enable rounded corners (default: ON)
- Title: (TEXT) Size (48-88px), color, bold/italic (default: 76px, #1d1b18)
- Fabric name: (TEXT) Size (28-48px), color, bold/italic (default: 40px, #1d1b18)
- Fabric text: (TEXT) Size (14-17px), color, bold/italic (default: 15px, #4b463f)
- Button: (BUTTON) Appearance, shape, color (default: SOLID, PILL)
- Background: (BACKGROUND) Section background (default: #f6f3ee)
🎯 Shop the Look
A lifestyle photo with clickable dots on the pieces worn, each linked to a product from your store.
Content Settings
📝 Photo & Text
- Image position: (SELECTBOX) Side of the photo on wide screens, "Left" or "Right" — on phones the photo always comes first (default: Left)
- Look photo: (IMAGE) The lifestyle photo
- Kicker: (INPUTBOX) Small label above the title, e.g. "03 / Shop the look"
- Title: (INPUTBOX) Main heading, e.g. "Sunday, *unhurried*"
- Text: (TEXTAREA) Supporting text
- Button: (BUTTON) e.g. "Shop the look"
📍 Look Items
Type: DECK (Repeatable, max 5)
Each item contains:
- Product: (PRODUCT_SELECTOR) Choose 1 product
- Horizontal position: (SELECTBOX) Where the dot sits, measured from the left edge — 10% to 90% (default: 50%)
- Vertical position: (SELECTBOX) Where the dot sits, measured from the top edge — 10% to 90% (default: 50%)
Design Settings
🎨 Styling
- Title: (TEXT) Size (48-88px), color, bold/italic (default: 76px, #1d1b18)
- Text: (TEXT) Size (14-18px), color, bold/italic (default: 16px, #4b463f)
- Button: (BUTTON) Appearance, shape, color (default: SOLID, PILL)
- Round corners: (TOGGLE) Enable rounded corners (default: ON)
- Background: (BACKGROUND) Section background (default: #f6f3ee)
✍️ Manifesto
A large brand statement in the serif headline font, with words that light up as visitors scroll.
Content Settings
📝 Statement
- Statement: (TEXTAREA) Your brand statement — put asterisks around words to set them in italics, e.g. "from *better* fibers"
- Text size: (SELECTBOX) "Large" is the size of the design; "Medium" suits longer statements (default: Large)
- Reveal words on scroll: (TOGGLE) Words light up one after another as the statement crosses the screen. Off: the whole statement is visible at once (default: ON)
Design Settings
🎨 Styling
- Statement: (TEXT) Color, bold/italic (default: #1d1b18) — the size is set with Text size above
- Background: (BACKGROUND) Section background (default: #f6f3ee)
📸 Lookbook
A horizontal row of numbered look photos with captions.
Content Settings
📝 Header
- Kicker: (INPUTBOX) Small label above the title, e.g. "Lookbook · AW26"
- Title: (INPUTBOX) Main heading, e.g. "Eight looks for *cold light*"
- Card size: (SELECTBOX) Width of the pictures in the row, "Large" or "Compact" (default: Large)
- Number label: (INPUTBOX) Word shown before each look's number (default: "Look")
🖼️ Looks
Type: DECK (Repeatable, max 12)
Each look contains:
- Photo: (IMAGE) Look photo
- Caption: (INPUTBOX) e.g. "Trench, straight jean"
- Link: (BUTTON) Optional — makes the whole picture a link
Design Settings
🎨 Styling
- Title: (TEXT) Size (48-88px), color, bold/italic (default: 76px, #1d1b18)
- Caption: (TEXT) Size (13-16px), color, bold/italic (default: 14px, #1d1b18)
- Round corners: (TOGGLE) Enable rounded corners (default: ON)
- Background: (BACKGROUND) Section background (default: #f6f3ee)
📖 Brand Story
A journal-style panel with a photo, a headline, a short story, key figures that count up, and a button.
Content Settings
📐 Layout
- Image position: (SELECTBOX) Side of the panel the photo sits on, "Left" or "Right" — on small screens the photo is always above the text (default: Left)
- Panel width: (SELECTBOX) "In the column" or "Full width" (default: In the column)
📝 Story Content
- Kicker: (INPUTBOX) Small label, e.g. "04 / Journal · No. 14"
- Title: (INPUTBOX) Headline — put asterisks around a word to set it in italics
- Text: (TEXTAREA) The story
- Image: (IMAGE) Panel photo
- Button: (BUTTON) e.g. "Read the story"
🔢 Figures
Type: DECK (Repeatable, max 4)
Each figure contains:
- Number: (INPUTBOX) e.g. "62" — whole numbers count up when scrolled into view
- Unit: (INPUTBOX) Optional, shown right after the number, e.g. "%"
- Label: (INPUTBOX) e.g. "years spinning"
Design Settings
🎨 Styling
- Round corners: (TOGGLE) Enable rounded corners (default: ON)
- Panel background: (BACKGROUND) Background of the story panel (default: #1d1b18)
- Title: (TEXT) Size (48-80px), color, bold/italic (default: 80px, #f6f3ee)
- Text: (TEXT) Size (14-18px), color, bold/italic (default: 16px, #cfc7bb)
- Button: (BUTTON) Appearance, shape, color (default: OUTLINE, PILL)
- Section background: (BACKGROUND) Background around the panel (default: #f6f3ee)
⚡ Sale Banner
Promotional banner with a background image, a large headline and a live countdown to the end of your sale.
Content Settings
📝 Text Content
- Width: (SELECTBOX) "In the column" or "Full width" (default: In the column)
- Kicker: (INPUTBOX) Small label, e.g. "05 / The Archive Sale"
- Title: (TEXTAREA) Headline — a new line breaks the title, and asterisks set a word in italics, e.g. "Up to 40% off" + new line + "*past seasons*"
⏳ Countdown
- 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) Date and time in the format
2027-12-31T23:59:59
🖼️ Media & Actions
- Button: (BUTTON) e.g. "Shop the sale"
- Background image: (IMAGE) Photo behind the banner
Design Settings
🎨 Styling
- Round corners: (TOGGLE) Enable rounded corners (default: ON)
- Title: (TEXT) Size (72-120px), color, bold/italic (default: 120px, #f6f3ee)
- Button: (BUTTON) Appearance, shape, color (default: SOLID, PILL)
- Section background: (BACKGROUND) Background around the banner (default: #f6f3ee)
💬 Testimonials
Large rotating customer quotes with the customer's name and the item they bought.
Content Settings
📝 Header
- Kicker: (INPUTBOX) Small label, e.g. "06 / Worn and reviewed"
- Autoplay: (TOGGLE) Move to the next quote every 6 seconds. Pauses while the pointer or keyboard focus is on the quotes (default: ON)
⭐ Quotes
Type: DECK (Repeatable, max 10)
Each quote contains:
- Quote: (TEXTAREA) Customer testimonial — quotation marks are added for you
- Customer name: (INPUTBOX) e.g. "Maya R."
- Item or context: (INPUTBOX) e.g. "Boiled Wool Blazer"
Design Settings
🎨 Styling
- Quote: (TEXT) Size (36-54px), color, bold/italic (default: 54px, #1d1b18)
- Caption: (TEXT) Size (13-16px), color, bold/italic (default: 14px, #4b463f)
- Background: (BACKGROUND) Section background (default: #f6f3ee)
📷 Customer Gallery
An Instagram-style gallery of customer photos, as a moving row or a static grid, with each photo linking to a product.
Content Settings
📐 Layout
- Layout: (SELECTBOX) "Moving row" (a full-width row of photos that loops on its own) or "Grid" (a static grid of photos) (default: Moving row)
- Speed: (SELECTBOX) How fast the moving row travels — "Slow", "Normal" or "Fast". It slows down while the pointer is over it (default: Normal)
📝 Header
- Title: (INPUTBOX) Main heading, e.g. "Worn by *you*"
- Profile link: (BUTTON) Link to your profile, e.g. "@yourstore" — photos without their own link open it too
🖼️ Photos
Type: DECK (Repeatable, max 12)
Each photo contains:
- Photo: (IMAGE) The picture
- Description: (INPUTBOX) Short description of the photo
- Linked product: (PRODUCT_SELECTOR) Choose 1 product — the photo opens its page
- Link if no product is picked: (BUTTON) Optional
Design Settings
🎨 Styling
- Round corners: (TOGGLE) Enable rounded corners (default: ON)
- Title: (TEXT) Size (48-88px), color, bold/italic (default: 76px, #1d1b18)
- Profile link: (BUTTON) Appearance, shape, color (default: TEXT)
- Background: (BACKGROUND) Section background (default: #f6f3ee)
❓ FAQ
Frequently asked questions with expandable answers, one open at a time.
Content Settings
📝 Header
- Kicker: (INPUTBOX) Small label above the title, e.g. "HELP"
- Title: (INPUTBOX) Main heading, e.g. "Questions, *answered*"
- Intro text: (TEXTAREA) Tell customers how to reach you
- Open first question: (TOGGLE) Shows the first answer when the page loads (default: ON)
❓ Questions
Type: DECK (Repeatable, max 20)
Each FAQ item contains:
- Question: (INPUTBOX) The question text
- Answer: (TEXTAREA) A short, helpful answer
Design Settings
🎨 Styling
- Title: (TEXT) Size (48-88px), color, bold/italic (default: 76px, #1d1b18)
- Intro text: (TEXT) Size (14-17px), color, bold/italic (default: 15px, #4b463f)
- Question: (TEXT) Size (16-22px), color, bold/italic (default: 18px, #1d1b18)
- Answer: (TEXT) Size (14-17px), color, bold/italic (default: 15px, #4b463f)
- Background: (BACKGROUND) Section background (default: #f6f3ee)
💡 Get Inspired
Looking to create engaging, interactive content for your store? Check out the Shop the Look Section!
💭 What is the Shop the Look Section?
The Shop the Look section lets you place clickable dots on a lifestyle photo, each linked to a product, perfect for:
- Showing every piece of an outfit in one picture
- Turning editorial photography into shoppable content
- Suggesting pieces that are worn together
- Building engaging storytelling experiences
💊 Category Pills
Compact rounded category links with a small thumbnail and product count, in one scrolling row or wrapped over several rows.
Content Settings
📝 Header
- Kicker: (INPUTBOX) Small label above the title, e.g. "Shop by category"
- Title: (INPUTBOX) Main heading — put asterisks around the word to set in italics, e.g. "Find your *layer*"
🏷️ Pills
Type: DECK (Repeatable, max 14)
Each pill contains:
- Thumbnail: (IMAGE) Small round image
- Store category: (CATEGORY_SELECTOR) Pick 1 category — provides the name and product count
- Name: (INPUTBOX) Optional — replaces the category name
- Pill link: (BUTTON) Where the pill leads
Design Settings
🎨 Styling
- Layout: (SELECTBOX) "One scrolling row" or "Wrap to several rows" (default: One scrolling row)
- Show product count: (TOGGLE) Display the number of products in each pill (default: ON)
- Kicker: (TEXT) Size (11-14px), color, bold/italic (default: 12px, #6b6359)
- Title: (TEXT) Size (40-76px), color, bold/italic (default: 56px, #1d1b18)
- Background: (BACKGROUND) Section background (default: #f6f3ee)
⭐ Featured Product
Showcase a single product with its photo, description, price, a buy button and up to three perks.
Content Settings
🛍️ Product & Labels
- Product: (PRODUCT_SELECTOR) Choose 1 product to feature
- Kicker: (INPUTBOX) Small label, e.g. "Piece of the week"
- Image position: (SELECTBOX) Which side the product photo sits on, "Left" or "Right" — on phones the photo is always first (default: Left)
- Buy button — text: (INPUTBOX) Adds the product to the bag; hidden while the product is out of stock (default: "Add to bag")
- Buy button — text for products with options: (INPUTBOX) Used when the product has options such as size or colour; the button then opens the product page (default: "Choose options")
- Details link — text: (INPUTBOX) Default: "View details"
✅ Perks
Type: DECK (Repeatable, max 3)
- Title: (INPUTBOX) e.g. "Free repairs"
- Text: (INPUTBOX) e.g. "Send back anything that tears and we will mend it."
Design Settings
🎛️ Display Options
- Round corners: (TOGGLE) Enable rounded corners (default: ON)
- Ribbon colours: (SELECTBOX) Product ribbons such as "New" or "Sale": "As designed (light pill)" or "Product's ribbon colour" (default: As designed)
🎨 Styling
- Kicker: (TEXT) Size (11-14px), color, bold/italic (default: 12px, #6b6359)
- Product name: (TEXT) Size (44-76px), color, bold/italic (default: 68px, #1d1b18)
- Product description: (TEXT) Size (14-17px), color, bold/italic (default: 15px, #4b463f)
- Buy button: (BUTTON) Appearance, shape, color (default: SOLID, PILL)
- Details link: (BUTTON) Appearance, shape, color (default: TEXT)
- Background: (BACKGROUND) Section background (default: #f6f3ee)
🏢 Press Row
An "As seen in" row of publication names or logos, static or moving.
Content Settings
📝 Layout & Label
- Layout: (SELECTBOX) "Static row" (the names sit in one centred row and wrap when they do not fit) or "Moving row" (the names travel in an endless row) (default: Static row)
- Label: (INPUTBOX) e.g. "As seen in"
📰 Publications
Type: DECK (Repeatable, max 12)
Each publication contains:
- Name: (INPUTBOX) Shown in the heading font. With a logo image, it becomes the image description
- Logo image (optional): (IMAGE) Replaces the name. Shown in black and white, at most 32px high
- Link (optional): (BUTTON) Link to the article
Design Settings
🎨 Styling
- Label: (TEXT) Size (11-14px), color, bold/italic (default: 12px, #6b6359)
- Names: (TEXT) Size (24-36px), color, bold/italic (default: 32px, #1d1b18)
- Background: (BACKGROUND) Section background (default: #f6f3ee)
📏 Size Guide
Size tables in tabs (e.g. tops, trousers), each with a note underneath.
Content Settings
📝 Header
- Kicker: (INPUTBOX) Small label above the title, e.g. "FIT"
- Title: (INPUTBOX) Main heading, e.g. "Size *guide*"
- Intro text: (TEXTAREA) Explain how to measure
- Column headings: (SELECTBOX) "Bold" text or "Mono capitals" (small capitals in the monospace type of the kickers) (default: Bold)
📊 Size Tables
Type: DECK (Repeatable, max 6)
Each table contains:
- Tab label: (INPUTBOX) e.g. "Tops & knitwear"
- Table (comma-separated): (TEXTAREA) One line per row, cells separated by commas. The first line holds the column headings, e.g.
Size,Chest,Waist,HipthenXS,80–84,62–66,88–92 - Note under the table: (TEXTAREA) e.g. "Measurements are in centimeters."
Design Settings
🎨 Styling
- Title: (TEXT) Size (40-76px), color, bold/italic (default: 56px, #1d1b18)
- Intro text: (TEXT) Size (14-17px), color, bold/italic (default: 15px, #4b463f)
- Column headings: (TEXT) Size (12-16px), color, bold/italic (default: 14px, bold, #1d1b18)
- Table text: (TEXT) Size (13-16px), color, bold/italic (default: 14px, #1d1b18)
- Background: (BACKGROUND) Section background (default: #f6f3ee)
📖 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
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