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.
Top comments (0)