Baloma
Custom Zid theme for a Saudi e-commerce brand. RTL by default, faster product pages, cleaner checkout, every block configurable from the merchant dashboard.
About the project.
Baloma is a Saudi e-commerce brand running on the Zid platform, and the existing themes were neither fast enough nor flexible enough for what they wanted to sell. I built a custom theme from scratch in Liquid and Tailwind: RTL by default, faster product pages, a cleaner checkout, and every block configurable from the merchant dashboard so the team can re-arrange a landing page during a campaign without asking me.
What changed.
increase in checkout conversion
from kickoff to launch
What we walked into.
A Saudi e-commerce brand on Zid wanted a theme that was fast, RTL by default, and configurable from the merchant dashboard so the team could re-arrange a landing page during a campaign without engineering help.
What we did.
Custom Zid theme from scratch in Liquid + Tailwind. RTL-first layout, cleaner checkout, every block exposed as a Zid Section so merchants can re-order in the dashboard.
What it became.
Faster product pages, cleaner checkout, merchant-editable landing blocks.
My role on this project.
Solo · 100% — design + Liquid templating + Tailwind config + Zid Section model. Brand supplied identity + product photography; everything technical is mine.
Theme engineer (Zid)
Liquid templates for product, collection, cart, checkout. Zid Sections schema so merchants edit landing blocks live.
Designer (RTL-first)
RTL-first layout pass on every page. Arabic typography (Tajawal) primary, English secondary.
Performance engineer
Hand-tuned for mobile-first; lazy-loaded media; checkout under 3 round-trips.
The numbers that matter.
- RTL-firstDesign languageLayout designed in Arabic; English is the mirror — not the other way around.
- LiveMerchant landing editsZid Sections let the brand re-order blocks during a campaign without redeploying.
- <2.5sMobile product pageSaudi 4G; one of the faster Zid themes in the catalog.
- 0Custom JS frameworkVanilla JS + Tailwind only. Theme weight under 80KB JS.
What was actually broken.
Zid's default themes were either slow or rigid. A growing Saudi e-commerce brand needs to launch campaigns weekly — landing page tweaks, hero swaps, urgency banners — without filing a ticket. The brief: build a theme where the brand owns the landing surface entirely from the Zid dashboard, but the developer-controlled foundations (cart, checkout, product detail) stay performant.
The hard surface area.
- 01Zid Section schema for every reusable block (hero, product strip, testimonial, banner, video).
- 02RTL-first layout that does not feel like an LTR theme mirrored.
- 03Performance on KSA mobile networks (Zid's default themes can be 200KB+ JS).
- 04Checkout flow under Zid's constraints (some fields are platform-mandated and immovable).
Engineering wins worth naming.
Zid Sections schema design
Every brand-editable block is a Zid Section with typed settings (text, image, color, link, repeater). Merchant gets a structured editor; theme code reads a single Liquid object per block.
Arabic typography defaults
Tajawal as primary face, line-height tuned for Arabic (1.85 body), tabular nums for prices, proper handling of right-to-left price brackets (SAR 99 vs. 99 ر.س).
How the system is wired.
Zid hosted platform
Custom theme tier
The decisions behind each choice.
Zid (platform)
- KSA-native e-commerce platform with Mada + STC Pay integrations out of the box.
- PCI scope held by Zid — merchant + theme never touch card data.
- Section schema gives merchant editability without theme redeploys.
Vanilla JS over framework
- Theme weight matters more than developer convenience for a storefront.
- Zid Sections + Liquid handle most interactivity; the small remainder is 20 lines of vanilla JS.
What the build taught us.
- Section schemas are the cheat code for merchant-editable themes. Design the editing surface as you design the visual surface.
- RTL-first is a design decision, not a CSS toggle. Layout in Arabic, then ensure English mirrors cleanly.