Developer notes
| Item | Value |
|---|---|
| Add-on id | kv_theme_duo |
| Theme | kv_duo (child of responsive), installed from var/themes_repository/kv_duo |
| Built with | Kavio theme kit 1.2.8 (kv-files.json lists every file with its hash and the kit version), modules shell (split) and flagship |
| CSS prefix | du- (theme), kv- / kv-fs- (kit) |
css/kit/*.less(kit layer and modules),css/skin/skin.less(Duo),styles/data/{Linen,Sage,Coast,Blush,Citrus,Lilac,Noir,Tide}.less.blocks/static_templates/kv_du_panel.tpl: the context panel (category, product, vendor store). It reads only$category_data,$subcategories,$search.total_items,$productand, on vendor pages, the company data and logo; no visitor data (full page cache safe). It prints nothing without the licensed design.js/addons/kv_theme_duo/theme.js: campaign slide timer with a progress line, product image stack counter and keyboard control, option image follow; kit components (bottom bar, buy bar, option chips, filter sheet, swipe gallery).
The split
Section titled “The split”Kit shell split: <html data-kvt> carries kvt-shell-split on every page except cart, checkout, account, orders,
sign-in and vendor sign-up. A grid with the user class kv-split-media becomes the fixed left half from 1024 px
(42 % from 1024 to 1279 px) once html.kv-split-on is set (an inline script in the panel block sets it before the
page paints; the kit runtime sets it too). Header, top panel, content and footer move to the right half. Any block can
live in that grid; the Duo layouts use the campaign slides and the context panel block.
Customising
Section titled “Customising”Use a child theme or the Theme editor’s custom CSS. Design tokens are LESS variables (@kv_*, @kv_fs_*, @du_*) set
by each scheme file: @du_panel_bg/_text/_muted/_em (the second tone), @kv_shell_split / @kv_shell_split_md
(panel width).