by Kavio Labs · for WooCommerce 10.1+ on WordPress 6.7+
Block theme for beauty and cosmetics stores: a Brands A-Z list, a brand offer mosaic with end dates, a shade strip, product cards on tinted plates with round shade swatches and price per ml, a Top 10 chart, a routine builder and a product page with a shade picker, how-to and ingredients. Four styles, one-click demo content, full site editing.
Block theme for beauty and cosmetics stores: a Brands A-Z list, a brand offer mosaic with end dates, a shade strip, product cards on tinted plates with round shade swatches and price per ml, a Top 10 chart, a routine builder and a product page with a shade picker, how-to and ingredients. Four styles, one-click demo content, full site editing.
WooCommerce 10.1 - 11.2, WordPress 6.7+
Gloss is a block theme for beauty and cosmetics stores: makeup, skincare, fragrance, hair and body care. Tinted counter plates behind every product, round shade swatches, a Brands A-Z list, a shade strip from fair to deep, a Top 10 chart with large serif numerals, offers with their end dates and a routine builder that adds three products in one tap. Typography is Instrument Serif and Instrument Sans (self-hosted).
Product Personalizer for WooCommerce (engraving and monograms on gift sets and fragrance) and Make an Offer for WooCommerce (negotiated prices on gift sets and multi-buys). Both are separate Kavio Labs products; the theme does not depend on them and their fields and buttons are styled to fit.
Gloss is GPL-2.0-or-later. In the own-site (Kavio Labs) edition a licence key unlocks updates, the demo importer, the shade swatches and the routine builder button; templates, patterns, styles and your store keep working without it (the shade list falls back to the normal select), 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 |
|---|---|
| Brand line, Brands A-Z, Shop by brand | Products > Brands (WooCommerce product brands) |
| Shade swatches on cards and on the product page | A variable product with a variation attribute named Shade (or Colour). The swatch colour is taken from the shade name (Fair, Ivory, Honey, Berry, Rose and about 70 more); unknown names get a neutral grey |
| Size chips | A variation attribute named Size |
| Price per ml | A product attribute named Volume with a value such as 30 ml |
| Sale end date on cards | The scheduled sale dates of the product or of its variations |
| Shade strip, concern chips | Global attributes Shade group and Concern (Products > Attributes) with the terms Fair to Ebony and your concerns; the links use ?filter_shade-group=fair and ?filter_concern=acne |
| Routine builder | The best sellers of the categories with the slugs cleansers, serums and spf (change them in the pattern) |
Without this data those elements are simply not shown or fall back to normal WooCommerce behaviour.
The importer creates 25 product categories, seven brands, 44 products (19 variable, with prices, stock, attributes, images and 165 reviews), the global attributes Shade group, Concern, Skin type and Finish, five pages (Brands A-Z, About, Delivery and returns, Shade and skin guide, Contact) and three posts in the category Beauty 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-gloss demo import, wp kv-gloss demo remove, wp kv-gloss 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 Gloss. If you imported the demo content, remove it first (Appearance > Gloss).
| 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 |
|---|---|
| Shade swatches (the normal select is shown) and the Add routine to bag button | 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, radiusSm, radiusBtn, heading.weight, heading.tracking, nav.transform, num.stroke (outline of the Top 10 numerals), card.border, card.shadowHover. A child theme or a style variation can override them together with the colour palette. The palette has 19 named colours (page, surface, ink, muted, primary and hover, accent text, in stock, well, line, footer, dark panel, top bar, text on dark, sale and more); 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, photos, links or products, or drag sections to reorder them. The same sections are in the block inserter under Gloss sections so you can use them on any page.
| Section | Notes |
|---|---|
| Hero mosaic | A campaign tile with a product shot and four brand offer tiles (brand, offer, link). Edit the text and links. |
| Shade strip | Ten dots from fair to deep; each opens the shop filtered by shade group. Appears on the front end (the editor shows an empty block). |
| Promise strip | Four short promises with icons (samples, delivery, returns, payment). |
| Shop by category | Eight tiles on tinted plates; replace the pictures and links with your categories. |
| New in, Top 10, Offers | Product collection blocks (newest, popularity, on sale). The Top 10 numerals are CSS counters. |
| Shop by concern | Chips that link to /shop/?filter_concern=<term>. |
| Routine builder | Best sellers of three categories with checkboxes, a running total and Add routine to bag. |
| Shop by brand | The biggest brands from Products > Brands. |
| Journal, Reviews, Samples banner | Latest posts, three quotes and a call to action. |
Three of these (Shade strip, Routine builder, Brands) 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-shade-strip, kv-dyn-routine, kv-dyn-brands).
The header navigation is a Navigation block. Its first item is Brands A-Z (the page /brands-a-z/), then the categories with drop-down menus. 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 Nude, Cherry, Peach or Noir. Colours, corner radius and the numeral style of the Top 10 change everywhere, including the Cart and Checkout blocks.
On a variable product with a Shade attribute the select is replaced by round swatches (the select stays in the page and is used when scripts are off). Shades without stock are crossed out. Add the attribute in Products > the product > Attributes > "Used for variations".
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 four page patterns under Gloss store pages: Brands A-Z, About us, Delivery and returns, Shade and skin guide.
kv-gloss/
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-gloss/* PHP patterns (translatable text, home_url(), theme file URIs); sections and store pages
styles/ cherry.json, peach.json, noir.json (Nude = theme.json)
assets/ css/theme.css (front end + editor), css/admin.css, js/theme.js (swatches, routine builder), fonts/
inc/ KavioLabs\Gloss\ Theme, Catalog, Blocks, Settings, Admin\ThemePage, Demo\{Importer,Cli}, License\{Manager,Client,Envato}
demo/ pack.json + images (demo importer data)
languages/ kv-gloss.pot (English only; no translation files ship)kv_gloss_ / KavioLabs\Gloss / KV_GLOSS_; text domain kv-gloss.Catalog filters woocommerce_dropdown_variation_attribute_options_html (swatches next to the select) and render_block_woocommerce/product-price (shade dots on cards, price per ml from the Volume attribute, sale end date). Swatch colours: Catalog::COLOURS (shade name, whole name first, then the first known word).Blocks filters render_block_core/group: an empty Group with the class kv-dyn-brands (options kv-dyn-az, kv-dyn-limit-8), kv-dyn-shade-strip or kv-dyn-routine (option kv-dyn-cats-cleansers_serums_spf) is filled from store data. A theme cannot register blocks or shortcodes (Theme Check), hence the marker classes.tests/gen-patterns.js, 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 Gloss & Co. pack of the other platforms). 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_gloss --platform woocommerce
node tooling/kv.js theme-lint woo_theme_gloss --platform woocommerce
node tooling/kv.js theme-package woo_theme_gloss --platform woocommerce # dist/woocommerce/kv-gloss/<version>/ kv|envato|woo zips
node tooling/kv.js theme-deploy woo_theme_gloss --platform woocommerce --sync --activate
node woocommerce/themes/woo_theme_gloss/tests/contrast.js
node woocommerce/themes/woo_theme_gloss/tests/e2e.js # home, shop, shades, routine, block checkout orderApplying a style on a dev store from the command line: wp eval-file tests/variation.php cherry --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 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 Shade (or Colour). In the own-site edition they also need an active licence or the start period.
They link to the standard WooCommerce layered navigation (?filter_shade-group=fair, ?filter_concern=acne), which needs global attributes with those slugs. The demo content creates them.
Yes, the templates and styles are general; the home sections are written for beauty stores and are all editable.
The product brand taxonomy of WooCommerce (Products > Brands). Without brands the brand line, Shop by brand and the Brands A-Z list simply do not show.
The product is English. Strings are translatable (text domain kv-gloss, .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 fictional brands.
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.
