Volt: Electronics Superstore Theme for OpenCart

Overview

Volt is an electronics and gadgets theme for OpenCart 4.x and 3.0.x by Kavio Labs. It is built for stores that sell phones, laptops, TVs, audio, gaming, cameras, smart home and accessories, where shoppers compare specs, hunt for deals and want a clear price.

What you get

• Category icon bar. Categories marked "Show in top menu" become an icon bar (phone, laptop, TV, audio, gaming, camera, smart home, wearables, accessories; a box for anything else). Their subcategories open in a mega panel with a brand column and the best deal of the category.
• Deal stage. A dark band with one big deal (image, price, saving pill, monthly price, countdown, four key specs) and two countdown deal tiles beside it. The countdown runs on the end date of the special price.
• Spec meter cards. Product cards show three segmented bars built from numeric attributes you name (for example Battery, Weight, Screen). Bars are relative to the rest of your catalogue; for weight and similar a lower value fills more.
• Compare tray. A tick on every card collects two to four products in a tray at the bottom of the page. "Compare now" opens the core compare page. The selection stays in the visitor's browser.
• Monthly price line. "or $41.67/mo for 24 months" under prices above a minimum you set. It is a display line only; checkout charges the full price.
• Home sections. Trust row, deals of the day, brand stores row, tabbed best sellers / new arrivals / on sale, shop by category index, head to head bars for two products, a trade-in band, Complete your setup checklist with one Add to cart, reviews and quotes, lab notes with score rings, newsletter band. Each is switched on or off and written on the theme settings page.
• Product page. Gallery with hover zoom, key specs, spec meters, colour swatches, chips for storage and protection plans, a green in-stock line, delivery panel with delivery dates, warranty and returns lines and Frequently bought together from the product's related products.
• Four presets. Daylight (default, warm white with burnt-orange buttons), Signal (retail-chain yellow, square corners, red sale badges), Ember (warm dark) and Carbon (cool dark with cyan lines). They change corners, card borders, button shape and the whole page tone.
• Self-hosted fonts. Sora and Inter (SIL Open Font License 1.1). Volt makes 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 icon bar becomes a slide-in drawer, the deal stage shows the product first and the home page stacks into one column.

Works with

Other extensions keep working: Volt keeps the core ids of the product form and the mini cart. Extensions that add buttons to the product page appear under Add to cart.

Versions

Licence

One licence covers both packages. 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_volt.ocmod.zip. Click Install (the green + button) next to it.
2. Go to Extensions > Extensions, choose the type Themes, and click Install next to Volt Electronics Superstore Theme by Kavio Labs.
3. Click Edit, check that Status is on, choose a preset and save.
4. Go to System > Settings, edit your store, and on the General tab set Theme to Volt Electronics Superstore Theme by Kavio Labs. Save.

OpenCart 4 has no theme folders. Volt is a theme extension: it swaps in its own templates while it is the store's 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 Volt is the active theme.

OpenCart 3.0.x

1. Go to Extensions > Installer and upload kv_theme_volt-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 Volt Electronics Superstore Theme by Kavio Labs, then Edit, check Status and save.
4. Go to System > Settings, edit your store, open the Option tab and set Template to Volt Electronics Superstore 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 data

Volt reads your normal catalogue data. Before you start:

1. Attributes. Create numeric attributes such as Battery (29 h), Weight (187 g), Screen (6.3") and Storage (256 GB). On the Product data tab list the ones that should draw meters and key specs.
2. Brands. Add manufacturers and assign them to products. They fill the brand column of the mega panel, the brand stores row and the brand chips on category pages.
3. Special prices. Give products a special price with an end date to get the countdown on cards and in the deal stage.
4. Options. Name your colour option "Colour" for swatches. Options named Storage, Memory or Protection plan show as chips.
5. Related products. Add two accessories as related products to get Frequently bought together.

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 Volt from Extensions > Extensions > Themes.

Configuration

Open Extensions > Extensions > Themes > Volt > 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.

General

• Status and Preset (Daylight, Signal, Ember, Carbon). Text logo is shown beside or instead of the logo image.
• Light image wells put product images on a light plate on every preset. Hover zoom and Delivery panel switch product page features.
• Spec meters switch the bars on cards and product pages. Compare tray switches the tick and the tray.
• Monthly price: months and minimum price. 0 months switches the line off.

Header & footer

Three top band messages, the number of categories in the icon bar, the label of the Deals link (to the Specials page), an optional second link, the search placeholder, the newsletter band, the footer text and help card, and the payment chips (plain text, no logos).

Home page

The deal stage (label, title, text, button, product id, key spec attributes, second button), the two deal tiles (product ids), trust row, shop by category, deals of the day, brand stores, tabs, head to head (two product ids), trade-in band, Complete your setup, reviews and lab notes.

• Product id fields take comma lists of product ids, for example 42, 57. Empty fields use an automatic source: the best discounted product for the stage, products on special for deals and tiles, orders then views for best sellers.
• Link fields take a category id (20 or 20_27), an information page as i:<id> or a URL.
• The trade-in band only links to a page you choose. It does not value devices.
• Lab notes show a score ring when you enter a score from 0 to 10. Write only scores you measured. Reviews need real quotes.

Product data

• Meter attributes (comma list, for example Battery, Weight, Screen) and Key spec attributes (for example Battery, Weight, Screen, Storage). Cards show up to three meters, product pages up to four.
• Colour option names and Chip option names: options with these names get swatches or chips.
• Series and Colour attributes: sell each colour as its own product and give them the same Series value to show colour swatches on cards.
• Delivery time attribute, Label attribute, New tag days, Low stock tag, the in-stock line, warranty and returns lines, and Frequently bought together.

Listing & images (OpenCart 3 only)

Products per page and the image sizes. On OpenCart 4 these are in System > Settings > Image. Volt shows products on square plates: 520 x 520 on cards and 800 x 800 on the product page work well.

Licence

Paste the licence key from your Kavio Labs account. Without a key the theme keeps working and the page shows a notice.

FAQ

Does Volt change core files or use OCMOD?

No. On OpenCart 4 it is a theme extension that uses events; on OpenCart 3 it is a normal theme directory plus events.

Why do my cards show no meters?

Meters need numeric attributes named in Product data > Meter attributes, with a number in the value ("29 h", "6.3 in"). Products without those attributes show no meter rows.

What does a meter bar mean?

Five segments, relative to the lowest and highest value of that attribute across your enabled products. For weight, noise and latency a lower value fills more.

Why does a card show no countdown?

The countdown needs a special price with an end date less than 60 days away.

Is the monthly price a payment plan?

No. It is the price divided by the number of months, shown as information. Checkout charges the full price. Use it only if you offer such a plan.

How does the compare tray work?

The tick adds a product to a list kept in the visitor's browser. "Compare now" adds those products to the core compare page and opens it.

Can I use it with a multi-store setup?

Yes. Settings are stored per store.

What if the licence is missing or expired?

The storefront and the admin panel keep working. The theme settings page shows a reminder.

Does it make external requests?

Only the licence check from the admin settings page. Fonts are served from your store.

How do I go back to the stock look?

Set the store theme to Default.