HighTech Shopify Theme
A custom Shopify storefront theme for a Bangladesh-based electronics & laptop retailer. Extends Shopify Dawn with bilingual (English + Bengali) support, a live EMI calculator, metafield-driven product specs, and a bespoke design system — purpose-built for tech product retail.
Overview
HighTech is a custom Shopify storefront theme built for a Bangladesh-based electronics and laptop retail store. It extends Shopify Dawn 15.4.1 with bilingual (English + Bengali) support, a per-product EMI/installment calculator, a metafield-driven product specification system, and a centralised CSS-variable design system that bridges the Shopify Theme Customizer to every component — purpose-built for tech-product retail rather than a generic storefront.
Key Features
- Configurable EMI / installment calculator on every product page — 6, 9, 12, 18, 24-month plans with per-product interest-rate overrides via metafields.
- Metafield-driven product specifications: structured tech specs (processor, RAM, display, storage…) in a tabbed layout, falling back from custom.specs to 50+ Shopify standard category metafields.
- Bilingual UI (English + Bengali) with dual Google Font loading (Inter + Noto Sans Bengali) and 50+ locale translation files.
- Centralised CSS-variable design system bridging Shopify Theme Customizer colour pickers → Liquid → CSS custom properties → all components (11 brand colours + RGB variants).
- 13 custom Shopify sections including a hero carousel, tabbed product detail panel (Specs/Description/Q&A/Reviews), category grid, promotional offer grid, and YouTube reels embed.
- Sticky category navigation bar with scroll-driven positioning and layout-shift prevention via a JS placeholder.
Challenges & Solutions
Bridging Shopify’s server-side Liquid with a CSS-variable theming system required injecting colour values as inline {% style %} blocks in theme.liquid, so Theme Customizer picks flow into CSS without any hardcoded values in component files.
Bilingual rendering (Latin + Bengali scripts) was solved by preloading both Inter and Noto Sans Bengali via preconnect headers and overriding font-family on [lang] selectors — avoiding FOUT.
The EMI calculator runs entirely in Liquid with no client-side JS, using metafield integers for plan configuration and template math filters to compute monthly installments server-side.
Results & Impact
?? Add real outcomes (products, traffic, conversions) when available.