⚖️
Sell-by-Weight Engine
Per-product pricing per kilogram. A live slider — 0.5 to 10 kg in ½-kg steps — recalculates in real time and flows cleanly through cart, checkout and order records.
Production case study · live store
Super Asulin
A neighborhood supermarket, re-engineered from a blank stylesheet.
A fully custom WordPress + WooCommerce platform — hundreds of live products across 80+ departments, a sell-by-weight engine, curated smart baskets, a uniform product spec system, Hebrew cart-recovery emails, and shop-floor barcode tooling. Native right-to-left, because Hebrew is a first-class citizen here סופר זול אסולין · טרי · עד הבית
WordPress · WooCommerce
PHP · Vanilla JS
RTL · Hebrew-native
Glassmorphism
SEO / GEO
10
independent modules
700+
live products · 80+ departments
100%
RTL Hebrew
0
paid plugins required
The brief
From generic template to a store worth returning to.
The goal wasn't a re-skin — it was a system. Every feature ships as an isolated, toggleable module with graceful fallbacks and no dependency on paid plugins. Disable any module tomorrow; the store keeps selling.
Before
A template fighting its own plugins
- ×Generic storefront — visually anonymous, slow to load
- ×Fresh produce forced into unit pricing
- ×Heavyweight filter & popup plugins stacked on top
- ×RTL as an afterthought — mirrored bugs everywhere
- ×No structured data, invisible to local search
After
One coherent, hand-built system
- ✓Bespoke design language across every template
- ✓True per-kilogram selling with a live weight slider
- ✓Filter, newsletter, carousels & popups — built native
- ✓RTL-first layout, carousels and interactions
- ✓GroceryStore schema + automated meta for every product
Signature capabilities
🧺
Smart Ready-Baskets
Eight curated bundles — Shabbat, BBQ, Breakfast, Monthly Staples and more. Per-item steppers, one-tap “add everything”, and stock-aware graceful skipping.
📋
Uniform Product Spec
One template for every product — kosher & dietary badges, full nutrition table, ingredients & allergens, provenance and packaging. Identical layout with or without data.
💎
Liquid-Glass UI
Forest-green & honey palette with orange reserved strictly for CTAs. Sticky glass header, live mega-menu, backdrop blur, and uniform product cards.
🔎
Faceted Filtering
Category · price · stock · promotions — server-rendered, RTL-aware, cache-friendly. Replaced a heavyweight third-party plugin outright.
💌
Cart Recovery in Hebrew
Abandoned-cart email sequences fully localized — live cart contents with product images, tuned timing, and tracked recovery performance.
📈
SEO / GEO Layer
GroceryStore LocalBusiness schema, rich product JSON-LD, automated meta & focus keyphrases for every product — including ones that don’t exist yet. GA4 + Search Console wired.
📨
Owned Marketing
Self-hosted newsletter with admin dashboard & CSV export, plus a true exit-intent popup — once per session, only on real exit. WhatsApp click-to-chat & floating cart.
📷
Catalog Data Ops
Removed 575 duplicate products from a bad import with zero downtime, cross-referenced a 7,334-row product dataset, and shipped a phone-camera barcode scanner for shop-floor enrichment.
Try it yourself
The two flagship interactions, rebuilt as live demos.
Faithful recreations of the production widgets — same logic, same RTL behavior, demo data only. Drag the slider. Tap the steppers.
⚖️ Sell-by-WeightLive demo
🥑 אבוקדו טרי
₪12.90 / ק״ג · מחיר הדגמה
0.5ק״ג
10 ק״ג0.5 ק״ג
סה״כ למשקל שנבחר₪6.45
Integer-gram math under the hood — zero floating-point drift in cart totals.
🧺 Smart Ready-BasketLive demo
🍞סל שבת5 פריטים · נתוני הדגמה
חלה מתוקה₪12 ליח׳2
יין לקידוש₪25 ליח׳1
מארז סלטים₪18 ליח׳1
עוף שלם טרי₪32 ליח׳1
סה״כ הסל₪99
In production: items resolve against the live catalog; out-of-stock lines skip gracefully.
Under the hood
Ten systems, one coherent whole.
Each capability lives in its own isolated unit — loaded independently, safe to disable, shipping its own assets.
01🏠Bespoke HomepageAurora hero, trust bar, produce carousel, ready-baskets, promotions, product grids, verified testimonial, newsletter.
02⚖️Weight PricingPrice/kg engine, live selector, cart & order integration on a uniform ½-kg standard.
03🧺Ready BasketsCurated bundles, per-item steppers, bulk add-to-cart, stock-aware skipping.
04📋Product Spec SheetKosher & dietary badges, nutrition table, ingredients & allergens, provenance — one uniform template for every product.
05🔎Product FilterFaceted, server-side, plugin-free filtering — category · price · stock · sale.
06📨Newsletter + Exit-IntentSubscriber store, admin dashboard, CSV export, one-time exit popup.
07💌Cart RecoveryHebrew abandoned-cart email sequences with live cart contents & product images.
08🔍SEO / GEOLocalBusiness + product schema, render-time meta automation, GA4 & Search Console.
09🎠Custom CarouselsDrag-to-scroll, arrow nav, snap scrolling — dependency-free vanilla JS.
10📷Barcode ToolkitPhone-camera HTML5 scanner, pick-list & fast-scan CSV workflows, product-data matching.
Architecture
// module-per-concern · load independently · disable safely theme/ ├── Core design system · assets · Woo wiring ├── Homepage composable, data-driven sections ├── Weight Pricing sell-by-weight engine (opt-in) ├── Ready Baskets curated bundles + bulk cart ├── Product Spec uniform spec-sheet template ├── Product Filter faceted server-side filtering ├── Newsletter capture · export · exit-intent └── SEO / GEO structured data + meta
🧱Isolated modulesNo cross-dependencies — disable any module, nothing else breaks.
🪶Zero heavy pluginsFilter, newsletter, carousels and popups built natively for speed and control.
♻️Graceful fallbacksEvery enhancement degrades safely — with
@supports safety nets for older browsers.🌍RTL-firstLayout, carousels and interactions mirror correctly — Hebrew is not a retrofit.
⚡Cache-awareAsset strategy engineered around aggressive edge caching with content-hash busting.
Field notes
Six decisions worth reading about.
weight-engine.note
Grams inside, kilograms outside
Prices are defined per kg, but all internal math runs in integer grams — eliminating floating-point drift in cart totals. Different weights of one product become separate cart lines via unique keys, and the per-kg price is snapshotted at add-to-cart time so later edits never corrupt an open cart.
carousel.note
Drag-to-scroll that works over links
Product cards are anchors wrapping images — native drag ghosting and navigation fight pointer capture. The fix: document-level mouse events with preventDefault, draggable=false, click suppression after drag, and snap disabled mid-drag. Buttery in RTL, on every browser tested.
caching.note
Surviving aggressive edge caching
The production host minifies and re-serves every asset under content-hash URLs. The theme leans into it: new files earn new hashes automatically, critical overrides ship in dedicated late-loading files, and @supports fallbacks keep old browsers from ever seeing broken glass.
seo.note
Meta for products that don’t exist yet
Descriptions and focus keyphrases generate at render time via filter hooks — not stored per product. Every future product inherits rich, localized meta the moment it’s published.
recovery.note
Un-corrupting a catalog with zero downtime
A bad CSV import spawned 575 duplicates overnight. Recovery ran date-scoped batch operations against the live store — trashing only the duplicates, verifying originals kept their images and categories, and cross-checking final counts. No downtime, no lost products.
barcode.note
A barcode scanner on the owner’s phone
Enrichment needed barcodes as a join key against a 7,334-row product dataset. Instead of hardware, the project shipped a self-contained HTML5 scanner — phone camera, live decode, local storage, CSV export — served over HTTPS so it works anywhere in the store. A later cloud-synced version is open source.
Identity
A design system that tastes fresh.
Forest green and honey over warm paper — with orange spent on exactly one job: the call to action.
Glassmorphism
Layered blur, hairline borders and light sheen across cards, header and overlays.
Uniform geometry
Product cards keep identical height, image framing and rhythm — whatever the content.
Considered motion
Aurora gradients, Ken-Burns hero, reveal-on-scroll — all behind prefers-reduced-motion.
The real thing
Screens from the live store.
Not mockups — actual captures from production. Fresh produce sold by the kilo, curated baskets, uniform spec sheets, and RTL faceted filtering.
Pocket-sized
Every pixel, mobile-first.
Hundreds of customers shop from a phone — so the phone came first. Hamburger nav, a full-bleed hero, a two-up trust bar, and touch-friendly carousels.
📱 Mobile homeReal capture at 360 px — RTL, fluid type, and a fully responsive layout.