Concept build · 2026
A storefront that handles the whole sale.
Selubung is a fictional Malaysian hijab and shawl label, built as a complete WooCommerce storefront: a custom block theme, a Store API cart drawer, Malaysian shipping, sandbox payments and order tracking.
Not live yet
- Client
- Selubung — concept
- Sector
- Hijab & shawl retail
- Market
- Malaysia
- Scope
- WooCommerce storefront
The rest of the sale.
A storefront is judged in the middle of the sale: finding the product, choosing an option, and getting through checkout without an account.
17
Purchasable options
3
Sandbox payment gateways
0
Page builders
The brief
Objective / approach
Sell the product, not the template.
A local label needed a storefront that felt like the brand, not a theme demo. The catalogue is small on purpose: three products, but every colour, size and fabric is a real choice with its own stock. The seed adds categories, five-star reviews and the stock edge cases a real shop hits.
WooCommerce, without the plugin pile.
The store uses WooCommerce's own mechanics — variations, shipping zones, order statuses and emails. Variation swatches are restyled by the theme. No Elementor, no Divi, no side-cart plugin.
“Effortless drapes for the everyday hustle.”
The visual world stays warm and quiet: cream paper, deep green, self-hosted Playfair Display and Plus Jakarta Sans, and one clear action. The copy answers the questions a shopper actually asks — what is it made of, will it stay put, how much is delivery — before they reach the cart.
The cart is a state, not a page.
The slide-out drawer runs on WooCommerce's Store API. Quantity changes update optimistically, the subtotal stays live, and free shipping says exactly how far away it is.
- Data
- Store API, not cart fragments
- Quantity
- Optimistic, then reconciled
- Free shipping
- Progress from RM 100
- Keyboard
- Focus trap, ESC and backdrop close
- Fallback
- A real /cart/ page without JS
-
The Soft-Matte Silk Shawl
Sage · Maxi
RM 49
-
Matte Magnetic Hijab Pins
Set of 4
RM 25
Free shipping
RM 26 to go
Subtotal
RM 74
Illustrative cart state · not a live checkout
Malaysian by default.
Shipping, postcodes and payment methods are part of the build, not a settings page discovered after launch.
Shipping
RM 8, RM 14, free from RM 100.
Peninsular Malaysia and Sabah/Sarawak are separate zones. The same rules feed the seed, the templates and the drawer, so they cannot disagree.
Checkout
A five-digit postcode that behaves.
Postcode validation, state auto-selection, city autofill and a required phone field — enforced again server-side through the Store API.
Payments
Three gateways, one sandbox.
Curlec, Chip and DuitNow QR redirect to a self-contained simulator with FPX bank choice, success, failure and cancel. HMAC callbacks model the real contract.
Tracking
Order number plus email. Nothing else.
A five-stage timeline, editable courier details and IP rate limiting. Requiring both values stops order enumeration.
A performance and QA story.
The case study is the build itself: a theme, a seed command and a test suite that can be run again.
$ make up
Builds, installs and seeds the demo
Theme
Nine templates, no builder.
A custom FSE block theme with theme.json tokens, two template parts and nine patterns. The markup belongs to the theme.
Media
WebP under 90 KB, committed.
A build script converts the source photography and writes a manifest of dimensions, size and quality. No runtime image plugin.
Front end
Vanilla modules, four files.
Cart, checkout, navigation and product behaviour are small ES modules. No React, Vue or framework runtime reaches the shopper.
Tests
A smoke suite that covers the sale.
Playwright checks the drawer, quantity updates, shipping boundaries, payment failure and retry, DuitNow QR, tracking and Mailpit delivery.
Next concept
BumiKita
Selling online? Let's build the whole path.
If your shop needs a catalogue, a cart, checkout and a payment flow that behaves like Malaysia, this is the conversation.