Prism: Multipurpose Theme for OpenCart

Overview

Prism is the multipurpose flagship theme of Kavio Labs for OpenCart 4.x and 3.0.x: one theme with five ready store styles. Pick Fashion, Electronics, Home & furniture, Beauty or Grocery in the theme settings and the whole store changes in one click: colours, fonts, corner radius, header, footer, hero, product cards and the order of the home sections. Your products, texts and images stay as they are.

What you get

• Five store styles. Fashion (ivory, ink and clay, an editorial serif, square corners), Electronics (cool white, navy and electric blue with a lime pop, rounded cards), Home & furniture (oat, umber and terracotta, a warm serif), Beauty (blush, plum and rose, a fine serif and pill buttons) and Grocery (cream, market green and tomato, a bold display face). Each has sample texts you can load as a starting point, and you can set an accent colour of your own.
• Three header layouts. Classic (logo, menu and icons in one row, search behind the search icon), Centered (logo in the middle, compact search on the left, menu below) and Market (wide search with a button, account, compare, wish list and cart with labels, and a dark category bar with an All categories button). Sticky header, announcement bar with up to three messages.
• Mega menu. Subcategories in columns with product counts, the top brands of the category, its best deal and the category image. An optional Brands panel lists your biggest brands.
• Live search. Product suggestions with image, brand and price, matching categories and a "see all results" link while the shopper types. Arrow keys and Enter work; the core search powers it, so nothing has to be indexed.
• Four hero layouts. Split (text and a large image), Slider with two side banners, Full width with a text card, and a Banner grid. Up to three slides with autoplay, progress dots, arrows and a floating price sticker.
• Rich product cards. Second image on hover, quick view, wish list, compare and one-tap add, sale / new / badge tags, colour swatches, sizes, a deal countdown and a low stock line.
• AJAX category pages. Filters (the core Filter module), sorting, page size and pagination update the product grid in place. The address keeps every state, so links, sharing and the back button work.
• Product page. Sticky gallery with hover zoom, colour swatches and option chips with live prices, a size guide link, delivery dates and two promise lines, tabs, frequently bought together and a sticky add-to-cart bar that follows the shopper down the page.
• Home builder. Promise row, category tiles (photo tiles or round tiles), product tabs, deal countdown, two or three promo banners, shop the set with one Add to cart, little extras, brands, reviews and a journal. Choose the order, switch any section off.
• Mobile first. Drawer menu with category images, a bottom tab bar (Home, Shop, Search, Saved, Cart), round add buttons on cards, a swipe gallery and no sideways scrolling down to 320 px.
• Self-hosted fonts. Plus Jakarta Sans for text and one display face per style (Gloock, Space Grotesk, DM Serif Display, Cormorant Garamond, Gabarito), all SIL Open Font License 1.1. Only the faces the style uses are downloaded; no requests to font CDNs.
• Safe to install. No core file changes and no OCMOD. A licence problem never blocks the store or the admin panel.

On a phone the menu becomes a slide-in drawer, a bottom bar gives Home, Shop, Search, Saved and Cart, cards get a round add button and the product gallery swipes.

Works with

Other extensions keep working: Prism keeps the core ids of the product form and the mini cart, and buttons or panels that other extensions add to the product page appear under Add to cart. Prism reads standard OpenCart data only (categories, manufacturers, filters, attributes, options, specials, related products, information pages) and never writes to your catalogue.

Versions

Licence

One licence covers both packages and every store style. The first 14 days are a trial. Without a valid licence the store keeps working and the theme settings page shows a reminder.

Installation

OpenCart 4.x

1. Go to Extensions > Installer and upload kv_theme_prism.ocmod.zip. Click Install (the green + button) next to it.
2. Go to Extensions > Extensions, choose the type Themes, and click Install next to Prism Multipurpose Theme by Kavio Labs.
3. Click Edit, check that Status is on, choose a Store style and save.
4. Go to System > Settings, edit your store, and on the General tab set Theme to Prism Multipurpose Theme by Kavio Labs. Save.

OpenCart 4 has no theme folders. Prism is a theme extension: it swaps in its own templates while it is the store theme and switched on. Switch the store back to Default to return to the stock look at any time. The settings page tells you whether Prism is the active theme.

Recommended image sizes (System > Settings > Image): product card 600 x 600, product page 1000 x 1000, popup 1400 x 1400, cart 140 x 140, category 600 x 600. Square product images on a plain or transparent background look best on the soft image wells.

OpenCart 3.0.x

1. Go to Extensions > Installer and upload kv_theme_prism-oc3.ocmod.zip.
2. Go to Extensions > Modifications and click Refresh (the blue button).
3. Go to Extensions > Extensions, choose Themes, click Install next to Prism Multipurpose Theme by Kavio Labs, then Edit, check Status, choose a Store style and save.
4. Go to System > Settings, edit your store, open the General tab and set Theme to Prism Multipurpose Theme by Kavio Labs. Save.

On OpenCart 3 the image sizes and the number of products per page for the theme are on the Listing & images tab of the theme settings.

Set up your store in five steps

1. Choose a style. On the Style & layout tab click the style closest to your shop. Optional: Load the sample texts of the selected style fills the hero, banners, section titles, announcements and footer with the wording of the demo store of that style as a starting point. Images, products and links are not touched.
2. Categories. Your top categories become the menu, the mega panels and the category tiles. Give each top category an image (cut-out product images on a transparent background suit the round tiles of Electronics, Beauty and Grocery; photos suit the tiles of Fashion and Home). On OpenCart 3 tick Top on the categories you want in the menu.
3. Hero and banners. On the Hero tab add one to three slides: a title (wrap words in *stars* to set them in the accent style), a text, an image path below image/, two buttons and an optional price sticker product. Slider and Banner grid heroes also take two side banners. Add your promo banners on the Home page tab.
4. Home sections. Switch on the sections you want and set their titles. Product id fields take comma lists (42, 57); empty fields use automatic sources (best sellers by orders, then views; newest products; products on special).
5. Product data. Prism reads your normal catalogue data:
   • Options: radio or select options named Colour, Color, Shade or Finish show as round swatches (the option value image, or a colour from the value name or a #hex code in it); options named Size, Storage, Capacity, Pack size or Length show as chips with the price change.
   • Special prices with an end date give countdowns on cards and in the deal band.
   • Second image: the first additional image of a product appears when the pointer is over the card.
   • Manufacturers fill the brand line on cards, the brands row and the brands in the mega panels.
   • Related products without required options fill Frequently bought together.
   • Attributes (names are settings): Badges (Best seller, Organic), a content attribute for the unit price (500 g, 30 ml, 6 pcs), two extra tabs (for example How to use and In the box), a notice and a Delivery time (Ships in 1-2 days becomes delivery dates).
   • Filters: add filter groups (Catalog > Filters), assign them to products and categories, and put the core Filter module in the left column of the Category layout (Design > Layouts). Prism shows it as a clean sidebar and, with AJAX category pages on, updates the grid as soon as a box is ticked.

Update

Upload the new package the same way (and refresh modifications on OpenCart 3). Your settings are kept in the store settings.

Uninstall

Switch the store theme back to Default, then uninstall Prism from Extensions > Extensions > Themes. The theme settings are removed; your catalogue is untouched.

Configuration

Open Extensions > Extensions > Themes > Prism > Edit. Every storefront text you can change is on one of these tabs. A section that is switched off or has an empty title is not shown. Settings are per store.

Style & layout

• Status and Store style: Fashion, Electronics, Home & furniture, Beauty, Grocery. A style sets the palette, display font, corner radius, header, footer, hero, card treatment and the default order of the home sections.
• Load the sample texts of the selected style (button under the styles): writes the wording of the demo store of that style into the text fields (hero, banners, section titles, announcements, footer, promise lines). Images, product ids, links and switches keep their values.
• Header layout: Style default, Classic, Centered or Market. Footer layout: Style default, Dark or Light. Hero layout: Style default, Split, Slider (with two side banners), Full width or Banner grid.
• Accent colour: replaces the button and link colour of the style with your brand colour (#rrggbb). The text on buttons turns white or dark by contrast. Empty = the style's own accent.
• Text logo: shown when the store has no logo image; wrap a word in *stars* to set it in the accent colour (Wren *&* Vale).
• Announcement bar, Sticky header, Mobile bottom bar and Back to top button.

Features

• Live search: suggestions while typing in the header search (products with image and price, matching categories, a link to all results). It uses the core product search.
• AJAX category pages: filters, sorting, page size and pagination update the grid without a page reload; the address keeps the state.
• Quick view, Compare buttons (with a header counter), Second image on hover, Hover zoom, Sticky add-to-cart bar and Delivery panel.

Header & footer

Three announcement messages (they rotate on phones), the number of categories in the menu, an optional Brands panel, the Sale link to the Specials page, an optional second link (for example your blog or journal), the search placeholder, the Join band above the footer (it links to the account registration, or the newsletter page for signed-in customers), the footer about text, the help card and the payment chips (plain text, no logos).

Hero

• Seconds per slide (0 = no autoplay; autoplay pauses on hover, on focus and for visitors who prefer reduced motion) and an optional Rating badge (write only real figures).
• Per slide: title, label, text, image, two buttons with links and an optional price sticker product id. An empty title and image hide the slide.
• Side banners 1 and 2 (title, label, text, link, image) for the Slider and Banner grid layouts.
• Image sizes: Split hero about 1100 x 1200 (portrait or square), Slider, Full width and Banner grid about 1600 x 1000. Cut-out images (transparent PNG) sit on the hero colour of the style; photos fill the Full width hero.

Home page

• Section order: a comma list of hero, usp, cats, tabs, deal, promos, look, picks, brands, reviews, ideas. Empty = the order of the store style.
• Promise row: four bold part|small part pairs separated by ;.
• Category tiles: title, text, category ids in order (empty = your top categories) and the number of tiles.
• Product tabs: three tabs with titles and optional product ids (best sellers, newest, on special by default).
• Deal countdown: kicker, title, product ids (empty = products on special) and the number of products; the countdown runs to the nearest special end date.
• Promo banners: up to three (label, title, text, button, link, image).
• Shop the set: kicker, title, text, two to six product ids, image and caption. Products with a required option or no stock are listed but cannot be ticked.
• Little extras: products under a maximum price, or the ids you set.
• Brands, Reviews (average and up to three quotes; write only real quotes) and Journal (three cards with images and links).

Link fields take a category id (20 or 20_27), an information page as i:<id>, or a URL.

Product data

• Colour option names and Chip option names (comma lists).
• Size guide link: an information page (i:<id>) or URL shown next to options named Size.
• Attribute names for Badges, the content (unit price), the two extra tabs, the notice and the delivery time; Range and Colour attributes for colour siblings sold as separate products.
• New tag: days, Low stock line, In-stock line, the two promise lines of the delivery panel, the wish list note, and Frequently bought together with its title.

Licence

Paste the licence key from your Kavio Labs account. Check now asks the licence server again. The theme keeps working without a key; the settings page only shows a reminder.

FAQ

Can I switch the store style later?

Yes, any time. The style only changes the look (colours, fonts, header, footer, hero, cards and the default section order). Your products, categories, texts and images stay as they are. Use Load the sample texts only if you want the wording of the demo store of that style.

Can I mix a style with another header or hero?

Yes. Header, footer and hero layouts default to the style but can be set on their own, for example the Fashion style with the Market header. The Section order field changes the order of the home sections.

Does Prism import the demo stores?

No. The five demo stores in the screenshots (Wren & Vale, Northwire, Oakhaven Home, Solace Skin, Greenbasket Market) are fictional and use our own generated illustrations of invented brands; they are not part of the package. The styles, layouts and sample texts are.

Where do the menu and the category tiles come from?

From your top categories (OpenCart 3: categories with Top ticked). Subcategories open in the mega panel with their product counts; the category image appears in the mega panel, the drawer and the tiles.

How does the live search find products?

It calls the core OpenCart product search (names and tags) and a category name match, then shows up to six products and four categories. Nothing is indexed or stored. It can be switched off on the Features tab.

The filter sidebar is empty or missing. Add filter groups (Catalog > Filters), assign them to products (Links > Filters) and to the category, and place the core Filter module in the left column of the Category layout (Design > Layouts).

Do AJAX category pages break my analytics or links?

No. Every change updates the address (filter, sort, limit, page), so the page can be shared and reloaded, and the back button returns to the previous state. Without JavaScript the core links work as usual.

Why does a card show no second image on hover?

It uses the first additional image of the product. Products without one keep the first image. Touch screens never show the hover image.

Why is Shop the set showing "Choose options"?

A product with a required option (a size, for example) cannot be added without a choice. Pick products without required options for the set, or link the shopper to the product page.

Can I use my own brand colour?

Yes: set the Accent colour on the Style & layout tab. Buttons and links follow it in every style.

Does Prism work with other extensions?

Yes. It keeps the core product form and mini cart ids, and buttons or panels that other extensions add to the product page appear under Add to cart.

Is Prism fast?

One stylesheet and one script loaded at the end of the page, no extra libraries, lazy images below the fold and self-hosted fonts: only the two faces of the active style are downloaded.