Getting started
Install the theme
- Download
electro-shopify-theme.zipfrom the theme page. - In your Shopify admin go to Online Store → Themes.
- Under Theme library, choose Add theme → Upload zip file.
- Select the zip and upload it. Do not unzip it first — Shopify expects the archive.
- Customize to set your logo, colours and menus, then Publish.
Uploading does not touch your live theme. The new one sits in the library until you publish it.
The four things worth setting first
1. Create the specs metafield
This is the one that matters. Settings → Custom data → Products → Add definition:
| Field | Value |
|---|---|
| Name | Specification |
| Namespace and key | specs.table |
| Type | List of single line text |
Then fill it in per product, one row per line:
Display: 14in 2.8K OLED, 120Hz
Processor: 8-core, 4.6GHz boost
Memory: 16GB LPDDR5X, soldered
Storage: 1TB NVMe, user replaceable
Everything before the first colon becomes the label. Full detail, including the JSON alternative, is in Specification tables.
2. Put manufacturers in the Vendor field
The theme reads Shopify's product Vendor as the brand and shows it above the title. Predictive search matches it, so a customer searching a brand rather than a model number still finds the product.
3. Make your departments collections
The homepage grid has one tab per collection. Create a collection per department — Laptops, Audio, Keyboards & mice — and point the tabs at them in the theme editor. Panels are rendered server-side, so switching costs no request.
4. Install Search & Discovery
Collection filtering uses Shopify's free first-party Search & Discovery app. Add filters for brand (vendor), finish (your variant option), price and availability.
Without it the collection pages still render and sort; they just do not filter.
Adding a finish picker
Add a variant option called Finish with the values you sell — Graphite, Silver, Midnight. The theme renders it as colour chips, and the chip colours come from theme settings rather than from Shopify, so a finish called "Midnight" can be drawn as near-black.
Local development
npm install -g @shopify/cli
shopify theme dev --store your-store.myshopify.com # live preview
shopify theme check # lint
shopify theme push # upload
There is no build step. Edit assets/base.css or assets/theme.js directly.