Building a spec-sheet Shopify theme on top of Dawn: metafields, a quick-order table, and zero JS libraries

Cyberdeck Themes — Wed, 14 Oct 2026 23:59:00 +0000

I forked Shopify's Dawn and turned it into Cyberdeck, a dark theme for electronics and gadget stores. Here's what I learned.

1. Spec tables from metafields

Tech buyers want a table, not a paragraph. I defined product metafields (e.g. specs.*) and wrote a section that loops over them and renders a <table>. Merchants fill in the specs in the admin, and the theme skips any row that's empty. It's an OS 2.0 section, so merchants can reorder it, hide it or move it.

2. A quick-order table for B2B buyers

Wholesale buyers hate opening ten product pages. The quick-order section lists variants with a SKU column and a quantity input, then posts everything at once to /cart/add.js as an items[] array. One request, then a cart drawer refresh using the Section Rendering API.

3. Filters and search by SKU

Collection filters use Search & Discovery's collection.filters, with a grid/list toggle stored in localStorage. Predictive search is tuned so that typing a model number or SKU returns the right product.

4. No libraries

It's all vanilla JS with custom elements (the same approach as Dawn) and no jQuery or bundled libraries. The theme also respects prefers-reduced-motion.

5. Theming a dark UI properly

Dawn's color-scheme system gets extended to 7 schemes (5 dark, 2 light). The hard part was keeping contrast accessible on neon accents. I checked every text/background pair.

Packaging and selling

Shopify themes are just a zip. I sell it on Gumroad with per-sale license keys, which serve as an order reference rather than DRM.

If you want to see the result: https://dhlptx.gumroad.com/l/cyberdeck-shopify-theme. Questions about Liquid and OS 2.0 are welcome in the comments.