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 |
|---|---|
| Fog | Cool fog ground, graphite type, white tiles with a soft lift shadow and inset image wells, teal hero, lime and coral tiles, pill buttons, 22 px corners. |
| Graphite | Near-black ground, raised graphite tiles with hairline rims instead of shadows, mint buttons, lime top bar, amber tile, 18 px corners. |
| Pop | Warm white, colour-blocked pastel tiles (mint hero, butter, peach), tomato actions and top bar, chunky 30 px corners, no shadows, the heaviest headlines. |
| Lab | White lab bench: the bento grid is ruled with 1 px hairlines instead of gaps, square tiles, flush image wells, black and acid-lime tiles, black buttons with acid type, a 2 px ink frame on hover. |
Product data the cards and product pages use
Section titled “Product data the cards and product pages use”Bento shows these only when the data exists; nothing is invented. Add your specs as product features in
Products → Features (text, number or select features; one value per feature). Keep values short and with a unit:
40 h, 248 g, IPX4, Hybrid ANC, 65 W, 20,000 mAh.
| Where | What is shown |
|---|---|
| Spec chips on cards | Up to three values. Tick Show in product list on the features you want there; without ticked features Bento uses the first three short values of the product (by feature position). |
| Spec chips under the product title | Up to five short values (by feature position). |
| The numbers (product page) | Up to five values that start with a number and a short unit, rendered big: “40 h” becomes a 40 with a small “h”, the feature name is the label. Shown from two such values. |
| Deal of the day countdown | The end date of the active catalog promotion of the product (Marketing → Promotions, with an end date). |
| Stock line on the deal tile | “Only 7 left” when the product has 10 or fewer in stock, otherwise the saving. |
Sale badges come from the standard discount labels (shown as mono badges); the Kavio Labs Product Labels & Stickers add-on works too.
Compare toggle
Section titled “Compare toggle”Product cards show a Compare toggle in the image corner (on hover; it stays visible once ticked). It adds the product to the standard comparison list without leaving the page; the Compare icon in the header shows the count. Needs Settings → General → Enable comparison list (on by default).
Homepage
Section titled “Homepage”The homepage comes from the theme’s layout (Website → Themes → Layouts); every section is on by default:
- Top bar note (Bento top bar block: edit the three short texts).
- Bento hero tiles: hero product tile (headline, lead, spec chips, price, buttons), the stat tile (“Battery test
40 h” with two comparison bars), a category tile and a trade-in tile. Edit texts and links
(
{"categories.view?category_id=181"|fn_url}) in the block content; keep the classes. The bars usestyle="--v:58%"for their length. - Deal of the day: Products block with the template Deal-of-the-day tile (Bento theme); pick one product (filling Manually). Kicker text in the block settings.
- Pick your corner: Categories block with Category mosaic (Bento theme); the first category is the big tile (the first sentence of its description is the headline), the next eight are small tiles. Kicker and note in the block settings.
- Fresh off the bench: Products block with Bento product section (Bento theme) and Featured first card
on: the first product becomes a 2 × 2 card with its short description. Settings: kicker, note, “See all” link
(a dispatch such as
products.newest,products.bestsellersorproducts.on_sale). - Bento inside band: dark band with four spec numbers, an exploded illustration with callouts and two buttons.
- Ends Sunday: products on sale in the Bento product section.
- Bento brand strip: wordmarks of the brands you sell (edit the text in the block content).
- From the bench (blog) and What owners say (reviews) as tiles.
- Bento service tiles: four service promises (edit the texts).
- Newsletter tile: the newsletter sign-up of the footer, styled as a lime tile.
Hot deals and Brands are in the layout but disabled (Bento shows deals in its own sections and wordmarks in the brand strip); on Multi-Vendor, Featured Vendors is disabled too. Enable them on the Layouts page if you need them.
Category pages
Section titled “Category pages”Under the breadcrumbs, Bento category header (title tile: category name, product count, the start of the description) and Bento category promos (two promo tiles; edit texts and links in the block content) form the bento header; the standard title and description move into it. Subcategories show as pills. On phones the filters open in a bottom sheet.
The Main menu block uses the template Mega menu with “More” (Kavio theme). A menu item that links to
products.on_sale (and the standard Sales item) becomes the Deals chip on the right. Items that do not fit move
into “More”.
Phones
Section titled “Phones”The header shows logo and cart in one row and the search below; the hero tiles stack in pairs, the category mosaic becomes a swipeable row, product grids show two products per row with a round add button; product pages get a swipe gallery with dots and a sticky buy bar; the bottom bar gives one-tap access to home, menu, search, account and cart.