Welcome to Volta Theme
Volta - A rugged, no-nonsense template for tools & hardware stores
This guide will help you customize your store's look and feel. No coding knowledge required! Each section below explains how to configure different parts of your theme using the built-in theme editor. See the theme in action in the live preview or get it from the Ecwid App Market.
🚀 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. The schemes are built from your store palette, and the dark variations use its darkest color (ink by default)
- Text Styling: Adjust size, color, bold, or italic
- Show/Hide: Toggle elements on or off
- Round Corners: On by default (off in the Hero Slider); Volta's corners are small and square-ish by design. Turn it off to give the photos, tiles and cards of that section fully square corners
- Heading alignment: Left by default (the Reviews title and the "Brands we stock" caption start centered); switch to center or right where a section offers it
- Accent Words: Put asterisks around a word in a section title to show it in the accent color, e.g.
Power that keeps up with the *job*. - Accent Color: The yellow details of the theme (the "Shop by category" button, primary buttons, markers and highlights) use the "Strong accent" color of your store palette (workshop yellow #F2C200 by default) — change it under Design → Colors
- Buttons: Rectangular 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: Volta uses one font family, Archivo, for everything: titles are heavy and uppercase, body text and buttons use the regular weights. Title sizes are the size on wide screens — titles scale down smoothly on smaller screens.
Template: Volta ships with one template, Build: a warm off-white page, white cards, workshop yellow on ink, and the Archivo font. Its home page shows, top to bottom: Hero Slider, Category Row, Product Tabs, Promo Banner, Values Strip, Deal of the Week, Brand Story, Brand Marquee, Reviews and Journal. The Comparison Table, Help & FAQ, Community Photos, Shop the Photo and Video Tabs sections can be added with "Add section".
Product grids on category, catalog and search pages follow Ecwid's "Card size" setting (Medium by default: 4 products per row on desktop, 2 on phones).
📌 Header
A three-tier "trade counter" header: a dark top bar (text at the left, rotating announcements in the middle, small links and the currency switch at the right), a main row with the logo, a wide search field, a phone line and account / wishlist / cart (with the cart subtotal), and a dark menu bar that starts with an accent "Shop by category" button. Dropdowns are built from your store, and phones get a menu drawer. Two variations: Trade counter, light and Trade counter, dark.
Content Settings
🏷️ Logo
- Logo: (LOGO) Your store logo or name
- Text beside the logo (wide screens): (INPUTBOX) A short line next to the logo, e.g. "Tools & Supply"
🧭 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; a Brands item lists your store's brands; other items list their own sub-items. Without a Dropdown template card, a category item gets Columns + tile 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. "Power tools"
- Template: (SELECTBOX) Choose display style (default: Columns + tile):
- • Columns + tile: Titled link columns with a photo tile at the right
- • Categories + products: The categories at the left, three products of the hovered one beside them
- • Mega columns: A column per category with its image, product count and first four products
- • Category columns: Each category with its subcategories
- • Simple list: A compact list under the item
- Tile image: (IMAGE) Picture for the tile
- Tile title: (INPUTBOX) Title on the tile
- Tile text: (INPUTBOX) Short line on the tile
- Tile link: (BUTTON) Where the tile leads
ℹ️ About the Tile
The tile shows at the right of a Columns + tile or Mega columns dropdown on wide screens (1180px and up). Leave the image empty for a dropdown without a tile.
🧰 "Shop by category" Button
The accent button at the start of the dark menu bar; it opens your store's category tree.
- Category button text: (INPUTBOX) (default: "Shop by category")
- Category button dropdown: (SELECTBOX) How the store's categories show under the button: Columns + tile (the design), Categories + products, Mega columns or Category columns (default: Columns + tile)
- Category dropdown tile image: (IMAGE) Photo tile in that dropdown
- Tile title / Tile text: (INPUTBOX) Text on the tile
- Tile link: (BUTTON) Where the tile leads
- Link at the right of the menu bar: (BUTTON) An optional link at the end of the menu bar, e.g. "Open a trade account"
📢 Top Bar
- Top bar text at the left (wide screens): (INPUTBOX) e.g. "Trade counter open today 7am–7pm"
Announcements: DECK (Repeatable, max 8) — messages in the middle of the top bar, each with an accent dot.
- Announcement text: (INPUTBOX) Announcement message
- Link (optional): (BUTTON) Optional link for the announcement
- Rotate announcements: (TOGGLE) One message at a time, the next one rolling up every 4 seconds; off, the first message stays (default: ON)
Top bar links: DECK (max 5) — small links at the right of the top bar on wide screens, such as Help or Track order, each with a Link (BUTTON). On phones they show in the menu drawer.
- About top bar links: (INFO) Explains where the links show
💱 Currency Switch
- About the currency switch: (INFO) With the "Ultimate Currency Converter" app installed, the top bar shows a currency switch and prices follow the chosen currency. Without the app nothing shows
The switch needs the Ultimate Currency Converter app by Infinite Apps. It opens the app's own currency picker, sits at the right of the top bar (in the menu drawer on phones), and the prices in the header's dropdowns and cart subtotal follow the chosen currency. Turn it off with the Currency switch toggle in the Design tab.
🔍 Search & Contact
- Search field text: (INPUTBOX) Placeholder in the header's search field; pressing Enter opens the search page (default: "Search 12,000+ tools, parts and brands")
- Phone line label: (INPUTBOX) Label shown with the phone number, e.g. "Trade line · Mon–Sat 7–7"
- Phone number (wide screens and phone menu): (INPUTBOX) Shown in the main row and in the phone menu drawer
🔗 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 (default: ON)
- Show search field: (TOGGLE) Display the search field (default: ON)
- Show account: (TOGGLE) Show account/login link (default: ON)
- Show wishlist: (TOGGLE) Show the link to the shopper's favorites (default: ON)
- Show category button: (TOGGLE) Show the "Shop by category" button (default: ON)
- Round corners: (TOGGLE) Rounded corners in the header and its dropdown panels (default: ON)
- Menu bar: (SELECTBOX) "Dark band" — the menu on its own dark bar under the logo row, as designed — or "Light" — the menu on the header's color with a hairline (default: Dark band)
- Show top bar: (TOGGLE) Display the top bar (default: ON)
- Top bar on phones: (TOGGLE) Display the top bar on phones too (default: ON)
- Currency switch: (TOGGLE) Show the currency switch in the top bar when the Ultimate Currency Converter app is installed (default: ON)
🎨 Colors & Backgrounds
- Header background: (BACKGROUND) Background of the logo row (default: #f3f2ee)
- Menu bar background: (BACKGROUND) Background of the dark menu bar (default: #16181b)
- Menu text: (TEXT) Size (12-15px), color, bold/italic (default: 13px bold, #f3f2ee)
- Top bar background: (BACKGROUND) Top bar background (default: #15171a)
- Announcement text: (TEXT) Size (12-14px), color, bold/italic (default: 13px, #f3f2ee)
🎞️ Hero Slider
The big opening section of the home page: up to 6 slides, each with a small label, a heavy uppercase title, a short text and two buttons, with progress tracks and square arrows. Four styles to choose from. Two variations: Photo slider (light) and Dark split.
Content Settings
📐 Slider Style
- Slider style: (SELECTBOX) Choose the layout (default: Fade):
- • Fade: Slides cross-fade over a full-width photo (as designed)
- • Slide: Photos slide sideways, with centered text
- • Split: A text panel beside the photo
- • Carousel: Wide cards with the next one peeking in
⏱️ Autoplay
- Autoplay: (TOGGLE) Moves to the next slide on its own; any click on the controls restarts the timer (default: ON)
- Time per slide: (SELECTBOX) 5, 6.5, 8 or 10 seconds (default: 6.5 seconds)
🖼️ Slides
Type: DECK (Repeatable, max 6)
- Image: (IMAGE) Slide photo
- Image focus: (SELECTBOX) Which part of the photo stays in view when the hero is narrower than the photo — Left, Centre or Right (default: Centre)
- Small label above the title: (INPUTBOX) e.g. "New season · Cordless range"
- Title: (INPUTBOX) Slide headline, e.g. "Power that keeps up with the job."
- Text: (TEXTAREA) Short paragraph under the title
- Primary button: (BUTTON) e.g. "Shop power tools"
- Secondary button: (BUTTON) e.g. "View the range"
Design Settings
🎛️ Layout
- Height: (SELECTBOX) As designed (740px), Almost full screen, Medium (580px) or Small (480px) (default: As designed)
- Text alignment (Fade and Carousel): (SELECTBOX) Left, Centre or Right (default: Left)
- Round corners: (TOGGLE) Rounded panels and photos (default: OFF)
🎨 Styling
- Small label: (TEXT) Size (11-13px), color, bold/italic (default: 12px bold, #ffffff)
- Title: (TEXT) Size (72-108px), color, bold/italic (default: 96px, #ffffff)
- Text: (TEXT) Size (16-19px), color, bold/italic (default: 19px, #ffffff)
- Primary button: (BUTTON) Appearance, shape, size, color (default: Solid, Rectangle, Medium)
- Secondary button: (BUTTON) Appearance, shape, size, color (default: Outline, Rectangle, Medium)
- Split: text panel background: (BACKGROUND) Panel color in the Split style (default: #16181b)
- Background: (BACKGROUND) Section background (default: #f3f2ee)
🏷️ Category Row
"Shop by category": a row of category tiles with a photo, the category name and its product count, under a small label, a title and a link. Two variations: Light and Dark.
Content Settings
📝 Header
- Small label above the title: (INPUTBOX) (default: "Shop by category")
- Title: (INPUTBOX) Section title (default: "Everything for the job")
- Link beside the title: (BUTTON) (default: "All categories")
🗂️ Category Tiles
Type: DECK (Repeatable, max 10)
- Store category (photo, name, product count and link): (CATEGORY_SELECTOR) The category the tile shows
- Name (replaces the category name; also finds the store category until one is picked): (INPUTBOX) Optional custom name — until you pick a category, the tile uses the store category with this name
- Image (used when the category has no photo): (IMAGE) Fallback photo for the tile
- 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) (default: ON)
🎨 Styling
- Small label: (TEXT) Size (12px), color, bold/italic (default: 12px bold, #5B5F64)
- Title: (TEXT) Size (40-64px), color, bold/italic (default: 54px, #15171A)
- Category name: (TEXT) Size (15-20px), color, bold/italic (default: 16px bold, #15171A)
- Link beside the title: (BUTTON) Appearance, shape, size, color (default: Text link, Medium)
- Background: (BACKGROUND) Section background (default: #F3F2EE)
🛍️ Product Tabs
"Picked by the trade counter": product cards in up to four tabs (e.g. New arrivals, Best sellers, On sale), as a grid or a slider. Each card shows the photo (the second photo on hover), ribbon, stock line, name, rating and price, with an "Add to cart" button. Two variations: Light and Dark.
Content Settings
📝 Title
- Small label above the title: (INPUTBOX) (default: "Featured")
- Title: (INPUTBOX) Section title (default: "Picked by the trade counter")
- Products per tab: (SELECTBOX) 4 (one row), 8 or 12 (default: 4)
🗂️ Tabs
Type: DECK (Repeatable, max 4)
- Tab name: (INPUTBOX) e.g. "New arrivals"
- Products to show: (SELECTBOX) Choose the source (default: A category):
- • A category: Products of the category picked below
- • Picked products: The products you pick below
- • Newest products: The most recently added products
- • Products on sale: Discounted products
- Category: (CATEGORY_SELECTOR) The category for "A category"
- Picked products: (PRODUCT_SELECTOR) Up to 12 products
- Category to use until one is picked (store category name): (INPUTBOX) With no category picked, the tab uses the store category with this name (or the one named like the tab)
🛒 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
- Layout: (SELECTBOX) "Grid" — rows of four, as designed — or "Slider" — one row that scrolls, with arrows (default: Grid)
- Heading alignment: (SELECTBOX) Left, Center or Right; the tabs move under the title when centered or right (default: Left)
- Round corners: (TOGGLE) Rounded cards and photos (default: ON)
- Show the second photo on hover: (TOGGLE) (default: ON)
- Show the product subtitle as a stock line: (TOGGLE) e.g. "In stock · ships today" (default: ON)
- Ribbon colours: (SELECTBOX) "As designed" (sale red on discounted products, ink for "New", the accent for any other ribbon) or "Product's colour" (the color set on the product ribbon) (default: As designed)
🎨 Styling
- Small label: (TEXT) Size (12px), color, bold/italic (default: 12px bold, #5B5F64)
- Title: (TEXT) Size (40-64px), color, bold/italic (default: 54px, #15171A)
- Background: (BACKGROUND) Section background (default: #F3F2EE)
✅ Values Strip
A strip of your store's promises — e.g. "Next-day delivery", "Trade pricing", "2-year warranty" — each with a title, a short text and a numbered square. Two variations: Light and Dark.
Content Settings
📝 Header
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Left)
- Title (optional): (INPUTBOX) A title above the points; empty hides it
✅ Points
Type: DECK (Repeatable, max 8)
- Point title: (INPUTBOX) e.g. "Next-day delivery"
- Point text: (TEXTAREA) e.g. "Order by 8pm, on site by 10am."
Design Settings
🎛️ Display Options
- Round corners: (TOGGLE) (default: ON)
- Numbered squares: (TOGGLE) A numbered square before each point (default: ON)
🎨 Styling
- Title (optional): (TEXT) Size (34-64px), color, bold/italic (default: 54px, #15171a)
- Point title: (TEXT) Size (15-20px), color, bold/italic (default: 16px bold, #15171a)
- Point text: (TEXT) Size (13-16px), color, bold/italic (default: 14px, #5b5f64)
- Background: (BACKGROUND) Section background (default: #ffffff)
⭐ Deal of the Week
One product in the spotlight, in two styles: "Deal of the week" — the photo with a discount disc beside the price, a countdown, a stock line and an "Add to cart" button (as designed) — or "Product spotlight" — a text panel with feature chips and buttons beside a tall photo. Name, price and photo come live from your store. Two variations: Dark and Light.
Content Settings
🛍️ Style & Product
- Style: (SELECTBOX) Deal of the week or Product spotlight (default: Deal of the week)
- Product: (PRODUCT_SELECTOR) The product in the spotlight
- Product to show until one is picked (store product name): (INPUTBOX) Until you pick a product, the section shows the store product with this name (default: "18V Brushless Combi Kit")
📝 Text
- Small label above the title: (INPUTBOX) (default: "Deal of the week")
- Title (empty: the product's name): (INPUTBOX)
- Text (empty: the first paragraph of the product's description): (TEXTAREA)
⏱️ Countdown & Stock
- Show countdown: (TOGGLE) Counts down to the end date below, or to the end of this week (Sunday midnight) when the date is empty; hidden once the date has passed (default: ON)
- Deal end date (e.g. 2027-12-31T23:59:59; empty: end of this week): (INPUTBOX)
- Show the stock line: (TOGGLE) "Only 14 left at this price" with a bar, from the product's stock; shown only when the store tracks the product's quantity (default: ON)
🖼️ Photo, Chips & Buttons
- Feature chips (spotlight): DECK (max 6) - Small chips, each with a Chip text (INPUTBOX)
- Main button (spotlight; left at "go to store" it opens the product): (BUTTON) (default: "Shop the kit")
- Second button (left at "go to store" it opens the product): (BUTTON) (default: "View details")
- Photo (empty: the product's photo): (IMAGE)
- Photo position: (SELECTBOX) Left or Right; on phones the photo stacks above the text (default: Left)
- Line under the product name (spotlight bar): (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
- Text alignment: (SELECTBOX) Where the label, title, text and buttons sit — Left, Center or Right (default: Left)
- Round corners: (TOGGLE) (default: ON)
- Show the discount disc: (TOGGLE) (default: ON)
- Price in the main button (spotlight): (TOGGLE) Adds the product's price to the main button (default: ON)
🎨 Styling
- Small label: (TEXT) Size (12px), color, bold/italic (default: 12px bold, #5B5F64)
- Title: (TEXT) Size (44-72px), color, bold/italic (default: 60px, #15171A)
- Text: (TEXT) Size (15-18px), color, bold/italic (default: 16px, #5B5F64)
- Main button (spotlight): (BUTTON) Appearance, shape, size, color (default: Solid, Rectangle, #15171A)
- Second button: (BUTTON) Appearance, shape, size, color (default: Outline, Rectangle, #15171A)
- Background: (BACKGROUND) Section background (default: #F3F2EE)
📖 Brand Story
Your story beside a photo: a label, a title, a few paragraphs, up to four figures (e.g. "40 years trading") and a button. Two variations: Light and Dark.
Content Settings
📝 Story
- Image position: (SELECTBOX) Left or Right; on phones the photo is above the text (default: Right)
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Left)
- Label above the title: (INPUTBOX) (default: "Since 1984")
- Title: (INPUTBOX) (default: "Tested on site before it reaches the shelf.")
- Text (a blank line starts a new paragraph): (TEXTAREA)
- Image: (IMAGE)
- Button: (BUTTON) (default: "Our story")
🔢 Figures
Type: DECK (Repeatable, max 4)
- Figure: (INPUTBOX) e.g. "40"
- Unit (optional): (INPUTBOX) A unit shown after the figure
- Label: (INPUTBOX) e.g. "years trading"
Design Settings
🎛️ Display Options
- Round corners: (TOGGLE) Rounded photo (default: ON)
🎨 Styling
- Title: (TEXT) Size (44-68px), color, bold/italic (default: 60px, #15171a)
- Text: (TEXT) Size (15-18px), color, bold/italic (default: 16px, #5b5f64)
- Button: (BUTTON) Appearance, shape, size, color (default: Solid, Rectangle, #15171a)
- Section background: (BACKGROUND) (default: #f3f2ee)
🔩 Brand Marquee
"Brands we stock": the names or logos of your brands as a moving row, a static row or a grid. Two variations: Light and Dark.
Content Settings
📐 Layout
- Layout: (SELECTBOX) "Moving row" — a row that loops on its own (the design), "Static row" — the names in one row, or "Grid" — a bordered cell per name (default: Moving row)
- Speed: (SELECTBOX) How fast the moving row travels — Slow, Normal or Fast (default: Normal)
- Caption alignment: (SELECTBOX) Left, Center or Right (default: Center)
- Caption: (INPUTBOX) (default: "Brands we stock")
🏷️ Brands
Type: DECK (Repeatable, max 16)
- Name (shown when there is no logo image): (INPUTBOX)
- Logo image (optional): (IMAGE)
- Link (optional, e.g. the brand's products): (BUTTON)
Design Settings
🎛️ Display Options
- Round corners (grid cells): (TOGGLE) (default: ON)
🎨 Styling
- Caption: (TEXT) Size (11-14px), color, bold/italic (default: 12px bold, #5b5f64)
- Names: (TEXT) Size (24-34px), color, bold/italic (default: 30px, #15171a)
- Background: (BACKGROUND) Section background (default: #f3f2ee)
💬 Reviews
"Trusted by 40,000 trades and makers": review cards with stars, the review, the customer's name, trade and town, and an optional "Verified purchase" note with the product bought. Two variations: Light and Dark.
Content Settings
📝 Header
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Center)
- Label above the title: (INPUTBOX) (default: "Reviews")
- Title: (INPUTBOX) (default: "Trusted by 40,000 trades and makers")
- Purchase note (before the product name): (INPUTBOX) (default: "Verified purchase")
⭐ Reviews
Type: DECK (Repeatable, max 8)
- Stars: (SELECTBOX) 5, 4 or 3 stars (default: 5 stars)
- Review: (TEXTAREA) The review text
- Name: (INPUTBOX) The customer's name
- Trade and town: (INPUTBOX) e.g. "Electrician, Leeds"
- Product bought (optional): (INPUTBOX) Shown after the purchase note
Design Settings
🎛️ Display Options
- Round corners: (TOGGLE) Rounded review cards (default: ON)
🎨 Styling
- Label: (TEXT) Size (11-13px), color, bold/italic (default: 12px bold, #5b5f64)
- Title: (TEXT) Size (34-64px), color, bold/italic (default: 54px, #15171a)
- Review text: (TEXT) Size (16-22px), color, bold/italic (default: 18px, #15171a)
- Name: (TEXT) Size (14-16px), color, bold/italic (default: 15px bold, #15171a)
- Background: (BACKGROUND) Section background (default: #f3f2ee)
📰 Journal
"From the workshop": article cards with a photo, a tag, the read time and the title, plus an "All articles" link. Each card opens its article. Two variations: Light and Dark.
Content Settings
📝 Header
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Left)
- Label above the title: (INPUTBOX) (default: "Journal")
- Title: (INPUTBOX) (default: "From the workshop")
- "All articles" link: (BUTTON) (default: "All articles")
📄 Articles
Type: DECK (Repeatable, max 6)
- Photo: (IMAGE)
- Tag: (INPUTBOX) e.g. "Guide"
- Read time: (INPUTBOX) e.g. "6 min read"
- Article title: (INPUTBOX) e.g. "Choosing the right drill bit for metal, masonry and wood"
- Link to the article (the card opens it): (BUTTON)
Design Settings
🎛️ Display Options
- Round corners: (TOGGLE) Rounded photos (default: ON)
🎨 Styling
- Label: (TEXT) Size (11-13px), color, bold/italic (default: 12px bold, #5b5f64)
- Title: (TEXT) Size (34-64px), color, bold/italic (default: 54px, #15171a)
- "All articles" link: (BUTTON) Appearance, shape, size, color (default: Text link, #15171a)
- Article titles: (TEXT) Size (18-24px), color, bold/italic (default: 21px, #15171a)
- Background: (BACKGROUND) Section background (default: #f3f2ee)
📊 Comparison Table
"Find the right drill for the job": up to three products side by side, with their photos, names and prices from your store and a row per spec. Specs come from the products' attributes in your store; a "Show differences only" checkbox hides the rows where every product is the same. Two variations: Light and Dark.
Content Settings
📝 Header
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Left)
- Eyebrow: (INPUTBOX) (default: "Compare")
- Title: (INPUTBOX) (default: "Find the right drill for the job")
🛍️ Products & Specs
- Products to compare (up to 3): (PRODUCT_SELECTOR)
- Products to compare until some are picked (names, one per line): (TEXTAREA) (default: "18V Brushless Hammer Drill", "Brushless Impact Driver, 18V", "SDS Rotary Hammer, 18V")
- Specs to compare (one per line; empty = every spec): (TEXTAREA) (default: Torque, Chuck, Weight, Battery platform, Warranty)
- Show "differences only" checkbox: (TOGGLE) Lets shoppers hide the rows where every product is the same (default: ON)
- Checkbox label: (INPUTBOX) (default: "Show differences only")
📋 Fallback Columns & Values
- Column 1 / 2 / 3 name (when no products load): (INPUTBOX) (defaults: "Hammer Drill", "Impact Driver", "SDS Rotary Hammer")
- Spec values (used where a product has no such spec in the store): DECK (max 12) - Each with a Spec name (INPUTBOX) and Value, column 1 / 2 / 3 (INPUTBOX)
Design Settings
🎛️ Display Options
- Round corners: (TOGGLE) Rounded table and photos (default: ON)
🎨 Styling
- Title: (TEXT) Size (36-64px), color, bold/italic (default: 54px, #15171a)
- Product name: (TEXT) Size (14-18px), color, bold/italic (default: 15px bold, #15171a)
- Background: (BACKGROUND) Section background (default: #f3f2ee)
❓ Help & FAQ
"Questions before you order?": a help column with a title, a short text and two buttons beside an accordion of questions; one question is open at a time. Two variations: Light and Dark.
Content Settings
📝 Help Column
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Left)
- Label above the title: (INPUTBOX) (default: "Help")
- Title: (INPUTBOX) (default: "Questions before you order?")
- Help text: (TEXTAREA) e.g. how to reach your team
- First button: (BUTTON) (default: "Contact us")
- Second button: (BUTTON) (default: "Track an order")
❓ Questions
- Open first question: (TOGGLE) Shows the first answer when the page loads (default: ON)
- Questions: DECK (max 20) - Each with a Question (INPUTBOX) and an Answer (TEXTAREA)
Design Settings
🎨 Styling
- Title: (TEXT) Size (34-64px), color, bold/italic (default: 54px, #15171a)
- Help text: (TEXT) Size (14-17px), color, bold/italic (default: 16px, #5b5f64)
- First button: (BUTTON) Appearance, shape, size, color (default: Solid, Rectangle, #f2c200)
- Second button: (BUTTON) Appearance, shape, size, color (default: Outline, Rectangle, #15171a)
- Question: (TEXT) Size (14-18px), color, bold/italic (default: 15px bold, #15171a)
- Answer: (TEXT) Size (14-17px), color, bold/italic (default: 15px, #5b5f64)
- Background: (BACKGROUND) Section background (default: #f3f2ee)
📸 Community Photos
"#voltaonsite": your customers' or your own photos as a full-width moving row or a static grid, with a profile link. A photo can open a product's page, its own link or the profile. Two variations: Light, moving row and Dark, grid.
Content Settings
📐 Layout & Header
- 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) Slow, Normal or Fast; the row slows down while the pointer is over it (default: Normal)
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Left)
- Eyebrow: (INPUTBOX) (default: "On site")
- Title: (INPUTBOX) (default: "#voltaonsite")
- Profile link (photos without their own link open it too): (BUTTON) (default: "@voltatools")
🖼️ Photos
Type: DECK (Repeatable, max 12)
- Photo: (IMAGE)
- Caption (shown on hover): (INPUTBOX)
- Linked product — the photo opens its page: (PRODUCT_SELECTOR)
- Link if no product is picked (optional): (BUTTON)
Design Settings
🎛️ Display Options
- Round corners: (TOGGLE) Rounded photos (default: ON)
🎨 Styling
- Title: (TEXT) Size (36-64px), color, bold/italic (default: 54px, #15171a)
- Profile link: (BUTTON) Appearance, shape, size, color (default: Outline, Rectangle, #15171a)
- Background: (BACKGROUND) Section background (default: #f3f2ee)
🎯 Shop the Photo
"Shop the wall": one large photo with up to six markers. Shoppers tap a marker to see what it points at, with a link to the product. Two variations: Light and Dark.
Content Settings
📝 Heading & Photo
- Eyebrow: (INPUTBOX) (default: "Shop the wall")
- Title: (INPUTBOX) (default: "Every tool, in its place")
- Line at the right of the heading: (INPUTBOX) (default: "Tap a marker to see the tool")
- Photo: (IMAGE)
📍 Hotspots
Type: DECK (Repeatable, max 6)
- What it points at: (INPUTBOX) e.g. the tool's name
- Text: (TEXTAREA) A short line about it
- Across (from the left): (SELECTBOX) 5%–95% — 0% is the left edge of the photo, 100% the right edge (default: 50%)
- Down (from the top): (SELECTBOX) 5%–95% — 0% is the top of the photo, 100% the bottom (default: 50%)
- Product to link: (PRODUCT_SELECTOR)
- Product name to link until one is picked: (INPUTBOX) The store product with this name is linked until you pick one
Design Settings
🎛️ Display Options
- Heading alignment: (SELECTBOX) Left, Center or Right (default: Left)
- Round corners: (TOGGLE) Rounded photo (default: ON)
🎨 Styling
- Title: (TEXT) Size (36-64px), color, bold/italic (default: 54px, #15171a)
- Background: (BACKGROUND) Section background (default: #f3f2ee)
🎬 Video Tabs
"See it working before you buy": 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: Light and Dark.
Content Settings
📝 Title
- Eyebrow: (INPUTBOX) (default: "On the tools")
- Title: (INPUTBOX) (default: "See it working before you buy")
🎞️ Videos
Type: DECK (Repeatable, max 5)
- Tab title: (INPUTBOX)
- Line under the player: (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)
- Round corners: (TOGGLE) Rounded player and posters (default: ON)
🎨 Styling
- Title: (TEXT) Size (36-64px), color, bold/italic (default: 54px, #15171a)
- Background: (BACKGROUND) Section background (default: #f3f2ee)
🔧 Product Page
The Volta product page: an image gallery with a buy panel (category name above the title, price, option buttons, quantity, "Add to bag"), a note under the button, a service box with the stock line, a delivery promise and three service icons, extra details as accordions or tabs, a sticky add-to-bag bar and a "Frequently bought together" 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) (default: "Tax calculated at checkout. Trade accounts save 15%.")
- Service note 1–4 — title / text: (INPUTBOX) Short promises under the button (defaults: "Next-day delivery" / "Order by 8pm, on site by 10am", "2-year warranty" / "Every power tool repaired or replaced free", "30-day returns" / "Unused items, full refund"); empty notes are hidden. In the default service box the first three show as icons with their titles
📑 Extra Details
- Extra details 1–4: Each with a Title (INPUTBOX) and Text (TEXTAREA), shown as accordions or tabs next to the product description (defaults: "Delivery & returns", "Warranty"); empty ones are hidden. Lines written as
A | B | Care shown as a table, e.g. for a size guide - Description tab — title: (INPUTBOX) Optional name of the description's own tab when details are shown as tabs
🔗 "Pairs well with"
Up to three products of a store category under the product, each with photo, name, price and an "Add to cart" button (products with options open their page).
- Title: (INPUTBOX) (default: "Frequently bought together")
- Category (its name in the store; empty = no block): (INPUTBOX) (default: "Best Sellers")
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 with the product, the chosen variant and the button that appears when the page's own 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) "Box with stock and delivery + three icons (the design)", "List with dots" or "Icons, two per row" (default: the design)
- Order cutoff for the delivery promise: (SELECTBOX) No delivery promise, or 12:00–22:00 — the service box then shows e.g. "Order within 5h 12m for delivery Tue, Oct 21" (default: 20:00)
- Days until delivery: (SELECTBOX) 1, 2, 3 or 5 working days (default: 1)
🧭 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: ON)
- Show details as: (SELECTBOX) Accordions or Tabs (default: Accordions)
- Collapsible product details and extra details: (TOGGLE) (default: ON)
- Open product details by default: (TOGGLE) (default: ON)
- Weight / Product attributes / Product description: (TOGGLE) (default: ON)
⚙️ Standard Ecwid Options
Show SKU, 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 (six styles, a dark band by default), subcategory pills or another list style, 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: "Next-day delivery" / "Free on orders over $99. Order by 8pm, on site by 10am.", "Trade pricing" / "15% off and 30-day terms for account holders.", "2-year warranty" / "Every power tool repaired or replaced free.")
Design Settings
🖼️ Category Header
- Category header: (SELECTBOX) Dark band (text beside a wide image), 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: Dark band)
- 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 (1:1), Portrait (2:3), Portrait (3:4), Landscape (4:3) or Landscape (2:3) (default: Portrait 3:4)
- Card size: (SELECTBOX) Small, Medium or Large — sets how many cards fit in a row (default: Medium)
- Product name / Product subtitle / Price / SKU / "Buy now" button / Product rating: (SELECTBOX) Show, Do not show, or Show on mouse hover (defaults: name, subtitle, price and rating shown; SKU 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 product 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. By default it opens with "Collections": a title, an intro and your store's counts (e.g. "6 collections · 142 products"), then every main category as a card with its product count and its subcategories as chips. Below come the products, "Shop by" text tiles and a closing band. Other tops are available, from a title with a search field to banners. 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 (*word* = italic): (INPUTBOX) (default: "Shop all categories")
- Head — text ({count} = the number of products in the store): (INPUTBOX)
{count}is replaced with the number of products in the store - Head — text in the search field: (INPUTBOX) (default: "Search tools, parts and brands")
- Quick search term 1–5: (INPUTBOX) Chips under the search field (defaults: Cordless drill, Wrench set, Tool chest, Helmet, Laser)
🖼️ Banner & Second Panel
- Banner — image / small line / title / text under the title / button: (IMAGE, INPUTBOX, BUTTON) Used when the top of the page is "Banner" or "Two image panels" (defaults: "New season", "Shop all categories")
- 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 above the heading / 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 (defaults: "Need help?" / "Talk to the trade counter", "Trade accounts" / "Save 15% on every order", "Up to 30% off" / "Deals", "Spares" / "Batteries & chargers")
- Band — title / text / first button / second button: The closing band (default: "Not sure which tool you need?")
- Heading — small line above the title / title / text under the title: The heading above the products (default title: "Picked by the trade counter")
Design Settings
🎛️ Page Layout
- Top of the page: (SELECTBOX) Collections (title, counts, category cards with subcategories), 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: Collections)
- Banner height: (SELECTBOX) 300–700 px (default: 500 px)
- 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 (one per category): (SELECTBOX) 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).
🔎 Search Page
The page that opens when a shopper searches from the header or the catalog page. It has no settings of its own: the results use Volta's product cards in the same column as the rest of the site, with the filter and product card settings of the Category Page. Colors follow the color scheme of the store section.
📖 Property Type Reference
INPUTBOX
Single-line text input for short content like titles, labels, URLs
TEXTAREA
Multi-line text input for descriptions, long content
BUTTON
Button configuration with text and link URL
IMAGE
Image upload supporting multiple resolutions (mobile/desktop, low/hi-res)
TOGGLE
On/off switch for enabling/disabling features
SELECTBOX
Dropdown menu with predefined options
DECK
Repeatable card items for creating lists, carousels, multiple entries
PRODUCT_SELECTOR
Pick products from your store catalog with configurable maximum
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