Alexandre Christie
Alexandre Christie's Indian store, rebuilt almost from scratch and run end to end: a new home page, every product page, a store locator with maps, launch pages for Black Forge and Cosmic, live 3D, SEO across 800+ products and the Meta ads.
My role: Rebuilt and ran the whole store: home page, product pages, store locator, launches, 3D, video, tracking, SEO and the Meta ads
alexandrechristie.in143
stores on a map-based locator, searchable by pincode, city or your location
30+
sections built for the store, from the home page to every product page
800+
product pages given a meta description and Product structured data, where none had either
154
pre-launch registrations for the Cosmic watch

01
The brief
Alexandre Christie sells watches in India online and through more than 140 stores, including shops at seven airports. Most of its watches are bought in a store, so the website has two jobs: feel like a premium watch brand, and send people to a store near them.
We rebuilt the site almost from scratch, throwing out the old store's basic code and designs. The team designs in Figma, often with separate desktop and phone comps, and I turned every design into working code, then kept building: the home page, every product page, the store locator, the launches, the tracking, SEO and the ads.
02
What I built
- The home page, designed at 1920 pixels and scaled as one piece to any desktop: a free-canvas hero, a curtain slideshow, editions and horology slideshows, a video hero, a mosaic gallery, a reviews carousel, and warranty and airport banners.
- Every product page, built by hand for each kind of product: watches with every colourway on one page (each with its own photos, specs and name), single watches, straps, winders and accessories, with a zoomable gallery, live stock on limited editions, EMI options, warranty and manufacturer details, and a Find a store link.
- Bespoke launch pages: Black Forge, a scroll-choreographed page with a fixed edition bar, and Cosmic, from a pre-launch registration page to a scroll-driven product page with live 3D crystals and a moon.
- A store locator with maps: every store on one OpenStreetMap map, searchable by pincode, city or name, sorted nearest-first from your location, with directions to each.
- An airport locator where a plane flies through fog to the next airport's map, a warranty banner with an endless strip of watches, and a warranty extension form.
- Reviews: 121 reviews and 26 review videos moved into Judge.me, shown in a home carousel and on each product page with the rating, a star breakdown and customer photos.
- SEO across the whole site: crawlable product information, a meta description and Product structured data on every product page, one H1 per page, canonical links, breadcrumbs with structured data, crawlable pagination and collection introductions.
- Speed: the home page's weight on load cut by more than half, with self-hosted fonts, subset icon fonts, and video and scripts that wait until they are needed.
- Tracking: GA4 and Meta events for store-locator clicks, registrations and purchases, with browser and server events matched so nothing counts twice.
- The Meta ads: launch campaigns for Black Forge and Cosmic, a purchase campaign with audiences built from site visitors, shoppers and buyers, winder ads, a product catalogue, one tracking template on every ad, and the reports behind them.
- 3D and video: six crystals and a moon modelled in Blender for Cosmic, a 4K studio roto and a graded unboxing montage.
7
product page templates, one for each kind of product, plus bespoke pages for Black Forge and Cosmic
54%
lighter home page on load: 18.09 MB down to 8.25 MB
121
customer reviews moved over, with 26 review videos converted for the web
368
changes logged in the store's technical record since 31 May
03
How I did it
Start again, not patchMay and June 2026
The catalogue was exported in full first, including the per-colour data Shopify's own export silently drops, so colour siblings can be combined into one product page without losing their specs. The new theme was built on sections of our own, and the rebuilt store went live on 8 June.
A home page drawn once, shown everywhere
The home page is designed at 1920 pixels. Instead of reflowing it at every width, the whole page scales with CSS zoom above tablet size, so every desktop sees the layout the designer drew, and phones get each section's own layout. Background video was the heaviest thing on it, so it now loads only as it scrolls into view: 18.09 MB on load became 8.25 MB.
Product pages, built by handJune 2026
Each watch page shows the chosen colour's own photos (its main image plus that colour's gallery) with a full-screen zoom, swipe on phones, live stock on limited editions, EMI from both payment partners, and the warranty and manufacturer details. Single watches, straps, winders and accessories each have a template of their own, so every product reads the way it should.
A store locator people can useJuly 2026
The old locator stacked 25 city sections, and searching for Delhi only filtered the first one. I replaced it with one map: 124 stores geocoded from their pincodes and localities, since none had coordinates, clustered on OpenStreetMap with no API bill, a list that filters as you type, nearest-first from your location, and directions for each store. It now lists 143 stores, and a Find a store link on every product page is tracked as its own event.
Black Forge: timing derived, not copiedAugust 2026
Its sections hand off to each other in a choreographed scroll. When that timing was kept in step by hand it drifted five times, so now each section publishes its exit length and the next one reads it at runtime. Every change to the page is logged in a technical record that runs past 230 rows.
Reviews that actually load
121 reviews were cleaned into Judge.me's import format, and 26 review videos were converted for the web and hosted on Cloudinary, with a QA page to check each one. The storefront can't call Judge.me's API directly, so the home carousel reads the review data Judge.me keeps on each product instead.
Cosmic, from waiting list to launchSeptember 2026
The pre-buzz page is generated from a static prototype by a build script, so markup and Liquid never drift. The product page was built from the desktop comp, then every section got a phone layout from its own comp while desktop was checked pixel for pixel: zero difference. Crystals have per-vertex thickness baked in so light passes through them like glass, and the moon comes from NASA's lunar topography, cut from a 299 MB source to web sizes. It went live on 25 September.
The studio rotoSeptember 2026
1,216 frames of 4K, 60 fps footage, with only the model kept. BiRefNet HR matting ran in half precision on Apple silicon, about 5 times faster than full precision. The director was removed with tracked masks, a screen-colour key caps the matte, and flicker was measured as pixels that move and move back, then cut to about a fifth of the first version over several client review rounds.
Warranty and airports, from the Figma fileOctober 2026
The warranty banner's watches were cut out of their white packshots with BiRefNet, with strap reflections removed so they float cleanly. The airport locator runs a camera flight: push in, a fog that closes and reopens, then the plane lands on the next airport's runway line. Its timing is a setting the team can tune, and the locator covers all seven airport stores.
SEO, item by itemOctober 2026
An SEO checklist was worked through one item at a time, each checked against the raw HTML Google fetches. No product page had a meta description or Product structured data, so all 800+ now carry both, merged with the review rating Judge.me adds. Every page got one H1, canonical links, breadcrumbs with structured data, crawlable pagination and, on collections, an introduction that links to the buying guides. Mobile Lighthouse scores of 28 to 48 led to self-hosted fonts, subset icon fonts and deferred scripts.
Ads that follow the shop
Most watches are bought in a store, so the Meta account was built around that: launch campaigns for Black Forge and Cosmic, a purchase campaign with audiences from site visitors, shoppers and buyers, winder ads, a catalogue, and one tracking template on every ad. Reports count Find a store clicks next to online orders, and the Cosmic pre-launch campaign brought in 154 registrations before it went on sale.
Grade in code
For the unboxing montage, SAM 2 tracks each dial through every shot so only the dial gets a softer black point, with a per-cut lift so darker sections match the accepted close-ups and the audio copied bit for bit.
04
What it changed
Stores in an area (bubble size = count)Airport store (7)
Show as a table
| Area | Stores | At an airport |
|---|---|---|
| Mumbai | 53 | 1 |
| Hyderabad | 16 | 1 |
| Delhi | 9 | |
| Bangalore | 9 | 1 |
| Odisha | 5 | |
| Chennai | 5 | |
| Pune | 4 | |
| Surat | 3 | |
| Uttar Pradesh | 3 | 1 |
| Andhra Pradesh | 3 | 1 |
| Nashik | 2 | |
| Ahmedabad | 2 | |
| Tamil Nadu | 2 | |
| Andhra Pradesh | 2 | |
| Andhra Pradesh | 2 | |
| Tamil Nadu | 2 | |
| Ahmednagar | 1 | |
| Vapi | 1 | |
| Raigad | 1 | |
| Pune | 1 | |
| Vadodara | 1 | |
| Rajkot | 1 | |
| Punjab | 1 | |
| Uttar Pradesh | 1 | |
| Uttar Pradesh | 1 | |
| Tamil Nadu | 1 | |
| Tamil Nadu | 1 | |
| Andhra Pradesh | 1 | |
| Bangalore | 1 | |
| Mysore | 1 | |
| Madhya Pradesh | 1 | |
| Chhattisgarh | 1 | |
| Guwahati | 1 | 1 |
| Mangalore | 1 | 1 |
| Dehradun | 1 | |
| Bharuch | 1 | |
| Jaipur | 1 |
143 stores from the store locator's own data. The outline is Natural Earth's India point-of-view boundary, so the map shows India as India defines it. Hover a bubble for the area, or a violet dot for the airport store.
143
stores on one searchable map, where 25 city sections had a search that only worked on the first
54%
lighter home page on load, after video was made to wait until it scrolls into view
800+
product pages that search engines can read in full, with Product structured data
154
people registered for Cosmic before it went on sale
Alexandre Christie now has a store that looks like the brand: every product on a page built for it, launches on pages of their own, a map that sends shoppers to the nearest of 143 stores, real reviews and videos, and product data search engines can read, on a theme the team can keep tuning from the editor.
05
Inside this entry
Alexandre Christie's Indian store, rebuilt almost from scratch and run end to end: a new home page, every product page, a store locator with maps, launch pages, tracking, SEO and the Meta ads.
- Rebuilt almost from scratch, with the old store's basic code and designs thrown out; the new store went live on 8 June 2026
- Home page designed at 1920 pixels and scaled as one piece: free-canvas hero, curtain slideshow, editions carousel, mosaic gallery and a reviews carousel fed from Judge.me metafields
- Every product page built by hand: colourways on one page with their own photos, specs and names, plus templates for single watches, straps, winders and accessories
- Store locator with maps: 143 stores on OpenStreetMap, searchable by pincode, city or your location, with directions to each
- Warranty banner with an endless watch strip, and an airport locator where a plane takes off through fog and lands on the next airport's map
- SEO across 800+ product pages, GA4 and Meta custom pixels, and the Meta ads


A pre-launch registration page and a bespoke, scroll-driven product page for Alexandre Christie's Cosmic watch, built from separate desktop and phone comps.
- 154 pre-launch registrations from the pre-buzz campaign (Meta), before the product page went live on 25 Sep 2026
- Pre-buzz page generated from a static prototype by a build script, so markup and Liquid never drift apart
- Moon swatches drive the variant, and each picture is fitted to its own visible area
- Pinned four-step build-up and an exploded watch that parks, holds, then scrolls sideways
- Floating 3D crystals rendered with three.js only while on screen
- Phone layouts built from the mobile comp without moving desktop by a single pixel



A scroll-choreographed product page for the Black Forge watch: hero, specs, reveal, materials and motion, with a fixed edition bar.
- Timing between sections is derived at runtime: each section publishes its exit length and the next one reads it
- Phone hero scales one-to-one from a single design unit
- Every change logged in a technical record that runs past 230 rows

Moved Alexandre Christie's customer reviews, photos and videos into Judge.me.
- 121 reviews cleaned into Judge.me's import format
- 26 review videos converted for the web and hosted on Cloudinary
- A QA page to check every review before import
Background removal for watch packshots on white that handles what one-click tools get wrong: floor reflections, crown-guard gaps and polished highlights.
- BiRefNet HR matting on Apple silicon, then a finishing pass that removes the strap's reflection
- Enclosed openings stay see-through and polished highlights stay solid
- Used for the watch strip in Alexandre Christie's warranty banner

Six crystal models and a 3D moon for the Cosmic launch, modelled in Blender and rendered live in the browser.
- Per-vertex thickness baked into the crystals so light attenuates through them like real glass
- Moon built from NASA's lunar topography, cut down from a 299 MB source to web sizes
- GLB optimisation recipe tuned so six named crystals are never fused into one mesh
- Rendered only while on screen, one still frame under reduced motion, and an image fallback without WebGL2

Isolated a model from a 4K, 60 fps studio take (1,216 frames) onto clean green, removing the director, light stands, cables and floor.
- BiRefNet HR matting in fp16 on Apple silicon, about 5x faster than full precision
- A screen-colour key caps the matte; the director is removed with tracked masks
- Flicker measured as pixel oscillations and cut by about 5x from the first version
- Six versions against client feedback, with a hole scanner run on every render

Three looks for a 60-shot unboxing montage, then the client's pick, with the dials brightened shot by shot.
- SAM 2 video segmentation tracks each dial, so only the dial gets a softer black point
- A per-cut lift so a dark section matches the accepted close-ups
- Encode matched to the source, with the audio copied bit for bit
