Volt Template: A Gadget Store With a Compare Table
Volt template: an electronics storefront that answers the specs question
Volt is a ready-made store for physical products with specifications: audio, power and light in the demo content. It carries a hero product, a weekly deal with a countdown, a filtered range, a head-to-head comparison and warranty blocks, plus a working cart. Cloning it into a project costs no credits.
It is the most conventional of the five store templates in the Zugo gallery, and that is a compliment. Nothing on the page is clever for its own sake, and every block corresponds to a question a buyer asks before paying.
What is inside the Volt template?
The page moves through the standard electronics purchase in order: one product to anchor attention, an offer with a deadline, the whole range, a comparison for the two that most people hesitate between, then the guarantees.
| Section | What it holds |
|---|---|
| Announcement bar | One line for the newest product or the current offer |
| Hero product | Price with strikethrough, rating, stock status, key specifications |
| Deal of the week | Discounted item with a live countdown and a saving percentage |
| The range | Product grid filtered by category: audio, power, light |
| Compare | Two flagship products side by side across six specifications |
| Warranty | Coverage, returns, repairability and delivery as four short blocks |
| Cart and account | Cart drawer with cross-sell, order summary and sign-in screens |
The four warranty blocks are placed after the products rather than before, which is the right order. Guarantees do not create desire, they remove the last objection, and putting them early makes a shop sound defensive before anyone has decided they want something.
The cart drawer includes a cross-sell row. For accessories that is honest merchandising: someone buying earbuds does frequently want a charger. For expensive single purchases it becomes noise, and removing it is one edit.
Why is the comparison table the most valuable block?
Most electronics shops lose the sale in the gap between two similar products. The buyer likes the brand, cannot tell the difference between the flagship and the cheaper model, and leaves to read a review somewhere else. The comparison block keeps that decision on your page.
What makes this one work is the framing above it: two bestsellers, two different jobs. A comparison that quietly argues for the expensive one reads as a sales pitch. A comparison that says which product suits which person reads as advice, and it sells both.
The specifications chosen are also the right kind: battery life, noise cancelling, drivers, water resistance, weight, pairing. Each is something a buyer can map onto their own life. Numbers that only mean something to an engineer belong further down the page.
If you sell anything with variants, this is the block to keep and rebuild first, even if you throw away half of the rest of the template.
What is genuinely wired, and what is a facade?
The storefront works. Category filters, adding to the cart, the cart counter, the drawer with its summary, the empty state, the countdown and the account screens all respond. You can watch the whole thing behave in the gallery preview before cloning.
Behind the interface there is nothing yet. No stock, no orders, no customers. The cart also resets when the page reloads, since the template ships without storage. That is fine for judging the design and unacceptable for taking money.
Payment is the first connector you need: Stripe handles cards and subscriptions, and the checkout screens here are ready to sit on top of it. Storage and accounts come from Supabase, and order confirmation email from Resend. None of those cost credits, and all of them cost attention.
The stock badge deserves a specific warning. A page that says "in stock" when it has no idea is worse than a page that says nothing, because a customer who orders something unavailable remembers it. Either wire it to real inventory or take the claim off the card.
Who should start from Volt rather than describe a shop?
It fits any small catalogue of physical products with specifications: audio gear, tools, lighting, bikes and parts, kitchen equipment, camera accessories. Anywhere buyers compare numbers before choosing.
It fits a single-product launch too. Keep the hero and the warranty blocks, delete the range, and turn the comparison into your product against the alternative your customer is currently using. That is four edits and a genuinely different page.
It is the wrong start when your products have no specifications to compare. Clothing, food and craft goods sell on photographs and story, and a spec table on those pages looks like a form. One of the other store templates in the gallery will fit better.
It is also the wrong start for a marketplace with many sellers. That is a platform with accounts, payouts and moderation, which is a different project from a storefront. The honest boundaries of building shops this way are in does it work for e-commerce.
Should you keep the countdown on the weekly deal?
Keep it only if the deadline is real. A countdown that resets every time the page loads is the oldest trick on the internet, customers recognise it instantly, and it costs you the credibility that the warranty blocks were built to earn.
If your offer genuinely ends on a date, the countdown is doing useful work: it converts a vague intention into a decision this week. Set it to the real date with one edit and let it expire visibly.
If you do not run time-limited offers, replace the block rather than delete it. That slot is prime page real estate and works well as a bundle, a bestseller or a restock notice.
How do you refit it for your own products?
Substance first, styling second. Each edit costs 3 credits, so this order puts the expensive-to-redo work at the top.
- Replace the brand and the announcement line. Name, tagline, footer, the bar at the top.
- Load your range. Photographs, names, prices, and the category filter renamed to your groups.
- Rebuild the comparison. Your two products that buyers hesitate between, with specifications they can judge.
- Rewrite the warranty blocks. Your actual coverage, returns window and delivery promise, not the demo's.
- Fix the currency, shipping and tax. The demo figures are placeholders and wrong for everyone.
- Connect payment, then publish. The project lives at an address like
yourstore.zugo.run, and your own domain sits on top, as described in can I use my own domain.
Do the photography before the edits, not after. Product images are the one part of a hardware store the builder cannot improve for you, and a beautifully rebuilt page around placeholder shots still looks like a demo.
What does it cost to reach a real checkout?
The clone is free and calls no AI, so the count starts with the first edit. Getting a storefront to a publishable state usually takes six to nine edits, plus the connector work.
| Action | Credits |
|---|---|
| Cloning the template | 0 |
| One edit in chat | 3 |
| A build from a written description | 6 |
| Multi-page platform | 12 for the first three pages, 3 per page after |
| Hi-Fi mode | 6 per edit, 12 per build |
Free gives you 5 credits. Pro is $25 a month for 200 credits, which is about 16 platforms, 33 builds or 66 edits, and Business is $99 a month for 800 credits. Each build is opened in a sandbox before you see it, so a version that fails to load is never delivered.
If every product needs its own address for search and for sharing, that is a platform rather than a page: 12 credits for the first three pages and 3 for each page after. A simple build takes about a minute, and a multi-page one takes a few. A fuller breakdown of what a site like this costs is in how much an AI website costs.
Which edits do people ask for most?
"Add a third column to the comparison for the entry-level model." "Show a stock badge that reads made to order instead of in stock." "Put the warranty blocks directly under the hero, because our customers ask about repairs before they ask about specs."
Filtering requests are common and usually justified: "let people filter the range by price as well as category" or "add a compatibility filter for USB-C and older connectors."
Phone requests should come early rather than late: "on mobile, make the comparison table scroll sideways with the specification names pinned to the left." A spec table that breaks on a phone is the most frequent reason this page underperforms.
Where does the template stop?
A shop without storage is a demonstration. Carts empty on reload, orders are not recorded, and no customer exists. Two connectors close that gap, and it is a working session rather than a chat message.
Inventory, tax and shipping rules are real work. The template will show any number you give it. Deciding what the numbers should be, and keeping them true, stays with you.
Deep commerce logic arrives through edits, not one prompt. Bundles with conditional pricing, warranty registration tied to a serial number, per-country delivery rules: reachable, but as a sequence of specific changes. On a genuinely complex product Zugo does not replace a development team, and the source can leave through the GitHub export at any point.
The cheapest way to test the fit is to rebuild the comparison block with your own two products. Open the gallery at zugo.dev, clone Volt, and put your flagship next to the model people usually buy instead. If that table is easy to fill in, this template is the right frame for your shop.