OverGuard: Sportswear Shopify storefront
A fully custom Shopify theme, designed from scratch, with every feature built in rather than rented as an app.
- Role
- Custom theme, designed and built from scratch
- Timeline
- Under 7 weeks, 2026
- Type
- Custom Shopify storefront for an Egyptian sportswear brand
- Platforms
- Web, mobile first
Stack
The problem
OverGuard is an Egyptian sportswear brand with over 10,000 customers and counting. Its store had to carry the brand's look on phones first, treat cash on delivery as a first-class way to pay, and be built for both English and Arabic. A stock theme with the logo swapped in, propped up by a stack of monthly subscription apps, was never going to look or behave like the brand.
Shopify themes are slow to iterate on: a design question is cheaper to answer in a page you can reload than in a theme you have to push to the store, and once a theme renders real products there is nothing left to compare it against. We wanted the core pages designed and settled before any Liquid existed, and a measured way to prove the theme matched them rather than a review by eye.
Approach
Designed in a reference, ported to the pixel
We built the design first as a working reference: eight pages of hand-written HTML, CSS and JavaScript, assembled by a small Python build, with no framework. Questions like what an empty bag says, or where focus lands after a line is removed, were settled there. A Playwright harness then held the Shopify theme to that reference at zero pixel tolerance across 36 combinations of width, language, touch and pixel density, while a DOM comparison checked every node and every English and Arabic string. We proved the harness before trusting it: 20 full runs with zero flakes, and a 1px change to the corner chamfer caught. It found a self-hosted font that had silently lost its width axis, and a cart drawer that never opened in Arabic. Pushes got the same suspicion: Shopify's push command exits 0 even when the server rejects a file, so every push to the development theme runs through a wrapper that reads the error output and fails loudly.
A garment's facts live on the garment
A product page needs about twenty facts the product itself can't supply: fit, fabric, a measurement table, support zones, detail photos. The first build gave most of them shop-wide defaults, and the boxers page promptly described a compression tee, down to its fabric blend and chest chart. So the facts moved onto Shopify metaobjects edited in the admin: one spec sheet per garment, shared by every colourway instead of typed again for every colour, pointing at size charts and zone notes that matching garments share. The rule became that a default may describe the shop, never a garment, and a section with nothing true to say disappears rather than borrowing another product's numbers. Measurements were transcribed from the client's own size guides, and each table says whether it measures the body or the garment, because reading the wrong one sells the wrong size.
The bag is Shopify's real cart
The reference kept its bag in the browser, which is fine for a design and useless for selling. Making it real put Shopify's AJAX Cart API underneath while the drawer, bag page and badge stayed exactly as designed: only the four functions that owned the data changed. Real carts brought real problems. Each edit now renders twice, once optimistically and once when Shopify answers, and the second rebuild used to throw away keyboard focus, so focus is recorded before every rebuild and restored after it. Variant ids are 14 digits, and the bundle's integer shortcuts silently truncated them to 32 bits, producing a different id that still looked valid. And when the drawer gained a direct checkout button, a plain link could reach checkout before the add that opened the drawer had landed, so checkout now waits for pending cart writes, capped at 2.5 seconds.
Bilingual by contract
The storefront was built bilingual: each piece of interface copy has an English and an Arabic version, and the DOM comparison checks both, so Arabic can't be dropped quietly in a port. A small script in the page head applies the stored language before first paint, and right to left mirrors the layout, flips the angled corners and reverses the carousels. Shopify's own search returned nothing for Arabic queries on this store, so the search box matches as you type, in the browser, over a catalogue the server renders into the page, with a synonym table that maps Arabic words and their Arabizi spellings onto the catalogue's English terms. At the client's request, Arabic is switched off for shoppers for now. It sits behind one theme setting with nothing deleted, and turning it off also clears any stored Arabic choice, so nobody is left stuck behind a hidden toggle.
Outcome
OverGuard launched on 16 October 2026 at overguard.me, under seven weeks after the brief. The client runs it from the Shopify admin: the announcement ribbon, menu, campaigns, shop-the-look slides and every garment's facts are all editable without touching code, and there are no third-party subscription apps to pay for, update or work around.
Speed work stayed on the mechanisms: self-hosted fonts, with the two the first screen needs preloaded with the CORS attribute set so the browser never downloads them twice, width and height on every image the server renders, and a srcset ladder on the product cards, the galleries and most of the photographs, written out by hand because Shopify's image helper drops the larger widths. The Arabic layout is built and switched off at the client's request; one theme setting turns it back on once the product names and descriptions are translated.
Want something like this?
Tell us what you're building and we'll give you an honest assessment of scope, timeline, and cost.