Case study: e-commerce and 3D
A store where the bottle tells the story.
We designed, built and launched al-maharah.store, a scroll-animated WooCommerce store for a single-origin olive oil brand from Balochistan. It has been live for customers since 14 October 2026.
In-house venture. ZIRA's founder, Arsalan Nasar, is a co-founder of Al-Maharah. It's listed here because the build is ours end to end, not as an outside client engagement.
- Brand
- Single-origin olive oil from Loralai and Zhob, sold across Pakistan
- Platform
- WordPress and WooCommerce on a hand-written theme, no page builder
- Status
- Live since 14 Oct 2026
Phase two in development - Services
- Brand-led web design, 3D product animation, WooCommerce development, technical SEO, launch and migration
- Timeline
- September to October 2026
- Products
- Golden Legacy (extra virgin, Loralai) and Green Diamond (wild olive, Zhob), in 500 ml, 750 ml and 1 L
Follow the bottle
This is the actual 36-frame spin used on the store. The frames are pre-rendered and played from a single image, so the bottle stays sharp and the page stays light, with no live WebGL to slow a phone down.
On the store, the same idea runs through every page: instead of stacked boxes, the product itself carries the visitor through the story.
Drag the bottle or use the slider.
The challenge
Al-Maharah had outgrown its first website: a generic dry-fruit store on a bought theme, heavy with sliders and page builders. The brand had moved to two premium olive oils and needed a site as considered as the product.
Reposition the brand
From mixed dry fruits to single-origin olive oil, without throwing away the search traffic the old store had built.
Sell the story
Two regions, two colours, cold extraction and careful packing, told in the order a buyer needs them.
Win on phones
A phone experience with the same premium feel as desktop, not a shrunken copy of it.
Fit local commerce
Cash on delivery, delivery charged by weight, and pre-orders with a fixed dispatch date.
Rank on Google
For olive oil and zaitoon oil price searches in Pakistan.
Our approach
Research first, agree the look on a prototype, and only then build. Nothing went live until every page passed the final checks.
Research
Competitor and award-site teardowns; keyword research in Ahrefs.
Prototype
A desktop design and a separate phone design, approved together.
Theme build
WordPress and WooCommerce, tested locally at five screen sizes.
Staging
A private copy on the server; shipping and checkout tested end to end.
Launch
14 October 2026: full backup, move to the live domain, indexing on.
Audit
Every URL checked logged out; old plugins and media removed.
Design and 3D
Motion uses transform and opacity only, pauses off-screen, and falls back to a still for visitors who prefer reduced motion. All selling text is real HTML that search engines can read.
Desktop
- A 3D bottle that travels with the scroll, from the first screen into the collection.
- A 360° product spin built from 36 rendered frames.
- A calm, editorial layout in deep olive, sand and cream, with gold taken from the label.
Phone, designed on its own
- A first screen with a single bottle, and Shop and WhatsApp buttons within thumb reach.
- The two oils as one pinned scene: the bottle turns as you scroll, Loralai gold becomes Zhob green.
- A sticky bottle with numbered markers beside the scrolling product notes.
- Packing shown as a swipe rail, then a dark "Who we are" section with an Arabic watermark.
- A two-up shop grid where pre-order and sold-out tags never cover the bottle.
E-commerce, built into the theme
Every feature is written into the custom theme, so the store runs on WooCommerce with only a handful of plugins.
Size selector
500 ml, 750 ml and 1 L options with a live price on cards and product pages.
Pre-orders
A fixed dispatch date on photos, buttons, cart and schema, switching itself off after dispatch.
Stock states
In stock, pre-order and sold out, each with its own tag and button.
Delivery by weight
Standard and express rates calculated from bottle and packaging weight.
Cash on delivery
The only payment method, with a short checkout built for how Pakistani customers buy.
Product reviews
Star rating, rating bars, a review form, approval before publishing and a spam trap.
Packaging gallery
A "How your bottle is packed" slide showing the four protective layers.
Sticky buy bar
Price and Add to cart stay within reach while scrolling on phones.
WhatsApp ordering
One tap to chat from the first screen and the contact page.
Search and speed
- Keyword-led pages. Shop and product pages target olive oil price searches in Pakistan; a Zaitoon Oil Price page with an Urdu FAQ targets the Urdu name.
- Structured data. Organization; Product with per-size prices, stock or pre-order status, shipping, a 14-day return policy and ratings; plus FAQ, ItemList and breadcrumbs.
- Clean indexing. XML sitemap, robots.txt and descriptions on every page; cart, checkout and account pages kept out of Google.
- Old traffic handled. Retired dry-fruit URLs return 410 Gone; old demo pages redirect to their replacements.
- Speed. Lean custom code, WebP images, sprite-based 3D, page caching and phone-only styles loaded only on phones.
Launch and clean-up
- Full backup of the old live site.
- Staging moved to live with a backup-migration tool, links rewritten automatically.
- Post-launch audit of every page as a logged-out visitor: an old cache still serving the previous design removed, indexing switched on, and a template error on journal posts fixed.
- Clean-up: 18 unused plugins and 3 old themes removed, 149 unused images deleted, spam cleared, core plugins updated, a new brand favicon.
- Final check: all 28 URLs in the sitemap load correctly, each with a title, a description and one main heading.
Alongside the launch we delivered an Instagram kit: a branded post template, the first four posts with captions, a profile picture and highlight covers.
Where it stands
- One coherent brand across the website, product renders and Instagram.
- A phone experience designed as its own story, matching desktop in feel.
- Pre-orders opened at launch, with delivery by weight and cash on delivery working end to end.
- A lean site: a custom theme with only essential plugins.
- Product schema in place for price, stock, shipping, returns and ratings, with every page indexable.
Measured results (orders, conversion rate, organic clicks, top keywords and page-speed scores) will be added once there are 60 to 90 days of data. We don't publish numbers we haven't measured.
Phase two, in development. We're building an AI agent for the store that takes customer orders and answers WhatsApp questions. It isn't deployed yet; we'll describe it here once it's working for customers.
Tech stack
| CMS and store | WordPress, WooCommerce |
|---|---|
| Theme | Custom classic theme in PHP, HTML, CSS and plain JavaScript; no page builder |
| 3D and motion | Pre-rendered 36-frame product spins on canvas; scroll-driven animation with requestAnimationFrame |
| SEO | Yoast SEO plus custom JSON-LD schema, sitemap, 301 and 410 rules |
| Performance | W3 Total Cache, WebP images, phone-only asset loading |
| Email and backups | Easy WP SMTP, WPvivid Backup |
| Hosting | Hostinger |
| Research and QA | Ahrefs keyword research, Playwright screenshots at five screen sizes, logged-out URL checks |
Want a store like this?
Tell us what you sell and who buys it. We'll tell you honestly what we'd build, and what we wouldn't.