Usage
Styles
Section titled “Styles”Switch styles in Website → Themes. Each style has its own logo colours: upload your logo per style in Website → Themes → Logos.
| Style | Look |
|---|---|
| Daylight | Warm aluminium-white store, ink type, burnt-orange buttons and meters, red-orange sale, white cards, ink top band and footer, the deal stage as a dark blueprint band. |
| Signal | Yellow top band, deal tiles, trade-in band and compare tray, ink header with a yellow cart button, red buttons and sale badges, square corners, heavy display type, wide-gap ink meters. |
| Ember | Warm graphite dark store, ember-orange top band, buttons and trade-in band, amber deal stickers, solid meters, pill buttons, 20 px corners, light product wells. |
| Carbon | Cool near-black store, cyan lines, buttons and meters, coral sale, outline cards, 10 px corners, light product wells. |
Specs: meters, callouts, versus and at a glance
Section titled “Specs: meters, callouts, versus and at a glance”Volt reads your product features. Create the specs as features of the type Number (Products → Features) with a unit suffix (” h”, “ dB”, “ g”, “ Hz” and so on) and turn on Show in product list for the ones that should become meters.
- Spec meters (cards): the first three Number features of a product with “Show in product list” on, in feature position order. The bar places the value between the lowest and highest value of that feature in the same category. Weight, latency and noise features (code containing WEIGHT, LATENCY or NOISE, or the unit g, kg, ms) fill more when the value is lower. Weights of 1,000 g and more are shown in kg.
- Deal stage callouts and at a glance (product page): the meter specs first, then the other Number features.
- Head to head: one row per Number feature both products have (up to six).
- Lab score: a Number feature with the code
LAB_SCORE(for example 9.1) shows as a ring in Top rated in our lab and as a tag on cards without a deal. - Brand: your brand feature (type Brand/Manufacturer) or a feature with the code
BRAND; with a product filter on it, brand tiles and brand chips open the filtered list. - Condition (refurbished): a feature with the code
CONDITION; every value except “New” shows as a chip next to the brand.
Category icon bar
Section titled “Category icon bar”The Category icon bar block is a categories block (your top-level categories in their category order; the demo content fills it with eight departments). The icon follows the category name (phone, laptop, tablet, TV, audio, gaming, camera, smart home, wearables, accessories); other categories show their category image or a monogram. Hovering a category opens its mega panel: subcategories with their own subcategories, the category’s brands and the Top deal: the biggest saving among the category’s most popular products. A Deals link (products on sale) closes the bar. On phones the icons scroll sideways and the bottom bar’s Menu opens the full menu (Main menu block).
Homepage
Section titled “Homepage”The homepage comes from the theme’s layout (Website → Themes → Layouts). Every section is a normal block:
| Block | What to edit |
|---|---|
| Deal of the week | Products block (template Deal stage with spec callouts (Volt theme)): the first product. The kicker is a block setting; the countdown is the end of the product’s catalog promotion. Use a front-view product image with some margin. |
| Deal tiles | Products block (template Countdown deal tiles (Volt theme)): two or three products, each with its own promotion countdown. |
| Volt trust row | Five service promises (static HTML). |
| Deals of the day | Product block (template Product section (Volt theme), style “Deals row”): the earliest promotion end in the title row, countdowns on the cards. |
| Shop by brand | Categories block (template Brand stores (Volt theme)): the brands of your products with their counts, as type wordmarks. |
| Bestsellers heading + Phones / Laptops / TV & Audio / Gaming | The heading block and four product blocks (style “Tab”, user class kv-tabs) become one tabbed section; the block names are the tab names. |
| Shop by category | Categories block (template Shop by category index (Volt theme)): category image, name and product count. |
| Head to head | Products block (template Head to head (Volt theme)): the first two products. |
| Trade-in band | Static HTML: texts, steps and the button link. |
| Complete your setup | Product block, style “Scrolling row with arrows” (accessories). |
| Top rated in our lab | Product block, style “Lab scores”. |
| About the store | Two-column SEO text with “Read more”. |
Product section blocks have the settings Columns (3 to 6), Section style, Line under the title and a
“View all” link (a page URL or a dispatch such as products.on_sale).
Compare tray
Section titled “Compare tray”Every card, the deal stage and Head to head have a Compare toggle. Compared products stay in the tray at the bottom of the screen while the shopper browses (up to four); Compare (n) opens the store’s comparison page. The tray uses the store’s own comparison list, so the comparison page, the account menu and the header counter agree.
Category pages
Section titled “Category pages”Title and description, brand chips of the category (with counts) and an All deals chip, subcategory chips, the product filters in the sidebar (a Filters sheet on phones) and the Quick compare tile inside the product grid after the eighth product (edit or disable it in the layout).
Product pages
Section titled “Product pages”Brand (and condition), name, rating, price with the regular price, the saving pill, the monthly price, at a glance (four spec numbers), the price history chart when price data exists, colour and storage chips, the protection plan as option cards (an option whose name contains “Protection”, “Plan” or “Cover”), “In stock: ships today”, Add to cart, wish list, compare and the delivery facts (Volt delivery facts block). Below: description, features, reviews, Complete your setup and You may also like.
Phones
Section titled “Phones”The header shows logo, compare and cart with the search below, the category icons scroll sideways, the deal stage shows the product first, product grids show two products per row with compact meters, the compare tray sits above the bottom bar (which has a Compare tab), the product gallery swipes and a sticky buy bar replaces the bottom bar on product pages.