Welcome to Motra 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
- Color schemes: Every section comes in a light and a dark variation; pick a color scheme in the Design tab and the section's text, cards and buttons follow it
- 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 panels, photos and cards of that section square corners. Buttons, pills and arrows keep their own shape
- Heading alignment: Left by default (the Before / After, Press Quotes and Film Banner sections start centered); switch to center or right where a section offers it
- Accent Words: Put asterisks around a word in a title to show it in the accent color, e.g.
Hear *less* noise - Accent Color: Button hovers, the cart count, ticker dots, hotspot dots, sale prices and active tabs use the "Strong accent" color of your store palette (signal orange by default) — change it under Design → Colors
- Buttons: Pill-shaped by default; each button setting lets you change appearance (solid, outline, text link), shape and size
- Mobile Responsive: Everything works on phones and tablets automatically
Note: Motra uses one font family, Archivo, for everything: titles are heavy, uppercase and tight, body text and buttons use the regular weights. Title sizes are the size on wide screens — titles scale down smoothly on smaller screens.
Product grids on category, catalog and search pages follow Ecwid's "Product card size" setting: Large shows 3 products per row, Medium 4 and Small 5 on desktop (on phones: 1, 2 and 2).
📌 Header
The top navigation bar with logo, menu with dropdowns built from your store, a scrolling announcement bar, a search panel with live results, account and cart, plus a menu drawer on phones. Two variations: Floating pill, light and Dark pill.
Content Settings
🏷️ Logo & Header Style
- Logo: (LOGO) Your store logo or name
- Header style: (SELECTBOX) Choose the bar layout (default: Floating pill):
- • Floating pill: A rounded bar with space around it — menu left, logo in the middle
- • Full-width bar: Edge to edge, with the cart in the accent color
- • Dark pill: A fully rounded dark bar
- • Logo left: Logo at the left, menu in the middle
🧭 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
A Store or Category item lists your store's categories in its dropdown, with their product counts; other items list their own sub-items. Without a Dropdown template card, a category item gets Mega columns and any other item with sub-items gets the Simple list.
🍔 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. "Shop"
- Template: (SELECTBOX) Choose display style (default: Mega columns):
- • Categories + products: The categories at the left, three products of the hovered category beside them
- • Mega columns: A column per category with its image, product count and first four products, plus the promo tile
- • Category columns: Each category with its subcategories
- • Simple list: A compact list under the item
- Promo tile image: (IMAGE) Picture for the promo tile
- Promo tile title: (INPUTBOX) Title on the tile, e.g. "Browse the full catalog"
- Promo tile link: (BUTTON) Where the tile leads
ℹ️ About the Promo Tile
The promo tile shows at the right of a Mega columns dropdown on wide screens (1180px and up), with the number of products under it. On phones it is the first image card in that item's tab of the menu drawer.
🔗 Extra Links
Type: DECK (Repeatable, max 6)
Links such as Journal, Repairs or Help & FAQ. They show in the phone menu, under the categories.
- Link: (BUTTON) Link text and destination
📢 Announcements
Type: DECK (Repeatable, max 8)
Messages in the dark bar above the header, separated by accent dots.
- Announcement text: (INPUTBOX) Announcement message, e.g. "Free express shipping over $99"
- Link (optional): (BUTTON) Optional link for the announcement
- Scroll announcements: (TOGGLE) The messages move across the bar in a loop; off, they stand still, centered (default: ON)
🔍 Search
- Search field text: (INPUTBOX) Placeholder shown in the search panel (default: "Search headphones, earbuds, cables…")
- Trending searches: DECK (max 8) - Suggested search terms shown as chips in the search panel, each with a Term (INPUTBOX)
- Show products while typing: (TOGGLE) Shows up to 8 matching products in the search panel; Enter always opens the full search page (default: ON)
📱 Phone Menu
- Phone menu button: (BUTTON) Call-to-action button at the bottom of the phone menu drawer, beside Sign in
- Phone menu note: (INPUTBOX) Short note in the phone menu drawer, e.g. "Tuned in Oslo"
🔗 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 the header at the top while scrolling; the announcement bar scrolls away (default: ON)
- Show search: (TOGGLE) Display search (default: ON)
- Show account: (TOGGLE) Show account/login link (default: ON)
- Search, account and cart as: (SELECTBOX) Show them as "Words" or "Icons" (default: Words)
- Round corners: (TOGGLE) Rounded bar, dropdown panels and image cards (default: ON)
- Show announcement bar: (TOGGLE) Display the announcement bar (default: ON)
- Show on phones: (TOGGLE) Display the announcement bar on phones too (default: OFF)
🎨 Colors & Backgrounds
- Bar background: (BACKGROUND) Header bar background (default: #ffffff)
- Menu text: (TEXT) Size (13-16px), color, bold/italic (default: 14px bold, #111111)
- Cart count colour: (BACKGROUND) Background of the cart item count (default: #ff5b2e — follows the palette accent unless you change it)
- Announcement background: (BACKGROUND) Announcement bar background (default: #111111)
- Announcement text: (TEXT) Size (11-13px), color, bold/italic (default: 12px bold, #ffffff)
🎞️ Hero Slider
The big opening section of the home page: up to 5 slides with progress pills and a pause button, shown in one of four styles, plus an optional "Watch the film" button that opens a YouTube video. Three variations: Video fullscreen, light, Product stage, dark and Split panel, light.
Content Settings
📐 Hero Style
- Hero style: (SELECTBOX) Choose the layout (default: Video fullscreen):
- • Video fullscreen: One large photo (or video) panel with the text on it
- • Split panel: A white text panel beside the photo
- • Product stage: A dark stage with a round product photo, large outline words behind it and thumbnails
- • Card carousel: Wide cards sliding sideways
⏱️ Autoplay & Video
- Autoplay: (TOGGLE) Move to the next slide automatically; visitors can pause it (default: ON)
- Time per slide: (SELECTBOX) 5, 7, 9 or 12 seconds (default: 7 seconds)
- Background video: (TOGGLE) Video fullscreen style: slides with a YouTube video ID play it muted behind the text (default: OFF)
- Film button text (empty = hidden): (INPUTBOX) Label of the round play button (default: "Watch the film")
- Film: YouTube video ID or link: (INPUTBOX) The video that opens in a full-screen player when the film button is clicked
- Product stage: background words: (INPUTBOX) The large outline words behind the Product stage, separated with · (default: "Motra · Sound")
🖼️ Slides
Type: DECK (Repeatable, max 5)
- Title: (INPUTBOX) Slide headline, e.g. "Hear less noise"
- Text: (TEXTAREA) Short paragraph under the title
- Button: (BUTTON) Call-to-action and its destination
- Image: (IMAGE) Slide photo
- Short name (Product stage thumbnail): (INPUTBOX) Name on the slide's thumbnail button, e.g. "H1 Wireless"
- Price note (Split panel, Product stage): (INPUTBOX) e.g. "From $349"
- Background video: YouTube ID or link (optional): (INPUTBOX) Plays behind this slide when Background video is on
Design Settings
🎛️ Layout
- Height: (SELECTBOX) Screen (as designed), Large, Medium or Small (default: Screen)
- Heading alignment (Video fullscreen, Split panel): (SELECTBOX) Left, Center or Right (default: Left)
- Round corners: (TOGGLE) Rounded panels and photos (default: ON)
🎨 Styling
- Title: (TEXT) Size (72-120px), color, bold/italic (default: 104px, #ffffff)
- Text: (TEXT) Size (16-20px), color, bold/italic (default: 19px, #e6e6e6)
- Button: (BUTTON) Appearance, shape, size, color (default: Solid, Pill, white)
- Background around the panels: (BACKGROUND) The page color around the rounded panels (default: #efefef)
🏷️ Category Tiles
"Shop by category": tall photo tiles with the category name, its product count and a round arrow, under a title with a button. Two variations: Light and Dark.
Content Settings
📝 Header
- Title: (INPUTBOX) Section title (default: "Shop by category")
- Button beside the title: (BUTTON) Small pill button, e.g. "View catalog →"
🗂️ Category Tiles
Type: DECK (Repeatable, max 8)
- Image (used when the category has no image): (IMAGE) Fallback photo for the tile
- Store category: (CATEGORY_SELECTOR) The category whose name, image, product count and link the tile shows. Until you pick one, the tile uses the store category with the same name
- Name (replaces the category name): (INPUTBOX) Optional custom name
- Tile link (replaces the category link): (BUTTON) Optional custom destination
Design Settings
🎛️ Display Options
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Left)
- Round corners: (TOGGLE) Rounded tiles (default: ON)
- Show product count: (TOGGLE) "N products" above the name (default: ON)
🎨 Styling
- Title: (TEXT) Size (48-80px), color, bold/italic (default: 68px, #111111)
- Tile name: (TEXT) Size (26-40px), color, bold/italic (default: 34px, #ffffff)
- Button beside the title: (BUTTON) Appearance, shape, size, color (default: Solid, Pill, Small)
- Background: (BACKGROUND) Section background (default: #efefef)
📜 Marquee
Two rows of huge moving words: a solid row with accent dots between the phrases and an outlined row moving the other way. With "reduce motion" switched on in a visitor's device settings, the rows stand still. Two variations: Light and Dark.
Content Settings
💬 Phrases
- Solid row — phrases: DECK (max 8) - Each with a Phrase (INPUTBOX), e.g. "Tuned in Oslo"
- Outlined row — phrases: DECK (max 8) - Each with a Phrase (INPUTBOX)
- Show the outlined row: (TOGGLE) The second, outlined row under the first one (default: ON)
⚙️ Motion
- Direction of the solid row: (SELECTBOX) Right to left or Left to right; the outlined row always runs the other way (default: Right to left)
- Speed: (SELECTBOX) Slow, Normal or Fast; hovering slows the rows down (default: Normal)
Design Settings
🎨 Styling
- Text: (TEXT) Size (96-180px), color, bold/italic (default: 180px, #111111)
- Dots between phrases: (SELECTBOX) Accent colour or Text colour (default: Accent colour)
- Background: (BACKGROUND) Section background (default: #efefef)
🛍️ Product Slider
"Best sellers": a row of white product cards you can drag or move with the round arrows. Each card shows the photo (the second photo on hover), ribbon, subtitle, rating, name, price and color dots, with an "Add to cart" button that slides in on hover. Two variations: Light and Dark.
Content Settings
📝 Title & Products
- Title: (INPUTBOX) Section title (default: "Best sellers")
- Products to show: (SELECTBOX) Choose the source (default: A category):
- • A category: Products of the chosen category
- • Store front page order: Your store's featured products
- • Newest products: The most recently added products
- • Picked products: The products you pick below
- Category: (CATEGORY_SELECTOR) The category for "A category"
- Picked products: (PRODUCT_SELECTOR) Up to 12 products
ℹ️ How Products Are Picked
Picked products always win. "A category" without a chosen category uses the store category named like the title — so a slider titled "Best sellers" shows your "Best sellers" category.
🛒 Quick Add
- Add to cart button: (INPUTBOX) Button text (default: "Add to cart")
- Text after adding: (INPUTBOX) Confirmation on the button (default: "Added ✓")
- Button for products with options: (INPUTBOX) Shown when a shopper must choose an option first; it opens the product page (default: "Choose options")
Design Settings
🎛️ Display Options
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Left)
- Round corners: (TOGGLE) Rounded cards and photos (default: ON)
- Show the second photo on hover: (TOGGLE) (default: ON)
- Ribbon colours: (SELECTBOX) "As designed" (ink pill, the accent on discounted products) or "Product's colour" (the color set on the product ribbon) (default: As designed)
🎨 Styling
- Title: (TEXT) Size (48-80px), color, bold/italic (default: 68px, #111111)
- Background: (BACKGROUND) Section background (default: #efefef)
⭐ Product Spotlight
One product in the spotlight: a text panel with title, text, spec chips and two buttons beside a tall photo with a glass product bar (name, a short line and an "Add to cart" button). The product's name and price come live from your store. Two variations: Light and Dark.
Content Settings
🛍️ Product
- Product (name, price and add to cart): (PRODUCT_SELECTOR) The product in the spotlight
- Product name to show until one is picked: (INPUTBOX) Until you pick a product, the section shows the store product with this name (default: "Motra H1 Wireless"); without a match it shows your newest product
📝 Text Panel
- Title: (INPUTBOX) e.g. "A leap forward in quiet"
- Text: (TEXTAREA) Paragraph under the title
- Spec chips: DECK (max 6) - Small pills such as "60 h battery", each with a Text (INPUTBOX)
- Main button: (BUTTON) Opens the product unless you set another link
- Second button: (BUTTON) e.g. "Compare models"
🖼️ Photo & Product Bar
- Photo: (IMAGE) The tall photo
- Photo position: (SELECTBOX) Right (as designed) or Left (default: Right)
- Line under the product name on the photo: (INPUTBOX) e.g. "In stock, ships today"
- Add to cart button: (INPUTBOX) (default: "Add to cart")
- Text after adding: (INPUTBOX) (default: "Added ✓")
- Button for products with options: (INPUTBOX) Opens the product page when an option must be chosen (default: "Choose options")
Design Settings
🎛️ Display Options
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Left)
- Round corners: (TOGGLE) Rounded panels (default: ON)
- Show the price in the main button: (TOGGLE) Adds the product's price to the button text, e.g. "Shop H1 — $349.00" (default: ON)
🎨 Styling
- Title: (TEXT) Size (56-96px), color, bold/italic (default: 84px, #111111)
- Text: (TEXT) Size (15-19px), color, bold/italic (default: 17px, #444444)
- Main button: (BUTTON) Appearance, shape, size, color (default: Solid, Pill, #111111)
- Second button: (BUTTON) Appearance, shape, size, color (default: Solid, Pill)
- Background: (BACKGROUND) Section background (default: #efefef)
🎬 Video Tabs
A panel with a title and a list of video tabs beside a 16:9 player. Each tab shows its poster image with a play button; the YouTube video loads only when a visitor clicks play. Two variations: Dark panel and Dark.
Content Settings
📝 Title
- Title: (INPUTBOX) e.g. "Made in the lab, tested on the road"
🎞️ Videos
Type: DECK (Repeatable, max 5)
- Tab title: (INPUTBOX) e.g. "Inside the acoustic lab"
- Line under the active tab: (TEXTAREA) Short description shown for the selected tab
- Running time: (INPUTBOX) e.g. "4:12"
- YouTube link or video id: (INPUTBOX) The video to play
- Poster image: (IMAGE) Shown in the player until play is clicked
Design Settings
🎛️ Display Options
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Left)
- Panel: (SELECTBOX) The panel behind the tabs and the player — Dark or Light (default: Dark)
- Round corners: (TOGGLE) Rounded panel and player (default: ON)
🎨 Styling
- Title: (TEXT) Size (48-68px), color, bold/italic (default: 68px, #ffffff)
- Background: (BACKGROUND) Section background around the panel (default: #efefef)
↔️ Before / After
"Drag to hear the difference": a wide photo with a draggable divider. Visitors drag the round handle (or use the arrow keys) to compare the two sides, each with a label. Two variations: Light and Dark.
Content Settings
🖼️ Photos & Labels
- Title: (INPUTBOX) e.g. "Drag to hear the difference"
- Compare: (SELECTBOX) Choose the mode (default: One photo, filtered on the left):
- • One photo, filtered on the left: The left side is shown blurred and washed out
- • Two photos: A separate before photo on the left
- Photo (right side, after): (IMAGE)
- Before photo (left side, two-photo mode): (IMAGE)
- Left label: (INPUTBOX) e.g. "ANC off · 72 dB"
- Right label: (INPUTBOX) e.g. "ANC on · 28 dB"
Design Settings
🎛️ Display Options
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Center)
- Round corners: (TOGGLE) Rounded photo panel (default: ON)
🎨 Styling
- Title: (TEXT) Size (48-72px), color, bold/italic (default: 72px, #111111)
- Background: (BACKGROUND) Section background (default: #efefef)
💬 Press Quotes
A rounded panel with one large quote at a time and the names of the sources below it; visitors click a source to show its quote, and the active source is underlined in the accent color. Two variations: Light and Dark.
Content Settings
⭐ Quotes
- Rotate the quotes: (TOGGLE) Shows the next quote every six seconds until a visitor picks a source (default: ON)
- Press quotes: DECK (max 6) - Each with a Quote (TEXTAREA) and a Source (INPUTBOX), e.g. "Audio Quarterly"
Design Settings
🎛️ Display Options
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Center)
- Round corners: (TOGGLE) Rounded panel (default: ON)
🎨 Styling
- Quote: (TEXT) Size (36-50px), color, bold/italic (default: 50px, #111111)
- Source: (TEXT) Size (14-20px), color, bold/italic (default: 18px, #111111)
- Background: (BACKGROUND) Section background (default: #efefef)
🎯 Hotspots
"Engineered down to the screw": a large photo with a title and round "+" spots. Clicking a spot opens a white card with a short explanation and, optionally, a linked product with its price. Two variations: Light and Dark.
Content Settings
📝 Photo & Title
- Title: (INPUTBOX) e.g. "Engineered down to the screw"
- Photo: (IMAGE) The large photo the spots sit on
📍 Hotspots
Type: DECK (Repeatable, max 6)
- What it points at: (INPUTBOX) Card title, e.g. "Beryllium drivers"
- Text: (TEXTAREA) Short explanation
- Across (from the left): (SELECTBOX) 5%–95%; 0% is the left edge of the photo (default: 50%)
- Down (from the top): (SELECTBOX) 5%–95%; 0% is the top of the photo (default: 50%)
- Product to link (optional): (PRODUCT_SELECTOR) Shows the product's name and price as a link in the card
Design Settings
🎛️ Display Options
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Left)
- Round corners: (TOGGLE) Rounded photo panel (default: ON)
🎨 Styling
- Title: (TEXT) Size (44-62px), color, bold/italic (default: 62px, #ffffff)
- Background: (BACKGROUND) Section background (default: #efefef)
🔢 Stats
Large rounded cards with a big number that counts up when it scrolls into view, a unit, a title and a short text — for battery life, microphones, warranty years and similar figures. Two variations: Light and Dark.
Content Settings
📊 Figures
- Title (optional): (INPUTBOX) Section title above the cards
Figures: DECK (Repeatable, max 4)
- Number (counts up): (INPUTBOX) e.g. "60"
- Unit: (INPUTBOX) e.g. "h"
- Title: (INPUTBOX) e.g. "Battery life"
- Text: (TEXTAREA) Short explanation
- Card look: (SELECTBOX) Light (the section's card color), Accent (the palette's strong accent) or Dark (ink) (default: Light)
Design Settings
🎛️ Display Options
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Left)
- Round corners: (TOGGLE) Rounded cards (default: ON)
🎨 Styling
- Title: (TEXT) Size (48-68px), color, bold/italic (default: 68px, #111111)
- Background: (BACKGROUND) Section background (default: #efefef)
📊 Comparison Table
"Which headphones are made for you?": up to three products side by side — photo, name and price — with a row for each spec. The specs are read from the products' attributes in your store, and a "Show differences only" switch hides the rows where all products are the same. Scrolls sideways on phones. Two variations: Light and Dark.
Content Settings
🛍️ Title & Products
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Left)
- Title: (INPUTBOX) e.g. "Which headphones are made for you?"
- Products to compare (up to 3): (PRODUCT_SELECTOR) The products in the columns
- Category to compare until products are picked: (INPUTBOX) Until you pick products, the table shows the first three products of the store category with this name (default: "Headphones")
📋 Rows & Switch
- Specs to compare: (TEXTAREA) Attribute names, one per line, in the order you want the rows; empty shows every attribute (default: Driver, Battery, ANC, Weight, Bluetooth)
- Show "differences only" switch: (TOGGLE) Lets shoppers hide the rows where all products are the same (default: ON)
- Switch label: (INPUTBOX) (default: "Show differences only")
ℹ️ When Products Have No Specs
- Column 1–3 name (when no products load): (INPUTBOX) Column names used when no products can be loaded
- Rows when products have no specs: DECK (max 12) - Each with a Row name and Value, column 1–3 (INPUTBOX), used when the products have no attributes
To fill the table from your store, give your products attributes (Catalog → Product types) with the same names as the rows.
Design Settings
🎛️ Display Options
- Round corners: (TOGGLE) Rounded panel and photos (default: ON)
🎨 Styling
- Title: (TEXT) Size (34-64px), color, bold/italic (default: 64px, #111111)
- Product name: (TEXT) Size (14-18px), color, bold/italic (default: 16px bold, #111111)
- Panel background: (BACKGROUND) The table panel (default: #ffffff)
- Background: (BACKGROUND) Section background (default: #efefef)
❓ Help & FAQ
A dark help card with a title, text and two buttons beside a list of questions that open one at a time. Two variations: Light and Dark.
Content Settings
💬 Help Card
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Left)
- Title: (INPUTBOX) e.g. "Have a question? We're here to help."
- Help text: (TEXTAREA) e.g. your support hours
- First button: (BUTTON) e.g. "Contact support"
- Second button: (BUTTON) e.g. "Register a product"
❔ Questions
- Open first question: (TOGGLE) Shows the first answer when the page loads; one question is open at a time (default: ON)
- Questions: DECK (max 20) - Each with a Question (INPUTBOX) and an Answer (TEXTAREA)
Design Settings
🎛️ Display Options
- Round corners: (TOGGLE) Rounded card and questions (default: ON)
🎨 Styling
- Title: (TEXT) Size (34-60px), color, bold/italic (default: 60px, #ffffff)
- Help text: (TEXT) Size (14-17px), color, bold/italic (default: 16px, #cfcfcf)
- First button: (BUTTON) Appearance, shape, size, color (default: Solid, Pill, #ff5b2e)
- Second button: (BUTTON) Appearance, shape, size, color (default: Solid, Pill, #2a2a2a)
- Question: (TEXT) Size (15-20px), color, bold/italic (default: 17px bold, #111111)
- Answer: (TEXT) Size (14-17px), color, bold/italic (default: 15px, #444444)
- Help card background: (BACKGROUND) (default: #111111)
- Question background: (BACKGROUND) (default: #ffffff)
- Background: (BACKGROUND) Section background (default: #efefef)
✅ Service Cards
A row of small white cards with a title and a line of text each — shipping, trial period, warranty, secure checkout. Two variations: Light and Dark.
Content Settings
🃏 Cards
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Left)
- Title: (INPUTBOX) Optional section title above the cards
Cards: DECK (Repeatable, max 8)
- Card title: (INPUTBOX) e.g. "Free express shipping"
- Card text: (TEXTAREA) e.g. "On all orders over $99, worldwide."
Design Settings
🎛️ Display Options
- Round corners: (TOGGLE) Rounded cards (default: ON)
🎨 Styling
- Title: (TEXT) Size (34-68px), color, bold/italic (default: 56px, #111111)
- Card title: (TEXT) Size (16-22px), color, bold/italic (default: 18px bold, #111111)
- Card text: (TEXT) Size (13-16px), color, bold/italic (default: 14px, #555555)
- Card background: (BACKGROUND) (default: #ffffff)
- Background: (BACKGROUND) Section background (default: #efefef)
📖 Brand Story
A photo beside a white text panel with a label, a big title, a paragraph, up to four figures that count up when scrolled into view, and a button. On phones the photo sits above the text. Two variations: Light and Dark.
Content Settings
📐 Layout
- Image position: (SELECTBOX) Left or Right — on small screens the photo is always above the text (default: Left)
- Width: (SELECTBOX) "In the column" or "Full width" (default: In the column)
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Left)
📝 Story
- Label above the title: (INPUTBOX) e.g. "Our story"
- Title: (INPUTBOX) e.g. "Tuned in Oslo since 2014"
- Text: (TEXTAREA) The story paragraph
- Image: (IMAGE) The photo
- Button: (BUTTON) e.g. "Shop the lineup" (opens the store)
🔢 Figures
Figures: DECK (Repeatable, max 4)
- Number: (INPUTBOX) Whole numbers count up when scrolled into view
- Unit (optional): (INPUTBOX) e.g. "h" or "%"
- Label: (INPUTBOX) Line under the number
Design Settings
🎛️ Display Options
- Round corners: (TOGGLE) Rounded photo and panel (default: ON)
🎨 Styling
- Text panel background: (BACKGROUND) (default: #ffffff)
- Title: (TEXT) Size (56-84px), color, bold/italic (default: 84px bold, #111111)
- Text: (TEXT) Size (15-18px), color, bold/italic (default: 17px, #444444)
- Button: (BUTTON) Appearance, shape, size, color (default: Solid, Pill, Medium, #111111)
- Section background: (BACKGROUND) (default: #efefef)
⏱️ Deal Banner
A photo banner for a limited-time offer: a chip, a large title, a live countdown to the date you set, and a button. Two variations: Light and Dark.
Content Settings
📝 Banner
- Width: (SELECTBOX) "In the column" or "Full width" (default: In the column)
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Left)
- Chip above the title: (INPUTBOX) e.g. "Weekend deal"
- Title: (TEXTAREA) A new line breaks the title, e.g. "Up to 20% off / noise cancelling"
- Button: (BUTTON) e.g. "Shop the deal" (opens the store)
- Background image: (IMAGE) The banner photo
⏳ Countdown
- Show countdown: (TOGGLE) Counts down to the end date; it hides itself when the date has passed or is empty (default: ON)
- Deal end date: (INPUTBOX) In the form 2027-12-31T23:59:59 (default: 2027-12-31T23:59:59)
Design Settings
🎛️ Display Options
- Round corners: (TOGGLE) Rounded banner (default: ON)
🎨 Styling
- Title: (TEXT) Size (64-104px), color, bold/italic (default: 104px bold, #ffffff)
- Button: (BUTTON) Appearance, shape, size, color (default: Solid, Pill, Medium, white)
- Section background: (BACKGROUND) (default: #efefef)
📸 Community Photos
"Heard on you": customer or social photos as a moving row that loops on its own, or as a static grid, with a profile link next to the title. Each photo can open a product page or a link of your choice. Photos are added by hand (no live Instagram connection). Two variations: Light, moving row and Dark, grid.
Content Settings
📐 Layout & Title
- Layout: (SELECTBOX) "Moving row" (a full-width row that loops) or "Grid" (static) (default: Moving row)
- Speed: (SELECTBOX) Slow, Normal or Fast — the row slows down under the pointer (default: Normal)
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Left)
- Title: (INPUTBOX) e.g. "Heard on you"
- Profile link: (BUTTON) e.g. "@motra.audio" — photos without their own link open it too
🖼️ Photos
Photos: DECK (Repeatable, max 12)
- Photo: (IMAGE) The picture
- Description: (INPUTBOX) For screen readers, not shown
- Linked product: (PRODUCT_SELECTOR, 1 product) The photo opens its page
- Link if no product is picked (optional): (BUTTON)
Design Settings
🎛️ Display Options
- Round corners: (TOGGLE) Rounded photos (default: ON)
🎨 Styling
- Title: (TEXT) Size (44-80px), color, bold/italic (default: 68px bold, #111111)
- Profile link: (BUTTON) Appearance, shape, size, color (default: Solid, Pill, Medium, white)
- Background: (BACKGROUND) Section background (default: #efefef)
📰 Press Row
"As heard in": a white panel with a small label and a row of publication names or logos, static or moving. Two variations: Light, static and Dark, moving.
Content Settings
🏷️ Names & Logos
- Layout: (SELECTBOX) "Static row" or "Moving row" (a row that loops on its own) (default: Static row)
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Left)
- Label: (INPUTBOX) e.g. "As heard in"
Names / logos: DECK (Repeatable, max 12)
- Name: (INPUTBOX) Shown as text when there is no logo image
- Logo image (optional): (IMAGE)
- Link (optional): (BUTTON) e.g. the review article
Design Settings
🎛️ Display Options
- Round corners: (TOGGLE) Rounded panel (default: ON)
🎨 Styling
- Label: (TEXT) Size (11-14px), color, bold/italic (default: 12px bold, #6b6b6b)
- Names: (TEXT) Size (20-30px), color, bold/italic (default: 26px bold, #6b6b6b)
- Panel background: (BACKGROUND) (default: #ffffff)
- Background: (BACKGROUND) Section background (default: #efefef)
🎧 Product Page
The Motra product page: a large image gallery with a white buy panel (title, price, colour swatches, edition buttons, quantity, "Add to bag"), service notes, extra details as accordions or tabs, a sticky add-to-bag bar and a "Pairs well with" row. 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
The buy panel stays in view (sticky) while the gallery scrolls on desktop.
Content Settings
🛒 Buy Panel
- Note under Add to bag: (INPUTBOX) e.g. "Tax included. Pay in 4 interest-free instalments at checkout."
- Service note 1–4 — title / text: (INPUTBOX) Short promises under the button, e.g. "Free express shipping over $99" / "Order before 14:00, ships today", "30-day home trial", "Two-year warranty"; empty notes are hidden
📑 Extra Details
- Extra details 1–4: Each with a Title (INPUTBOX) and Text (TEXTAREA), shown as accordions or tabs next to the product description, e.g. "Fit & comfort", "Shipping & returns"; empty ones are hidden
- Description tab — title: (INPUTBOX) Title of the product description block
🔗 "Pairs well with"
- Title: (INPUTBOX) (default: "Pairs well with")
- Category: (INPUTBOX) The name of a store category whose products are shown; empty hides the block (default: "Accessories")
Design Settings
🖼️ Image Gallery
- Image placement: (SELECTBOX) Thumbnails below the image, Thumbnails at the left, or Full size images (default: Thumbnails at the left)
- Full size images layout: (SELECTBOX) Large image with side column, Two per row, or Standard (first image large) (default: Large image with side column)
- Zoom image on hover: (TOGGLE) (default: ON)
- Show image alt text as description: (TOGGLE) (default: OFF)
- Round corners: (TOGGLE) (default: ON)
- Ribbon colours: (SELECTBOX) "As designed (light pill)" or "Product's ribbon colour" (default: As designed)
🎨 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)
- Size buttons: (SELECTBOX) Boxes or Pills (default: Boxes)
- Stock availability / Number of items / Product quantity: (TOGGLE) (default: ON)
- Sticky add to bag bar: (TOGGLE) A bar that appears when the button scrolls out of view (default: ON)
- Sticky bar shows: (SELECTBOX) "Product, variant and button" or "Also the size buttons" (default: Product, variant and button)
- Service notes as: (SELECTBOX) "List with dots" or "Icons, two per row" (default: List with dots)
🧭 Navigation & Details
- Breadcrumbs: (SELECTBOX) Show in sidebar, Show in header, or Do not show (default: Show in header)
- Show navigation arrows: (TOGGLE) Previous/next product (default: ON)
- Category name above the title: (TOGGLE) (default: OFF)
- 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, Loyalty bonuses, Outlets & stock, Estimated delivery time, Wholesale prices, Product reviews (one card or multiple cards), Favorites button and Share buttons (optionally as icons) — all shown by default.
🗂️ Category Page
The page of a single category: a category header (five styles), subcategory pills or a slider, filters, the product grid and a row of perks under the products. Found in the editor under Pages → Category page. Colors follow the color scheme of the store section.
Content Settings
📝 Header & Perks
- Header button: (BUTTON) Optional button in the category header
- Subcategory slider — heading: (INPUTBOX) Title above the subcategory slider
- Perk 1–3 — title / text: (INPUTBOX) The perks row under the products (defaults: "Free shipping" / "On orders over $99, worldwide.", "30-day trial" / "Try at home, return for free.", "Two-year warranty" / "Including battery health below 80%.")
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)
- Round corners: (TOGGLE) (default: ON)
- Full-width header (breadcrumbs inside): (TOGGLE) (default: OFF)
- Tinted band behind title and categories (simple title): (TOGGLE) (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)
- Show the perks row under the products: (TOGGLE) (default: ON)
🔎 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 / Show "Sort by" options / Show "Sign In" link: (TOGGLE) (default: ON)
- Show bottom navigation menu: (TOGGLE) (default: OFF)
🃏 Product Cards
- Ribbon colours: (SELECTBOX) As designed (light pill) or Product's ribbon colour (default: As designed)
- Card grid spacing: (SELECTBOX) None, Narrow, Medium or Wide (default: Medium)
- Content alignment: (SELECTBOX) Center, Left, Justify or Right (default: Left)
- Image proportions: (SELECTBOX) Square, Portrait 2:3, Portrait 3:4, Landscape 4:3 or Landscape (default: Portrait 3:4)
- 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, price and rating shown; subtitle and SKU hidden; "Buy now" on hover)
- Color swatches: (SELECTBOX) Show or Do not show (default: Show)
- Rating view: (SELECTBOX) Five stars or One star; plus Show average rating / Show total number of reviews (TOGGLE, ON)
- Show product card frame: (TOGGLE) (default: OFF)
- Show main product image / Show additional image on hover: (TOGGLE) (default: ON)
📂 Subcategories
- Show categories as: (SELECTBOX) Default, Slider, Tabs, Pills, Cards, Rows with thumbnail, or Image tiles (default: Pills)
- Pills: (SELECTBOX) With thumbnail and product count, or Text only (default: With thumbnail and product count)
- 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, "The full lineup": a title with a search field and quick search terms, category tiles, a product shelf per category, "Shop by" text tiles and a closing band. Found in the editor under Pages → Catalog page. Colors follow the color scheme of the store section.
Content Settings
🔍 Head of the Page
- Head — title: (INPUTBOX) Write a word between asterisks (*word*) to set it in italics (default: "The full lineup")
- Head — text: (TEXTAREA)
{count}is replaced with the number of products in the store - Head — text in the search field: (INPUTBOX) (default: "Search the catalog…")
- Quick search term 1–5: (INPUTBOX) Chips under the search field (defaults: ANC, Buds, Studio, Cable, Case)
🖼️ Banner & Second Panel
- Banner — image / small line / title / text under the title / button: (IMAGE, INPUTBOX, TEXTAREA, BUTTON) Used when the top of the page is "Banner" or "Two image panels" (defaults: "New this week", "The full lineup")
- Second panel (beside the banner) — image / small line / title / button: The second panel of "Two image panels side by side"
📂 Categories & Tiles
- Category row — small line / heading / text: (INPUTBOX) Heading above the category tiles
- Category panels — button label: (INPUTBOX) (default: "Shop now")
- Text tile — small line / title / button: A text tile at the end of the category row
- Tile 1–4 — small line / title and link: (INPUTBOX, BUTTON) The "Shop by" text tiles (default small lines: "Need help?", "Free", "Up to 20% off", "Parts")
- Band — title / text / first button / second button: The closing band (default: "Not sure which to choose?")
- Heading — small line / title / text: The heading above the products (default title: "All products")
Design Settings
🎛️ Page Layout
- Top of the page: (SELECTBOX) The full lineup (title, search, category tiles, one block per category), Title with search, Banner (one image), Two image panels side by side, or Nothing (default: The full lineup)
- Banner height: (SELECTBOX) 300–700px (default: 500px)
- Show the search field and quick terms / Show the "shop by" text tiles / Show the closing band: (TOGGLE) (default: ON)
- Round corners: (TOGGLE) (default: ON)
📂 Categories
- Show categories as: (SELECTBOX) Bento tiles (large and small), 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: Hidden)
- Category blocks / product shelves: (SELECTBOX) One block per category for none or the first 1–6 categories (default: First 4 categories)
- Show category pills above the products: (TOGGLE) (default: OFF)
- 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, ribbon colours, rating view).
📖 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