Vertex: Flagship Multipurpose Theme for OpenCart

Overview

Vertex is the flagship theme of Kavio Labs for OpenCart 4.x and 3.0.x, the OpenCart edition of the Vertex theme for CS-Cart. It is the theme you configure: one calm, precise design that you turn into your store from one settings page. Three headers, three home layouts, three product pages, grid, list and compact listings, and a merchandising set you manage yourself: tiles inside the product grid, a deal of the day, promotions with days left, products attached to stories and quantity prices on every card.

It fits stores where a loud campaign look is too much and a department-store look too busy: electronics, B2B and wholesale, pharmacy and beauty, home improvement, auto and general stores with large catalogues. The demo is a technology store, Circuit Hall.

What you get

• Layouts in the settings. No layout or module editing:
  • Header: Catalog (a Catalog button with a vertical icon mega panel and an icon menu row), Icon menu (departments as big round icons) or Compact (one row).
  • Home page: Store (stage, departments, offers, tabbed shelves, deal of the day, brands, journal), Showcase (a big stage, departments, editors' picks, brands, journal) or Deals (a compact stage, the deal of the day first, offers, shelves, journal).
  • Product page: Studio (a sticky buy panel next to the gallery), Cascade (stacked images, sticky details) or Compact (B2B: the quantity price table first).
  • Listing: grid, list or compact rows, with a switcher for visitors.
  • Auto: every colour scheme recommends a header and a home layout, so a scheme change shows a different store at once.
• Catalog panel. A vertical rail of departments with icons; the subcategory grid and a top product tile open beside it. On tablets and phones the same menu is a drawer with accordions.
• Stage with a promotion strip. A wide banner stage whose navigation is the list of running promotions, each with a days-left bar. A slide shows the packshot and price of a product on your tile colour, or your own photo. Autoplay pauses on hover, focus and touch.
• Department mosaic: your departments in an asymmetric mosaic, the first one big on the tile colour.
• Offers running now: a rail of offer cards in three styles, each with a days-left bar.
• Tabbed shelves and editors' picks with tiles inside the product grid.
• Tiles in product grids: banner, countdown promo, video and article tiles, 1 x 1, 2 wide or 2 x 2, at the place you choose in the grid of the category pages you choose (a parent covers its subcategories) or in the home shelves. Video and article tiles open in a dialog.
• Deal of the day: a dark panel with the product, a live countdown to the end of its special, the stock left, quantity prices, a quantity stepper and Add to cart, next to a short list of more deals.
• Brand strip of wordmarks and a journal with a lead story and a list; a story can carry up to four products ("Shop this story").
• Product cards with a packshot well, discount and New flags, a deal timer, an action rail (wish list, compare, quick view), brand, rating, price, a "from $X at 10+" quantity price line and a stock line. On wide screens a hover panel opens over the row below (swatches, key specs, Add to cart) without moving the grid.
• Category pages: subcategory tiles with images, filters and sorting without page reloads, active filter chips, Show more with a counter and a progress bar, and the grid / list / compact switcher.
• Product page: gallery with hover zoom and an optional video tile, swatches (colour options or colour siblings), a deal strip with the countdown, the quantity price table, delivery dates, perks and a sticky add-to-cart bar.
• Sixteen colour schemes (two of them dark) plus six colours of your own: buttons, links, the dark band, the tile colour, the discount colour and sale prices. Text on coloured surfaces turns white or dark by contrast.
• One-click demo store: Circuit Hall (eight departments, 41 studio packshot products of six invented brands, specials with end dates, quantity prices, slides, offers, tiles and stories).
• Structured data (JSON-LD): product, offer, rating and breadcrumbs; the store and its search box on the home page.
• Safe and fast. Events only: no core file changes, no OCMOD. One self-hosted font (Mona Sans, SIL Open Font License 1.1), one stylesheet and one script, no CDNs.

Requirements

• OpenCart 4.0.2.0 to 4.1.x, or OpenCart 3.0.3.x to 3.0.5.x
• PHP 7.4 or later (the PHP of your OpenCart version)

Pages

Installation

OpenCart 4.x

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

OpenCart 4 has no theme folders. Vertex 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.

Recommended image sizes (System > Settings > Image): product card 600 x 600, product page 1000 x 1000, popup 1400 x 1400, additional 160 x 160, cart 140 x 140, category 600 x 600. Square packshots on a white or transparent background look best: Vertex shows them on a light well.

OpenCart 3.0.x

1. Go to Extensions > Installer and upload kv_theme_vertex-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 Vertex Theme by Kavio Labs, then Edit, check Status, pick a colour scheme and save.
4. Go to System > Settings, edit your store, open the General tab and set Theme to Vertex 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.

The demo store

On a fresh store (no products, or only the OpenCart sample products and no orders) the install adds the Circuit Hall demo: eight departments, 41 studio packshot products, specials with end dates, quantity prices, slides, offers, tiles and journal stories (blog articles on OpenCart 4.1, information pages before), so every section is filled at once. A store with its own catalogue stays exactly as it is.

The Design & layouts tab has the buttons:

• Install the demo adds it on any store, next to your own products.
• Remove the demo deletes exactly what the demo added and restores the settings it changed. Your own products stay.

The demo specials run for a few days after the import, so their timers end. To see them again, remove and add the demo, or give the products new end dates.

Set up your store in six steps

1. Look and layouts. On Design & layouts pick a colour scheme and leave header and home on Auto, or choose them yourself. Pick the product page and the default listing view.
2. Departments. Categories with Show in top menu (OpenCart 3: Top) form the Catalog panel and the icon menu. Give them an image (it becomes the icon). On Header & menu you can set a short name, your own icon and the product shown on the Catalog panel tile.
3. Promotions. Add special prices with an end date (Catalog > Products > Special). Slides and offers with a "Promotion end" (a date, p:<product id> or auto) show a days-left bar and hide themselves after the end; cards, the deal of the day and the product page show countdowns.
4. Quantity prices. Add quantity discounts (Catalog > Products > Discount): cards show "from $X at 10+", the deal of the day and the product page show the table.
5. Home and tiles. On Home page add slides and offers, choose the deal product (or leave it automatic) and the products of the shelves and editors' picks. On Category pages & tiles add tiles: where they show, the place in the grid, the size and the type.
6. Product data. Vertex reads your normal catalogue data:
   • Options named Colour or Color show as swatches; options under Chip option names as chips with the price change.
   • Colour siblings: sell each colour as its own product and give them the same Range attribute value: they show as linked swatches with their packshots.
   • Key specs: the attributes listed under Key spec attributes (default: Display, Battery, Connectivity) fill the hover panel and the list view.
   • Delivery time attribute (Ships in 1-2 days) becomes dates on the product page; a Video attribute adds a video tile to the gallery.
   • Manufacturers fill the brand line, the brand strip and the brand pages.
   • 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).

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 Vertex from Extensions > Extensions > Themes. The theme settings and the demo store are removed; your own catalogue is untouched.

Configuration

All settings are on Extensions > Extensions > Themes > Vertex Theme by Kavio Labs > Edit, per store.

Design & layouts

Home layouts:

Every section can also be switched off or limited to wide screens or phones.

Header & menu

Top note (three short messages, the third highlighted and optionally linked), service links, phone number, sticky header, search placeholder, the category select in the search, live search, the Catalog button text, the number of departments in the icon row (the rest go into More), the Deals link and one row per department: short name, icon image and the top product of the Catalog panel tile.

Home page

• Stage: seconds per slide (0 = no autoplay) and the slides: strip label, label, title (| = line break), text, product (packshot and price on the tile colour) or image, two buttons, and the promotion end (a date, p:<id> = the end of that product's special, auto = the soonest special). The strip under the stage lists the slides; promotions show a days-left bar and disappear after their end.
• Department mosaic: title and category ids (5 to 7 work best).
• Offers running now: label, title, text, product or image, link, promotion end and style (light, tile colour, dark).
• Tabbed shelves: three tabs (new, bestsellers, on sale) with optional product ids and the number of products.
• Editors' picks: product ids (empty = the most viewed).
• Deal of the day: label, product (empty = the special with an end date that ends first) and the products of More deals.
• Brand strip and Journal: latest blog articles (OpenCart 4.1) or your own stories with up to four products each.

Category pages & tiles

Tiles: where (category grids, home shelves, editors' picks), category ids (empty = every category; a parent covers its subcategories), position in the grid, size (1 x 1, 2 wide, 2 x 2), type (banner, countdown promo, video, article), label, title, text, product or image, button, link, countdown, video URL (YouTube, Vimeo or .mp4) and information page id (article tiles). A tile with a date ends by itself.

Also: subcategory tiles, pagination (Show more, load while scrolling, page numbers), AJAX filters, filter chips, brand line, quantity prices, key spec attributes, deal countdowns, quick view, compare, discount and New flags, low stock quantity.

Product pages

Hover zoom, sticky add-to-cart bar, structured data, perks (icon, title, text), related products title, video attribute, colour and chip option names, range and colour attributes (colour siblings), delivery time attribute.

Footer & mobile

Promise line (four items), newsletter block, about text, payment chips, social links, phone bottom bar and back to top.

Licence

The licence key from your Kavio Labs account. The theme never blocks your store or the admin panel; without a valid licence the settings page shows a reminder. The opencart.com edition has no licence tab.

FAQ

Who is Vertex for?

Stores that want one theme they can shape: electronics, B2B and wholesale, pharmacy and beauty, home improvement, auto and general stores with large catalogues. The demo is a technology store, but the design is sector neutral.

Is it the same Vertex as on CS-Cart?

Yes. Vertex for OpenCart has the same design, 16 colour schemes, layouts and Circuit Hall demo as the Vertex theme for CS-Cart and Multi-Vendor, built natively for OpenCart (Twig templates, OpenCart events, Bootstrap 5 on OpenCart 4 and Bootstrap 3 on OpenCart 3).

How is Vertex different from Atlas and Pulse?

Atlas is a department store with colour-coded departments and an open department rail. Pulse is a loud campaign store with stickers, a flash bar and story circles. Vertex is calm and precise (white page, ink type, colour only in the tiles) and gives you the control: three headers, three home layouts, three product pages, list and compact (B2B) views, tiles per category and quantity prices.

What does "Auto" mean for the header and home?

Every colour scheme recommends a header and a home layout, for example Saffron = Catalog + Deals, Fern = Icon menu + Showcase, Indigo = Compact + Store. With Auto a scheme change shows a different store at once; choose a layout to keep it fixed.

How do the days-left bars and countdowns work?

They read real end dates: a date you enter, the end of a product's special price (p:<id>) or the special that ends first (auto). Slides, offers and tiles with an ended date disappear by themselves. A special without an end date never shows a timer.

Where do the quantity prices come from?

From OpenCart's own quantity discounts (Discount tab of a product). Cards show the best one ("from $29.00 at 25+"), the deal of the day and the product page show the table. Turn Quantity prices off to hide them.

How do tiles in the grid work?

You add them on Category pages & tiles. Each tile takes a place in the grid of the categories you choose (or of the home shelves), 1 x 1, 2 wide or 2 x 2. Countdown tiles need an end; video and article tiles open in a dialog. In the compact view tiles are hidden, so B2B buyers see rows only.

What is the compact view?

One row per product with the image, name, stock, price, quantity price and Add to cart: fast ordering for business buyers and big catalogues. Visitors switch between grid, list and compact; the choice is remembered.

Does Vertex import a demo store?

On a fresh store, yes: the Circuit Hall demo arrives with the theme. A store with its own catalogue stays as it is and gets a button on the Design & layouts tab. The demo is fictional: six invented brands and our own studio packshots.

Can I remove the demo?

Yes, with one click. It deletes exactly what the demo added. Your own products stay. Uninstalling Vertex removes the demo too.

Will my own colours stay readable?

Yes. Vertex picks white or dark text for every coloured surface by contrast and darkens link colours until they reach a contrast of 4.5:1 on their ground.

Does Show more work with search engines?

Yes. The page numbers stay under the button as normal links; the button only adds the next page to the grid.

Does it slow my store down?

Vertex adds one stylesheet, one script and one self-hosted variable font. Images below the first screen load lazily.

Does Vertex change core files?

No. It uses OpenCart events only (no core changes, no OCMOD). Uninstalling it leaves your store and catalogue as they were.