Deivisoft Themes

Ohm (working folder: themes/gauge)

A specification-first Shopify theme for electronics, appliances, parts, and tools.
Version 0.1.0 · Shopify Online Store 2.0 · Liquid, JSON templates, native CSS/JS

1. Purpose

Ohm is built for products that are bought with a checklist. It makes specifications, comparison, compatibility, and buying guides part of the shopping experience instead of leaving them in a PDF or a support ticket.

The theme is aimed at electronics, appliance, parts, tools, and industrial-supply merchants with 100–5,000 SKUs and attribute-heavy catalogs.

2. What is included

  • Complete Online Store 2.0 theme.
  • Dark, high-contrast spec hero with positioned spec callouts.
  • Category tiles, featured collection, and trust bar.
  • Static comparison table for up to three products.
  • Client-side comparison drawer with up to four products, stored in localStorage.
  • Buying guide, compatibility finder, and product-page spec table.
  • Product page with spec summary, compare button, compatibility, accessories, warranty, and spec rows.
  • Collection page with dense product cards, spec chips, and comparison controls.
  • Predictive search, cart drawer, cart page, account component, gift card, password, 404, blog, article, and contact templates.
  • Licensed Shopify Burst photography and vector fallbacks in demo/.

3. Requirements

  • Shopify store with the Online Store channel.
  • Shopify CLI 4.x or admin theme upload.
  • Optional metafields for spec chips, spec summary, compatible products, and accessories.

4. Installation

npx shopify theme dev --store your-store.myshopify.com --path themes/gauge
npx shopify theme push --store your-store.myshopify.com --path themes/gauge --unpublished

Or upload a ZIP of themes/gauge in Online Store → Themes → Add theme → Upload ZIP file.

5. Configuration

Theme editor

  • Colors — near-black utility areas, white content, electric blue accent, lime used sparingly.
  • Typography — Space Grotesk headings, Work Sans body.
  • Header — utility messages, logo, menu, sticky header.
  • Product — media note, specifications heading, pickup/payment settings.
  • Sections — spec hero callouts, category tiles, comparison products, buying-guide steps, compatibility cards, trust-bar items.

Metafields

Metafield Type Used by
custom.spec_1 Single-line text Product card spec chip
custom.spec_2 Single-line text Product card spec chip
custom.spec_3 Single-line text Product card spec chip
custom.spec_summary Multi-line text Compare table notes
custom.compatible_products List of product references Product page compatibility
custom.accessories List of product references Product page accessory bundle

Comparison

  • The comparison drawer stores up to four products in the browser's localStorage.
  • It compares price, type, availability, options, and the optional custom.spec_summary note.
  • The homepage comparison table is a static section for three product pickers. It is separate from the drawer and is intended for a curated "three that matter" comparison.
  • To compare full specification tables, use product metafields or a comparison app; the theme does not invent missing spec data.

Spec rows

The product page's specification table is built from Spec row blocks. Add one block per row (label + value). This keeps the table merchant-editable without requiring a page builder.

6. Customisation

  • assets/theme.css — Ohm art direction: spec hero, callouts, technical cards, comparison table, compare drawer.
  • assets/theme.js — comparison drawer, localStorage, table rendering, removal.
  • sections/hero-spec.liquid, category-tiles.liquid, comparison-table.liquid, buying-guide.liquid, compatibility-finder.liquid, trust-bar.liquid.
  • snippets/compare-button.liquid, compare-drawer.liquid.
  • snippets/product-card.liquid — square card with spec chips and compare control.
  • locales/en.default.json — storefront strings.

7. Validation status

  • shopify theme check: 0 errors, 0 warnings at the time of writing.
  • Structural validator passes required templates, sections, JSON, and account/localization checks.
  • Live-store installation, home/product/collection/cart/search, add-to-cart, and Lighthouse home-page audits were executed on the branded demo stores. Checkout, app-dependent flows, and template-level Lighthouse runs remain unmeasured. See docs/05-validation-report.md.

8. Known limitations

  • Comparison is client-side and limited to four products. It is not a replacement for a full comparison app with spec tables.
  • The spec table depends on merchant-authored Spec row blocks; it does not parse PDFs or external data.
  • The demo photography is licensed from Shopify Burst. The SVG illustrations remain available as offline fallbacks in demo/<theme>/images/.
  • The theme_info documentation/support URLs point to deivisoft.eu. Publish the documentation and support pages before submission.
  • One preset ships at launch. Additional presets require a /listings folder and separate demo stores.
  • Theme Store acceptance is not guaranteed.

9. Support and license

See LICENSE.md and the root THIRD_PARTY_NOTICES.md. No third-party JavaScript libraries or font files are bundled. Theme support covers bugs and documented configuration, not custom design or code.

FAQ

How do I install the theme?

Install the ZIP from the Theme Store or upload it under Online Store → Themes → Add theme → Upload ZIP file. Then publish or preview the theme.

Does the theme require apps?

No. The core experience uses native Shopify features. App blocks are available for optional integrations such as reviews, subscriptions, or wholesale pricing.

How do I get support?

Use the support form. Include your store URL, theme name, and a description of the issue. We reply within two business days.

How do updates work?

Theme Store purchases include updates. Download the latest version from the Theme Store or your Shopify admin and apply it to a duplicate of your theme before publishing.