by Kavio Labs · for WooCommerce 10.1+ on WordPress 6.7+
Block theme for fashion and apparel stores that reads like a printed lookbook: a lookbook hero with a shop-the-look pin, tall 3:4 product cards with a second photo on hover, hang-tag labels, quick sizes, colour swatches and size chips, a fit scale and a shop-the-look block with Add all to bag. Four styles, one-click demo content, full site editing.
Block theme for fashion and apparel stores that reads like a printed lookbook: a lookbook hero with a shop-the-look pin, tall 3:4 product cards with a second photo on hover, hang-tag labels, quick sizes, colour swatches and size chips, a fit scale and a shop-the-look block with Add all to bag. Four styles, one-click demo content, full site editing.
WooCommerce 10.1 - 11.2, WordPress 6.7+
Atelier is a block theme for fashion and apparel stores: independent labels, boutiques and concept stores. It reads like a printed lookbook: an oversized serif headline with one italic word, a lookbook hero with a shop-the-look pin, tall 3:4 product cards with a second photo on hover, hang-tag labels, quick size bars, colour swatches and size chips, a shop-the-look block with one Add all to bag button and a giant italic wordmark in the footer. Typography is Fraunces and Manrope (self-hosted).
Product Personalizer for WooCommerce (monograms and engraving on leather goods and watches) and Make an Offer for WooCommerce (negotiated prices). Both are separate Kavio Labs products; the theme does not depend on them and their fields and buttons are styled to fit.
Atelier is GPL-2.0-or-later. In the own-site (Kavio Labs) edition a licence key unlocks updates, the demo importer and the colour swatches, size chips, shop-the-look button and column switch; templates, patterns, styles and your store keep working without it (the variation selects fall back to the normal dropdowns), and the admin is never blocked. The CodeCanyon edition uses a purchase code for updates and support only. The WooCommerce.com edition has no licence screen. See configuration.
WordPress 6.7+, WooCommerce 10.1+, PHP 7.4+.
| Element | Where it comes from |
|---|---|
| Colour swatches on the product page and colour dots on cards | A variable product with a variation attribute named Colour (or Color). The swatch colour is taken from the colour name (Camel, Charcoal, Sage, Oat, Rust, Navy and about 30 more); unknown names get a neutral tone. |
| Size chips, quick sizes on cards, struck-through sold-out sizes | A variation attribute named Size |
| Colour-specific photos | Set an image on each variation: the product gallery switches with the colour |
| Fit scale | A product attribute named Fit with the value Runs small, True to size or Runs large |
| Cloth band | Product attributes named Fabric, Care and Fit |
| Hang-tags | Core data: sale prices (percentage), date created (New for 30 days), total sales (Bestseller), stock (Low stock at 5 or fewer, Sold out) |
| Colour, size and fabric filters in the shop sidebar | Global attributes (Products > Attributes) with the slugs colour, size and fabric; the links use ?filter_colour=navy |
| Shop the look | The best seller of each of the categories with the slugs tailoring, knitwear, accessories, shoes and dresses-skirts (change them in the pattern) |
| The edit | Your top-level product categories with their category image |
Without this data those elements are simply not shown or fall back to normal WooCommerce behaviour.
The importer creates six product categories, 18 products (17 variable, with prices, stock, colour photos and reviews), the global attributes Colour, Size and Fabric, four pages (About, Delivery and returns, Size and care guide, Contact) and three posts in the category Journal. Everything it creates is tagged, so Remove demo content deletes exactly those items (and the attributes it created) and nothing else. Running the import again updates the items instead of duplicating them. The first run creates the attributes and continues in a second request automatically.
Command line: wp kv-atelier demo import, wp kv-atelier demo remove, wp kv-atelier demo status.
Upload the new zip over the old one (WordPress asks to replace the theme). Your template edits made in the Site Editor are stored in the database and are kept.
Switch to another theme and delete Atelier. If you imported the demo content, remove it first (Appearance > Atelier).
| Section | What it does |
|---|---|
| Licence (own-site and CodeCanyon editions) | Enter the licence key or purchase code. The check runs from the admin once a day and sends the site address and the key to kaviolabs.com; nothing about customers, visitors or orders. |
| Demo content | Import, update or remove the sample store. |
| Without a valid licence | Still works |
|---|---|
| Colour swatches and size chips (the normal selects are shown), the shop-the-look button and the column switch | All templates, patterns, styles and the Site Editor |
| Demo importer | Cart, Checkout, orders and every store setting |
| Updates | The admin (never blocked) |
A new installation has a 14-day start period; if the licence server cannot be reached, a 14-day grace period applies. Development hosts (localhost, .test, private addresses) are always accepted. The CodeCanyon edition never locks features: the purchase code only enables updates and support. The WooCommerce.com edition has no licence screen and sends nothing.
The theme exposes its shape as custom values in theme.json: custom.radius (image corners), radiusSm, heading.weight and heading.weightItalic (Fraunces weight of headings and of the italic word), name.transform, name.tracking and name.size (product names), frame.pad, frame.bg and frame.line (passe-partout), hero.* (panel, text, accent word, size), band.* (the coloured banner), scene.* (colours of the still lifes), well.* (card backgrounds) and focus. A child theme or a style variation can override them together with the colour palette. The palette has 19 named colours; pick text and background pairs from the same style to keep AA contrast. The default WordPress font sizes, spacing sizes, colours and gradients are switched off; the theme ships its own scale.
The home page template (front-page) is a list of patterns. In Appearance > Editor > Templates > Front Page click a section to change its text, links or products, or drag sections to reorder them. The same sections are in the block inserter under Atelier sections so you can use them on any page.
| Section | Notes |
|---|---|
| Lookbook hero | Headline with one italic word, lead text, a button, three facts and two still lifes with a shop-the-look pin. Edit the text and links. |
| The edit | Your top-level categories as tall tiles with the number of pieces (filled from store data). |
| New this week, The sale rail | Product collection blocks (newest, on sale). Cards show hang-tags, colour dots and quick sizes. |
| Shop the look | A styled still life with numbered dots; each piece has a size select and one Add all to bag button (filled from store data). |
| Promises, Journal story, Journal, Notes from our customers, Letters banner | Plain blocks; edit the text. |
Three of these (The edit, Shop the look and the shop filters) are filled by the theme on the front end from store data: in the editor they show as an empty group with a marker class (kv-dyn-edit, kv-dyn-look, kv-dyn-filters).
The header navigation is a Navigation block with the six demo categories and a Sale link. Edit it in Appearance > Editor > Patterns > Header. Item links point to the demo categories (/product-category/<slug>/); change them to match your own.
Open Appearance > Editor > Styles > Browse styles and pick Bone, Noir, Sorbet or Sage. Colours, image corners, the hero panel, passe-partout frames and the product name style change everywhere, including the Cart and Checkout blocks.
On a variable product with Colour and Size attributes the selects are replaced by round colour swatches and square size chips (the selects stay in the page and are used when scripts are off). Choosing a colour switches the photo when the variation has an image, and marks the sizes that are sold out in that colour. Add the attributes in Products > the product > Attributes > "Used for variations".
The block picks the best seller of each category listed in its marker class. Each row has a checkbox, a size select (in-stock sizes of the first available colour) and the price; the total follows the ticks and Add all to bag adds every ticked piece through the WooCommerce Store API, so the mini cart updates without a page load.
The sidebar lists Colour, Size and Fabric (links to the standard layered navigation) next to the WooCommerce price, rating and availability filters. The toolbar has the result count, sorting and a 2 / 3 / 4 column switch that is remembered in the browser.
Engraving and monogram fields from Product Personalizer for WooCommerce appear in the product summary; the Make an Offer button sits under the Add to bag button. Both inherit the colours and shapes of the active style.
The block inserter has three page patterns under Atelier store pages: About us, Delivery and returns, Size and care guide.
kv-atelier/
style.css theme.json functions.php screenshot.png readme.txt LICENSE.txt
templates/ front-page, index, page, page-wide, single, archive, search, 404 + WooCommerce:
archive-product, product-search-results, single-product, page-cart, page-checkout, order-confirmation
parts/ header, footer, checkout-header (thin wrappers around the PHP patterns of the same name)
patterns/ kv-atelier/* PHP patterns (translatable text, home_url(), theme file URIs, inline still-life SVG); sections and store pages
styles/ noir.json, sorbet.json, sage.json (Bone = theme.json)
assets/ css/theme.css (front end + editor), css/admin.css, js/theme.js (swatches, shop the look, column switch), fonts/
inc/ KavioLabs\Atelier\ Theme, Catalog, Blocks, Settings, Admin\ThemePage, Demo\{Importer,Cli}, License\{Manager,Client,Envato}
demo/ pack.json + images (demo importer data)
languages/ kv-atelier.pot (English only; no translation files ship)kv_atelier_ / KavioLabs\Atelier / KV_ATELIER_; text domain kv-atelier.Catalog filters woocommerce_dropdown_variation_attribute_options_html (swatches next to the select), render_block_woocommerce/product-image (hang-tags, second photo, quick sizes inside the card image) and render_block_woocommerce/product-price (colour dots). Swatch colours: Catalog::COLOURS.Blocks filters render_block_core/group: an empty Group with the class kv-dyn-edit (option kv-dyn-limit-6), kv-dyn-look (option kv-dyn-cats-tailoring_knitwear_shoes), kv-dyn-filters, kv-dyn-extras or kv-dyn-cloth is filled from store data. A theme cannot register blocks or shortcodes (Theme Check), hence the marker classes./wc/store/v1/cart/add-item, nonce from the cart response header).tests/gen-patterns.js (the still lifes come from the shared Atelier art set), theme.json and the three style files by tests/gen-theme-json.js (one palette table), and the demo pack by tests/demo/build-pack.js (from the shared Orris Atelier pack of the other platforms; colour siblings become one variable product). Edit the generators, not the output.tests/contrast.js checks every palette pair used by the theme against WCAG AA for all four styles.wp transient delete --all.node tooling/kv.js theme-validate woo_theme_atelier --platform woocommerce
node tooling/kv.js theme-lint woo_theme_atelier --platform woocommerce
node tooling/kv.js theme-package woo_theme_atelier --platform woocommerce # dist/woocommerce/kv-atelier/<version>/ kv|envato|woo zips
node tooling/kv.js theme-deploy woo_theme_atelier --platform woocommerce --sync --activate
node woocommerce/themes/woo_theme_atelier/tests/contrast.js
node woocommerce/themes/woo_theme_atelier/tests/e2e.js # home, shop, colours and sizes, shop the look, block checkout order, classic pagesApplying a style on a dev store from the command line: wp eval-file tests/variation.php noir --user=admin (a user is needed, otherwise WordPress strips the global styles content).
Yes. Both are styled by the theme and nothing replaces them. The classic cart and checkout shortcode pages work too.
The theme never reads or writes orders, so it is neutral to High-Performance Order Storage.
10.1 to 11.2, on WordPress 6.7 or newer.
Swatches need a variable product whose variation attribute is called Colour (or Color). In the own-site edition they also need an active licence or the start period.
Open the variation in the product editor and set its image; the gallery switches when the colour is chosen.
They link to the standard WooCommerce layered navigation (?filter_colour=navy), which needs global attributes with the slugs colour, size and fabric. The demo content creates them.
Yes, the templates and styles are general; the home sections are written for fashion stores and are all editable.
The product is English. Strings are translatable (text domain kv-atelier, .pot file in languages/).
Only the own-site and CodeCanyon editions, once a day from the admin, to check the licence. The WooCommerce.com edition makes no external request.
No. The demo uses generated illustrations of a fictional label.
More for WooCommerce
Sell products by weight, length, area or volume with decimal quantities, unit prices, step/min/max and a live price on the product page.
Year/make/model parts search for WooCommerce: fitment table per product, CSV import, My Garage, fits / does not fit badge and vehicle-filtered shop and search pages.
EN 16931 e-invoices and credit notes from WooCommerce orders: XRechnung (CII/UBL), ZUGFeRD/Factur-X PDF/A-3 and Peppol BIS 3.0 UBL, gapless numbering, B2B checkout fields, validation, e-mail attachments, My Account downloads and ZIP export.
