Case Study · E-Commerce Engineering

Opalia Homes — Shopify Storefront Build

CLIENTOpalia Homes
PLATFORMShopify Liquid
STATUSLive Production

Project Notes & Retrospective — how Vellion Group engineered a custom Shopify theme from scratch for a luxury Indian heritage textiles brand.

15
Custom Sections
11
Liquid Templates
0
Page Builder Apps
100%
Schema Configurable
Client Opalia Homes
Industry Heritage Home Textiles
Live Store opaliahomes.com ↗
§1

1. Client Brief & Requirements

Brand DNA:
#FAF9F6 Warm Linen
#2F3430 Heritage Slate
Della Respira (Display)
Nunito Sans (Body)
MD3 Design Tokens

Ground-Up Shopify Theme

Built 100% custom from scratch in Liquid—not a stock theme modification—to convey an artisanal, heritage-led aesthetic distinct from generic mass-market bedding stores.

Mobile-First Architecture

Engineered for high mobile traffic: swipeable category snap grids, condensed sticky navigation, and touch-optimized product galleries.

100% Editor Configurable

Every hero slide, category card, bundle block, and trust icon is editable directly via Shopify's Theme Editor without requiring developer code changes.

Direct WhatsApp Lead Capture

Persistent floating WhatsApp concierge with pre-filled greeting message, matching the primary conversion funnel of Indian luxury D2C brands.

Reference-driven design patterns (e.g. Sarita Handa footer structural layout). Scope expanded mid-project to include custom About narrative pages, Contact bento layouts, bundle builders, and Instagram moment grids.

§2

2. Key Theme Features & Architecture

System Architecture Blueprint
Custom Liquid + Tailwind MD3
Discovery Layer
  • Transparent-to-Solid Sticky Nav
  • Mega-Menu with Image Hover
  • Server-side data-has-hero flash fix
  • 10-Slide Crossfade Hero Carousel
  • Touch-Snap Category Grid
Product Studio
  • Sticky Main Image Viewport
  • Independent Thumbnail Track
  • Smart Aspect contain/cover
  • Name-to-Hex Swatch Engine
  • Zero-JIT Pure CSS Accordions
Conversion Flow
  • Instant Slide Drawer Cart
  • 12-Column Bento Contact Form
  • 5-Pillar Editorial Narrative
  • Auto-Styled Legal Policies
  • Floating WhatsApp Concierge
Homepage System

8 Modular Sections

Hero carousel (up to 10 slides, desktop/mobile responsive, crossfade, image preloading), Discover by Category snap grid, Brand Ethos, Best Sellers slider, Sanctuary Sets bundle block, Trust Icons strip, Moments of Calm grid (2×2 mobile layout), and Newsletter capture synced to Shopify customer tags.

Hero Carousel Category Snap Sanctuary Bundles Moments Grid
Product Engineering

Sticky Aspect-Ratio Gallery

Redesigned from a broken 2-column layout into a sticky main image + independent thumbnail strip. Automatically balances portrait shots (object-contain) with lifestyle landscape shots (object-cover) without distorting textiles.

Sticky Gallery Smart Aspect Active Indicator
Variant Engine

Smart Name-to-Hex Swatches

Built a robust normalization engine that converts compound and multi-word names (e.g. "Sage Green", "Floral Mint") into clean swatches with pill fallbacks, and automatically hides single-variant "Default Title" placeholders.

Hex Mapping Pill Fallback Single-Variant Auto-Hide
Narrative & Contact

Editorial Narrative & 12-Col Bento

Five-section editorial About page celebrating artisan block printing, handloom weaving, and heritage motifs. The Contact page uses a 12-column bento grid featuring a native Shopify form alongside an FAQ accordion.

5 Narrative Pillars 12-Col Bento Form FAQ Accordion
§3

3. Technical Challenges & Solutions

01. Disappearing Thumbnail Bug Gallery Layout
The Problem
Shared grid-cols-2 layout made thumbnails compete with the main image. Clicking a thumbnail visually replaced the clicked element, causing images to seemingly vanish from the screen.
The Engineering Fix
Decoupled the structure into a sticky main image viewport alongside an independent thumbnail strip, ensuring all images stay visible with active selection highlights.
02. Invisible Multi-Word Color Swatches Color Logic
The Problem
Native Liquid remove: ' ' generated invalid CSS color properties for multi-word or artisan names (e.g. "Floral Mint" rendered as invalid floralmint, displaying as an invisible blank circle).
The Engineering Fix
Developed a curated name-to-hex lookup table, validated standard CSS color fallbacks, and implemented labeled pills for non-standard tones so swatches never fail.
03. Tailwind JIT Missing Accordion Icons Production CSS
The Problem
Accordion toggle relied on Tailwind's group-open: variant, which was absent from the client's precompiled production stylesheet, causing +/− icons to freeze.
The Engineering Fix
Refactored to zero-dependency scoped CSS pseudo-elements using native details[open], guaranteeing 100% reliable icon toggling independent of Tailwind's compiler.
04. The Corner Radius vs. Aspect Ratio Trap Visual Fidelity
The Problem
Container border-radius only applies when images fill the frame (object-cover). When using object-contain to prevent cropping tall textile shots, the image's straight edges exposed unrounded corners.
The Engineering Fix
Applied border-radius directly to the <img> element itself, guaranteeing uniform rounded corners regardless of portrait or landscape scaling.
05. Mid-Project Scope Expansion Delivery Management
The Challenge
Initial brief expanded from 5 core areas to 15 sections, 11 templates, and ~5,000 lines of code across cart, search, and bespoke narrative pages.
The Management Fix
Built an automated HTML-to-PDF changelog pipeline, presenting the client with detailed, factual revision reports at each milestone for seamless, evidence-based scope alignment.

Want a custom Shopify store like this?

Let's build a custom, high-speed Shopify Liquid theme for your brand.

Directly connect with us