Prism: Multipurpose Theme for WooCommerce

Overview

Prism is Kavio Labs' multipurpose block theme for WooCommerce: one theme with five complete, ready-made stores. Import a demo store with one click and Prism switches the colours, fonts, header, footer and home page with it, together with a full catalogue, pages and posts. Switch to another store at any time, or keep the look and add your own products.

The five stores

What you get

• Five complete demo stores with one-click import and one-click removal (Appearance > Prism). Each store brings its own products (simple and variable, with colour, shade and size options), categories, brands, reviews, deals with an end date, four pages (About us, Shipping and returns, Help and FAQ, Contact) and journal posts.
• Three headers: classic (logo, mega menu and icons in one row), centred (search, logo and tagline in the middle, menu row below) and market (wide search with live suggestions, labelled icons, a category bar with an All categories menu). All three have the announcement bar, a sticky header that slides in while scrolling and a full-screen menu on phones.
• Two footers: dark and light, with a promises row, the store note, contact lines, three link columns and the legal line.
• Mega menu with headings and a featured promo card in every panel.
• Product cards: image well with the second photo on hover, badges (sale %, New, Bestseller, Only a few left, Sold out), round wishlist, compare and quick-view buttons, a quick bar with Add to cart (Store API, no reload, toast with a View cart link) or Select options, colour dots and the average rating under the price.
• Quick view dialog, wishlist drawer and compare table (up to four products): saved in the shopper's browser, no account needed, nothing stored on your server.
• Live search: product suggestions with image and price while typing, keyboard friendly, plus a full-screen search on phones.
• Shop and category pages: sub-category chips, WooCommerce Product Filters (category, price, your colour, size and other attributes, rating, availability) that update the grid without a page reload, sorting and a 2 / 3 / 4 column switch.
• Product page: gallery, colour swatches (from the term colour or the colour name) and size chips with sold-out options struck through, a sale countdown, wishlist and compare buttons, a size guide dialog for clothing and shoe sizes, shipping link, four perks, tabs, related products, recently viewed products and a sticky add-to-cart bar.
• Cart and checkout: the WooCommerce Cart and Checkout blocks styled, a free-shipping progress bar on the cart, a minimal secure checkout header; the classic shortcode pages are styled too.
• Mobile tab bar (Home, Shop, Search, Wishlist, Account), back-to-top button, deal countdowns, hero slider with autoplay that pauses on hover and respects reduced motion.
• Eighteen section patterns for your own pages (Prism sections in the block inserter).
• WCAG AA colours in every store, visible focus, 44 px touch targets, RTL ready, self-hosted fonts, no external requests.

Requirements

WordPress 6.7 or newer, WooCommerce 10.1 or newer (tested with WooCommerce 11.2.1 and WordPress 7.1.3), PHP 7.4 to 8.3. Prism never reads or writes orders, so it works with High-Performance Order Storage (HPOS) and the legacy order storage.

Installation

1. Download kv-prism-kv.zip from My licenses > Downloads on kaviolabs.com.
2. In WordPress go to Appearance > Themes > Add New Theme > Upload Theme, choose the zip and click Install Now, then Activate.
3. Make sure WooCommerce 10.1 or newer is active (Plugins > Installed Plugins).
4. Go to Appearance > Prism, paste your licence key into the Licence card and click Save and check.
5. Still on Appearance > Prism, pick a store under Demo stores and click Import this store (optional, about one minute). The store's colours, fonts, header, footer and home page switch with it.

Without demo content

Prism works without the demo: the Fashion look is the default, the home page shows the Fashion layout and the product sections fill with your own products and categories. Choose another look and layout in Appearance > Prism > Layout and features, then edit the texts and images of the home page in Appearance > Editor.

Updating

New versions are listed in My licenses > Downloads while your updates period is active. Upload the new zip the same way (WordPress asks to replace the current version). Your settings, demo content and Site Editor changes stay.

Removing

Appearance > Prism > Remove the demo content deletes exactly the items the importer created (products, variations, images, categories, brands, reviews, pages, posts and the product attributes it added). Your own products, pages and orders are never touched. Switching to another theme leaves all content in place.

Configuration

All theme settings are on Appearance > Prism. Everything else (logo text, menus, texts, images, sections, colours, fonts) is edited in Appearance > Editor.

Licence

Enter the licence key from your kaviolabs.com account and click Save and check. A new installation has a start period of 14 days. Without a valid licence the theme extras (quick view, add to cart from cards, wishlist, compare, live search, sticky add-to-cart bar, recently viewed, mobile tab bar) and the demo importer are switched off; templates, styles and your store keep working. The check runs once a day from the admin area and sends only the site address and the key.

Demo stores

Layout and features

Data the features need

• Colour swatches use the colour of the attribute term (term meta color, the same field WooCommerce's colour and image attributes use) or, failing that, the colour name (Black, Navy, Sage, Camel, Rose, Honey and about 60 more). Attributes named Colour, Color, Shade or Finish become dots, attributes with "size" in the name and Length, Capacity, Storage, Volume or Pack become chips, other short option lists become chips too.
• Countdowns need a sale end date (product > Sale price > Schedule).
• Badges: New = created in the last 21 days, Bestseller = 120 or more sales, Only a few left = 5 or fewer in stock.
• Brand strip and brand line on cards use WooCommerce Brands (Products > Brands).
• Size guide appears for clothing sizes (XS to XXL, waist 24 to 34) and shoe sizes (EU 35 to 47).

Usage

Shopping features

• Filters on shop and category pages are the WooCommerce Product Filters block. Prism adds a filter for each of your product attributes automatically (colour and size first, at most four) next to category, price, rating and availability. Choosing a filter updates the products without reloading the page; on phones the filters open in an overlay.
• Quick view shows the photo, brand, name, rating, price, short description, options and stock, with Add to cart for simple products.

• Wishlist and compare live in the shopper's browser: no login, no data on your server. The compare table shows price, rating, availability, summary and every attribute side by side.

• Product page: swatches drive the variation form (the original selects stay for accessibility and for plugins), sold-out combinations are struck through, the countdown shows when a sale has an end date and the sticky bar appears once the add-to-cart button scrolled away.

Editing the home page

The home page is the Home pattern of the active store. Open Appearance > Editor > Templates > Pages: Front Page and edit it like any page: change texts and buttons, swap images, reorder, delete or add sections. Saved changes replace the automatic layout. To start again, use Reset in the template's options.

Product sections (tabs, new arrivals, top rated, on sale) are WooCommerce Product Collection blocks: choose another collection, category or number of products in the block settings. Category tiles, circles and rooms, brands and deals fill themselves from your store.

Section patterns

In the block inserter, open Patterns > Prism sections: hero (split, slider, banner grid, full width), promises row, categories (tiles, circles), product tabs, new arrivals, deals with countdown, promo banners (two, three), brands, reviews, latest posts, steps, lookbook band and call to action. Prism home pages holds the five complete home pages.

Menus

Each store has its main menu with mega panels in the header patterns. Edit it in Appearance > Editor > Patterns > Template parts > Header: select the Navigation block. A submenu becomes a mega panel when it has the class kv-mega; items with the class kv-mega__head are column headings, and kv-mega-card-fashion-1 (store and number) adds the featured card.

Phones

Below 1024 px (1180 px for the classic header) the menu opens full screen from the menu button. Below 782 px the mobile tab bar gives one-tap access to Home, Shop, Search, Wishlist and Account.

Developer notes

Structure

Dynamic sections

Empty Group blocks with a marker class are filled on render: kv-dyn-cats (--tiles, --circles, --rooms, kv-dyn-limit-N), kv-dyn-allcats, kv-dyn-brands, kv-dyn-deal, kv-dyn-subcats, kv-dyn-pactions, kv-dyn-help, kv-dyn-freeship, kv-dyn-recent. A Group with the class kv-filter-attrs inside the Product Filters block is replaced by one Attribute Filter per store attribute (parsed-block level, so the filters keep the block context and the Interactivity router).

CLI

wp kv-prism demo import <fashion|electronics|home|beauty|grocery>
wp kv-prism demo remove
wp kv-prism demo status
wp kv-prism demo style <store>

Options and data

• kv_prism_settings (one autoloaded array): licence key, demo store, header, footer, home, announcement, free-shipping amount and the feature switches.
• kv_prism_demo_attributes, kv_prism_demo_free: bookkeeping of the importer (removed with the demo).
• Transients kv_prism_free_shipping (1 hour) and kv_prism_deals (10 minutes, cleared on product changes).
• Demo items carry the meta _kv_demo = kv-prism and _kv_demo_key.
• Browser storage (shopper side only): kvPrismWish, kvPrismCompare, kvPrismRecent, kvPrismCols.

Hooks and APIs used

WooCommerce Store API (/wc/store/v1/products, cart, cart/add-item) with the Nonce header; woocommerce_dropdown_variation_attribute_options_html, render_block_woocommerce/product-image, render_block_woocommerce/product-price, render_block_core/group, render_block_core/navigation-submenu, render_block_data. Front-end events: wc-blocks_added_to_cart, wc_fragment_refresh.

Child themes

Create a block child theme with Template: kv-prism. Template and pattern files in the child override the parent; theme.json merges.

FAQ

Can I use two demo stores at the same time?

No. One store's content is installed at a time; importing another store removes the previous demo items first. You can still mix: for example the Electronics colours with the Home page layout and the classic header (Appearance > Prism > Layout and features).

Will the importer touch my products or orders?

No. It creates new items tagged as demo content and removes only those. Orders are never read or written by the theme.

A menu link of the demo points to a category of my own. If your store already had a category with the same address (for example accessories), the demo category gets a -kv-prism suffix and the menu still points at yours. Edit the link in the Header template part.

Where are wishlists stored?

In the shopper's browser (localStorage). They survive visits on the same device; nothing is stored on your server and no cookie is set. Clearing the browser data clears them.

Do the filters need a plugin?

No. They are WooCommerce's own Product Filters blocks; Prism styles them and adds your attributes automatically.

The free-shipping bar does not show. Set an amount in Appearance > Prism > Free shipping from, or give your Free shipping method a minimum order amount.

Does Prism work with the classic cart and checkout?

Yes. The blocks are the default; the classic shortcode pages are styled as well.

Which plugins work with Prism?

Any standard WooCommerce plugin. Kavio Labs plugins (Product Personalizer, Make an Offer, Sell by Measure, EU Consumer Law Kit, Vehicle Fitment) are tested with it.

Are the demo images mine to use?

They are original illustrations made for the theme and licensed with it under the GPL; replace them with your own product photos for a real store.

What happens when my licence expires?

The theme keeps working. Updates stop; after a missing or revoked licence the extras listed under Configuration switch off, the store itself keeps running.