All case studies

DEV3 Technologies · own product

DEV3 Circuit: an electronics Shopify theme with app-free compare, spec tabs and a 3D hero

Our own Online Store 2.0 theme for electronics and gadget stores: a mega menu and category bar, spec chips from metafields, compare for up to 4 products without an app, tech-spec tabs, bundles, a deals countdown and an exploded 3D earbuds hero.

Industry
Consumer electronics (Shopify theme)

Live project preview

Client systems are private — screenshots shown where permitted.

DEV3 Technologies · own product — screenshots
Exploded 3D hero — Earbuds come apart layer by layer in real-time 3D beside a bold launch headline and key specs.

Exploded 3D hero — Earbuds come apart layer by layer in real-time 3D beside a bold launch headline and key specs.

The challenge

Electronics shoppers compare. They want to know which phone has the bigger battery, what is in the box and how long the warranty runs, and they want to see it side by side. On Shopify that usually means a compare app, a tabs app, a bundle app and a countdown app, each with its own styling and script. A tech store also needs to look like tech: dark, precise and animated, without the hero slowing down a catalogue of dozens of products. We set out to make specs a first-class part of the theme, read from simple metafields, and to build compare, tabs, bundles and deals natively, with a 3D hero that explains a product rather than decorating it.

Our solution

Circuit is an Online Store 2.0 theme built from scratch on DEV3's own Shopify theme base, not a fork of Dawn. The base supplies the standard templates, the cart drawer, predictive search, filters, swatches, the motion system and a lazy 3D accent engine; Circuit adds its own sections, product blocks and 3D preset on top.

Key design decisions

  • Specs as one metafield. A multi-line custom.specs field with one Name: value per line feeds the tech-spec tab, the compare table and the compare dialog, so merchants maintain specs in one place.
  • Compare through the Section Rendering API. The compare dialog fetches each product's spec fragment from Shopify, so it needs no app and no external service; the tray keeps the selection in the shopper's browser.
  • Honest bundles. The bundle picker adds items at their real prices in one cart request and shows savings only where a compare-at price exists; discounts stay in Shopify Discounts.
  • A 3D hero that explains. The procedural earbuds open their case and separate into tip, driver, board and battery as the shopper scrolls, with spec callouts that fade in at set points.
  • Two styles from one scheme. Neon and Clean are colour-scheme presets; the glow, spotlight and grid floor all follow the accent colour.

Results

Circuit ships with the fictional Voltix store: 16 products with 67 variants across 5 categories, 62 rendered images, 2 GLB models, 4 pages and 3 articles, as a product CSV with images.

  • Theme Check: 0 errors and 0 warnings in Shopify Theme Check.
  • Live store test: tested on a Shopify development store, from add to cart through the cart drawer to the Shopify checkout handoff.
  • Browser QA: an automated harness at desktop and phone sizes confirmed the 3D accent renders, reduced motion turns animation off, and the console shows 0 errors.
  • Weight: about 26 KB gzip of initial JavaScript and 19 KB of CSS; three.js loads lazily.

Circuit is on the DEV3 marketplace. Watch its video tour there.

Setup guide

Requirements

  • A Shopify store with the Online Store sales channel
  • No app is required. Optional: the free Shopify Search & Discovery app for collection filters, a reviews app that writes the standard rating metafields.

What's in the download

Unzip the download from your DEV3 account first. Do not upload the download itself to Shopify.

  • dev3-circuit-1.0.0.zip: the theme. Upload this zip as it is; do not unzip it.
  • Documentation/index.html: the full guide. Open it in a browser.
  • Demo-Content/: products.csv, seed.json, images/, models/voltix-aero-buds.glb and models/voltix-halo-max.glb and a README for the manual import.
  • LICENSE.txt and START-HERE.txt.

Install the theme

  1. In Shopify admin go to Online Store → Themes.
  2. Click Add theme → Upload zip file and choose dev3-circuit-1.0.0.zip.
  3. When the upload finishes, click Customize to preview it in the theme editor.
  4. Click Publish when you are ready. Your current theme stays in the theme library.

Import the demo content (optional)

The demo brand Voltix is fictional; every product, review and image is sample content rendered for this theme.

  1. Go to Products → Import and upload Demo-Content/products.csv. The CSV has no image URLs.
  2. Add each product's images from Demo-Content/images/, following the file names in the demo README.
  3. Settings → Custom data → Products: add the metafield definitions custom.specs (multi-line text), custom.highlights (list of single-line text) and custom.in_the_box (multi-line text), then fill them from the README.
  4. Upload the two GLB models as media on the matching products for the 3D/AR gallery view.
  5. Content → Files: upload the section images listed in the README.
  6. Create the category collections plus New arrivals and Deals, then the pages, blog articles and menus listed in the README.

A scripted seed that does all of this in one command is available from DEV3 support on request. It runs against your own store with your own Admin API token, and it tags everything it creates so it never touches your other products.

After the import

  • Templates point at the demo handles. With your own catalogue, pick your products and collections in each section.
  • Use the same spec names on every product (always "Battery", never "Battery life" on one), so compare rows line up.
  • Set the deals countdown's Ends at date, the free-shipping threshold and the upsell collection.
  • Set up payments, shipping and taxes in Shopify's own settings; checkout is Shopify's.

Updates

Download the new version from your DEV3 account and upload the new theme zip under Online Store → Themes → Add theme. It arrives as a new theme in your library: copy your settings across in the theme editor or re-apply your changes, then publish it.

How to use

Choose a style

Theme settings → Theme style: Neon (graphite, volt-lime glow, Space Grotesk and monospace spec type) or Clean (light grey and white, blue accent, Inter). Scheme 1 is the base, 2 the deep footer, 3 the panel tint and 4 the brand colour. The glow, spotlight and neon lines follow the scheme's accent colour.

Mega menu and category bar

  • Give a menu item children (categories) and grandchildren (products or sub-categories) and the header shows a mega menu. Turn on Header → Use mega menu for all dropdowns for the promo image.
  • Circuit category bar (header group): icon chips with a label, link, icon and optional neon highlight. The current page's chip is marked automatically.

Spec metafields

Create these under Settings → Custom data → Products (all optional):

  • custom.specs: multi-line text, one Name: value per line, e.g. Battery: 5,000 mAh. Feeds the Tech specs tab, the compare table and the compare tray.
  • custom.highlights: list of single-line text (2–4 short items). Chips on cards and highlight tiles on the product page.
  • custom.in_the_box: multi-line text, one item per line. The In the box tab.

Use the same spec names on every product; compare rows line up by name.

Compare

  • Theme settings → Products → Compare on cards shows a Compare checkbox on every card.
  • The Circuit compare tray (footer group) holds up to 4 products. Compare now opens a dialog with a "Differences only" switch; no app is needed.
  • The Circuit spec compare section is a fixed table of 2–4 products you choose, with an optional badge per product.

Product page, bundles and deals

  • Circuit tech tabs: highlight tiles, then Overview, Tech specs, In the box and Warranty & support. Empty tabs hide.
  • Circuit bundle: a main product and up to 3 add-ons; Add bundle to cart adds every ticked item at its normal price. For a bundle discount, create an automatic discount in Discounts.
  • Circuit deals countdown: pick a collection and set Ends at as an ISO date such as 2026-12-31T23:59:00 (shopper's time zone) or with an offset for a fixed zone. An end message shows at zero.
  • product.landing is an alternative template for launches.

The 3D hero

  • The Circuit hero shows procedural earbuds and a case that come apart as the shopper scrolls. Set Body colour, Glow colour and the starting separation with {"explode":0.45} (0 closed, 1 fully apart).
  • Spec callout blocks fade in as the parts separate; set each block's position and its "appears at" percentage.
  • Paste a .glb link from Content → Files into GLB file URL to use your own model. Without WebGL or with 3D turned off, the poster shows and every callout is visible.

Motion

Theme settings → Motion: animation level (Off, Subtle or Full), reveal style (Circuit uses blur), duration, stagger, split headings, magnetic buttons and tilt. Reduced motion is always respected.

Related case studies

DEV3 Technologies · own product · Supplements and wellness (Shopify theme)

DEV3 Vitality: a supplements Shopify theme with supplement facts, a goal quiz and honest subscriptions

Our own Online Store 2.0 theme for supplement and wellness brands: shop by goal, a tag-matched product finder quiz, accessible supplement facts tables, subscribe & save that appears only with real selling plans, stacks, a testing story with lot lookup, a disclaimer block and a 3D tub hero.

DEV3 Technologies · own product · Furniture and home décor (Shopify theme)

DEV3 Nestwell: a furniture Shopify theme with shop-the-room, a "will it fit" check and a 3D chair

Our own Online Store 2.0 theme for furniture and décor stores: a 3D lounge chair that recolours from fabric and leg swatches, shop-the-room hotspots, complete-the-room bundles, dimensions with a doorway and floor-space check, delivery estimates, showrooms and trade enquiries.