Usage

Styles

Switch styles in Website → Themes. Each style has its own logo colours: upload your logo per style in Website → Themes → Logos.

Style	Look
Tangerine	White shop, tangerine flood hero and bands, ink type on the brand colour, 28 px corners, pill buttons, headline weight 800, ink tab bar with a tangerine active tab.
Kelly	Warm cream ground, split hero (cream text half, kelly-green product half), 16 px corners, 12 px buttons, headline weight 600, cream tab bar, dark green newsletter band.
Bubblegum	Blush ground, bubblegum flood hero, 2 px ink outlines on cards and tags, 40 px corners, lemon stickers, ink bands and tab bar.
Ultramarine	White shop, headline in ultramarine on white with a tinted disc (no flood), brand buttons with white text, crisp 8 px corners, ultramarine top bar and bands.

Product data

Kiosk shows these only when the data exists; nothing is invented.

Where	What is shown
Colour swatches	The variants of a select or radio option named Colour (Color, Shade, Finish), up to five on cards (+N), up to ten in the hero, all on the product page with the colour name.
Swatch dot	The colour of the variant name: the demo colours (Tangerine, Dune, Sage, Ocean, Night, Chalk, Petal, Lemon), about 70 common colour words, or a hex code used as the name. Other names show the variant image.
The image a swatch picks	1. the option variant’s own image; 2. the product image whose alt text is the variant name; 3. the product image at the same position (main image = first colour, first additional image = second colour …). Upload one cut-out per colour with identical framing so the swap does not jump.
Sizes	An option named Size (Volume, Capacity). The product page shows it as a segmented control with the price of each size; To scale, side by side shows the sizes with heights from the volume in the names (500 ml, 750 ml, 1 litre, 16 oz).
Size line on cards	A feature named Capacity, Volume or Size (for example 600 ml).
“Why it works” (product page)	Feature values that start with a number and a unit (24 h, 12 h, 360 g) become up to three number tiles, labelled with the feature name; up to three other short values become the numbered list. Shown from two numbers.
Quick add	One item with the picked colour and the first variant of every other required option. Products that are out of stock or have no price show no quick add.

Sale and discount badges come from the standard labels (shown as brand pills); the Kavio Labs Product Labels & Stickers add-on works too. Other options (lids, engraving) keep the standard controls: small selects become chips, a text option with a maximum length gets a letter counter.

Homepage

The homepage comes from the theme’s layout (Website → Themes → Layouts); every section is on by default:

1. Kiosk top bar: three short notes (edit the block content).
2. Kiosk hero: Products block with the template Colour-picker hero stage (Kiosk theme); pick one product (filling Manually). Block settings: chip (New|Dune and Petal are here), title, lead, three tags (24 h cold|double steel wall; Leak-proof|tested 10,000 times; Lifetime warranty|no receipt needed), button labels. The second button scrolls to the bundle builder.
3. Kiosk trust strip: rating, shipping, trial and warranty notes (block content).
4. Most refilled: Products block with Swatch cards section (Kiosk theme); with more than four products the row scrolls with arrows. Settings: kicker, note, “See all” link (a dispatch such as products.bestsellers).
5. To scale, side by side: Products block with Sizes to scale (Kiosk theme) and one product with a Size option. Settings: kicker, note, notes under the sizes (fits every cup holder; the everyday one; long days). The bottles take the colour closest to the style’s brand colour.
6. Kiosk inside band: feature band with numbered callouts and three numbers (block content).
7. Build a set: Products block with Bundle builder (Kiosk theme) and three products. A set discount is a cart promotion of your store (Marketing → Promotions, for example “3 items from these products: 15 % off”); write the offer into the block setting Title when the set is complete so the text matches your promotion.
8. From the journal (blog) as three cards.
9. People agree: the Kiosk score tile (edit the number and text) and your testimonials as review cards.
10. Kiosk FAQ: six questions (block content; <details> elements).
11. Newsletter band: the newsletter sign-up of the footer.
12. Kiosk wordmark: the giant word above the copyright row (block content, fitted to the width).

Hot deals keeps its place as “Most refilled”, Sale became “Build a set”; Brands and, on Multi-Vendor, Featured Vendors are disabled (single-brand shops). Enable them on the Layouts page if you need them.

Category pages

Under the breadcrumbs, Kiosk category bar (Categories block with Segmented category bar (Kiosk theme)) shows your top-level categories with product counts as pills, sticky under the header; the current category is highlighted. The title is large with the product count above it. Kiosk bundle tile sits inside the product grid after the fourth card (edit text and link in the block content). On phones the filters open in a bottom sheet.

Product pages

The gallery stage is tinted with the picked colour and follows the colour swatches; on phones it becomes a full-width swipe gallery with dots and a counter, and a floating buy bar (colour dot, price, add button) appears above the tab bar once the add button scrolled away. Kiosk product perks (three notes, block content) moves under the add button. Goes with it shows similar products as swatch cards.

Phones

The header shows logo, account and bag in one row and the search below; the hero shows the product first; home rows become swipe rows; category grids show two products per row; the floating tab bar gives one-tap access to Shop, Search, Sets (the bundle builder), Account and Bag with the item count.