How we built the DEV3 Circuit: compare without an app using the Section Rendering API

DEV3 Circuit is a Shopify theme for electronics and gadget stores with a real catalogue, built on DEV3's own base rather than a fork of Dawn.

Decisions that mattered

• Specs live in one multi-line custom.specs metafield with one Name: value per line. It feeds the tech-spec tab, the compare table and the compare dialog, so merchants maintain specs in a single place.
• Compare uses Shopify's Section Rendering API. The dialog fetches each product's spec fragment from Shopify, so it needs no app and no external service. The tray holds up to 4 products and keeps the selection in the shopper's browser.
• Bundles add items at their real prices in one cart request and show savings only where a compare-at price exists. Discounts stay in Shopify Discounts.
• The 3D hero is procedural earbuds that open their case and separate into tip, driver, board and battery as the shopper scrolls, with spec callouts.
• Neon and Clean are colour-scheme presets, and the glow and grid follow the accent colour.

Numbers from our checks: Theme Check 0 errors and 0 warnings, about 26 KB gzip of initial JavaScript and 19 KB of CSS, and three.js loads lazily.

Limits: compare depends on specs being filled in the metafield.

Trade-off we chose: compare fetches specs on demand from Shopify rather than storing them elsewhere.

Feedback welcome.