An electronics shop on Odoo: what buyers look at, from card to cart

Someone buying a T-shirt can decide from the photo and the price. Someone buying a graphics card does not: they look at memory, power draw, whether it fits the case, the old price, how many instalments are on offer and when it ships. And they do it across four or five products at once.

Marketplaces have been training this shopper for years. Someone used to badges, old prices, instalments and stock on the card arrives at a plain, airy shop page and has to click to find any of it. After a click or two they close the tab and go back to the marketplace. The design problem of an electronics shop is not beauty, it is density: keeping that much information readable.

This article walks through what an electronics shop should show at each step from card to cart. The examples come from Voltaj, the Odoo theme we wrote for this job, but the points hold whatever platform you use.

What an electronics buyer looks at

The order shifts a little by product group, but the questions are much the same. The shop should answer them before they are asked, where the eye already is:

1. Will it do the job? Specs: cores, memory, socket, size.
2. Is the price fair? Old price, discount, the price elsewhere.
3. Can I pay for it? Number of instalments and the monthly amount.
4. When will I have it? Stock, dispatch day, collection from a store.
5. Is there something better? Comparison and similar products.
6. Can I trust it? Reviews, warranty, returns.

The first four can be answered on the product card and the rest on the product page. The trouble is that a card trying to show everything at once quickly stops being readable.

The product card as a datasheet

The card’s job is to help the shopper rule a product in or out of a list. For that it needs the information people compare on, not all of it. In Voltaj a card carries at most three key specs: cores and clock for a processor, size and fan mounts for a case. Anything more belongs to the product page.

The real way to keep density readable is colour discipline. If everything on a card is coloured, nothing stands out. In Voltaj colour is used only when it means something, and each colour has one job:

Hairlines instead of shadows, no gradients on surfaces, every badge the same height. Prices are set in tabular figures so that on cards stacked above one another the prices line up and the eye compares them at a glance.

Do not place badges by hand

When discount, new and “Last 3” badges are placed by hand, the campaign ends but the badge stays; stock runs out but “Last 3” remains. A wrong badge is worse than none. In Voltaj these badges appear by themselves from thresholds you set: when the discount passes a percentage, while a product is younger than so many days, when stock drops below a count.

The card also has colour swatches that switch the photo, quick add, quick view, compare and favourites. There are ten card styles, from sparse to full, to match how dense the catalogue is.

Search that answers while you type

In an electronics shop the search box is the most used menu. Shoppers usually know what they want: “ryzen 7”, “1tb nvme”, “27 inch monitor”. Search should answer as they type, not on a results page.

• Matching aisles and products in the drop-down, with photo, price and saving.
• Recent searches as soon as the box is clicked, before typing.
• Keyboard navigation, and voice search where the browser allows it.

The most valuable part is the one nobody sees: the search log. Voltaj records every search, the ones that found nothing too. A search with no results is either demand you do not stock or a customer using a different word from yours. The customer types “GPU”, the catalogue says “graphics card”; add a synonym and that search becomes a sale.

Category menus and filters

A shop selling computer parts has a deep category tree: Motherboards, then AM5, LGA1851, LGA1700, then brands under each. The menu should show that depth at a glance. Voltaj has seven category menu styles: products under each sub-category, three levels, columns of links, pictures, categories with offers, a list on frosted glass. Pictures, product counts and flags such as “New” come from the catalogue, so the menu is never maintained by hand.

Filters are built from the products’ attributes: socket, memory type, brand with counts, rating, in stock only. Active filters sit at the top as chips and come off in one click. At the end of the list you choose a Load more button, endless scrolling or page numbers.

A product page that answers before it is asked

A shopper on the product page already likes the product; now they want their remaining doubts cleared. Every unanswered question is either a support message or a lost sale. Around the buy box, Voltaj’s product page has:

• Price tiers by quantity: one price for five, another for fifty.
• The price in other currencies, for shoppers who think in another one.
• A delivery estimate in working days rather than a date: “within 2 working days”.
• Store stock: how many in which branch, where it can be collected today.
• An instalment table per bank.
• Info lines that open into pages you design: warranty, returns, installation service.

If you want a bank-by-bank instalment table there is a separate module of ours for that, and a shop that sells across currencies may want our note on multi-currency POS too.

Keep the button in reach

The spec table and the reviews are long. While the shopper scrolls and reads, Add to cart stays at the top of the page. In Voltaj, once the product’s own button scrolls out of view a sticky buy bar appears, so the price and Add to cart are always at hand. The bar comes in ten styles, from one painted in the shop’s colour to a lone button.

The page itself has ten detail looks, with tabs, an accordion, one section under the other or the datasheet first, and the photos have five layouts.

Cart and checkout

In the cart the aim is to get the shopper to pay and grow the basket on the way, without putting anything in their path. Three things that work:

1. A free-shipping line. A bar that says how far free shipping is reminds people of the offer in the least annoying way.
2. Suggested accessories. A cooler with a processor, a power cable with a graphics card: suggestions tied to the product, not random ones.
3. Bundle discounts, shown plainly in the cart.

Checkout is a single page. The cart and the sign-in window can each open four ways: on their own page, in the middle, from the side or under the button. Favourites are cards in named lists you can share, so the “New PC parts” list can go to a partner or a purchasing department. That happens a lot with electronics, where the person choosing is not always the person paying.

Phone first

Most shoppers find the product on a phone, and some buy it on a desktop. The phone should not get a shrunken desktop. On a phone Voltaj has a fixed bottom bar: Home, Categories, Search, Favourites, Cart, Account. Categories open in a drawer with pictures and filters in their own panel.

The shop can also be installed on the phone as an app, sitting on the home screen with its own name, colour, icon and shortcuts. Before commissioning a separate mobile app it is worth checking whether that is enough.

If you also sell to the trade

Most electronics distributors sell to end users and resellers alike, and would rather not run two sites. In Voltaj customer groups are defined with their own discounts and pricelists; prices can be shown to signed-in customers only and minimum quantities can be set. A reseller pastes their list of product codes and orders in one go, downloads a price list and repeats an old order in one click.

Speed, search engines and legal pages

The side nobody sees does as much work as the side they do:

• Structured data for products, offers, ratings, breadcrumbs and site search, which is how prices and stars reach the search results.
• The Inter font comes from your own server rather than a third party; pictures load when needed and pages are prepared before the click.
• It works from the keyboard, tabs are described correctly to screen readers, and visitors who ask for less motion get a still page.
• Seven starting texts for privacy, KVKK, cookies, terms, distance sales, returns and shipping. Your lawyer still needs to review them, but you are not starting from a blank page.
• Five footers and seven cookie bar styles.

Two ways to build this on Odoo

Odoo’s own eCommerce app is a solid base: products, variants, pricelists, stock, payment and shipping are all there. Its shop front is plain, though, and the density an electronics shop needs does not come out of the box. There are two routes:

The two do not exclude each other. Opening on a ready theme and adding the parts unique to the shop later is usually cheaper and faster than starting from nothing.

Setting up Voltaj

The theme costs €249 on the Odoo Apps store and is published for every Odoo version from 15.0 to 20.0. Apart from Odoo’s eCommerce app it needs no paid apps. Setup takes four steps:

1. Install Voltaj from the Apps menu. Voltaj Shop Tools, the module behind the cards, is installed with it (€14.99 on its own).
2. Apply the theme to your website from Website › Configuration.
3. Import a demo from Website › Configuration › Voltaj, or start from your own catalogue.
4. Open Voltaj Studio and choose the header, menus, cards and product page.

Before buying you can try every page, the studio and the blocks through the live demo link on the Voltaj page. If you would like us to do the installation, the product import and the shop-specific changes, see our web work.