Prateek ChauhanLet’s build something

Real workE-commerce website + AI assistant

Swapex

A store that finds the exact AirPod you lost, and shows you how to pair it.

  • Whole site designed and built
  • AI assistant that answers from store policy
  • 3D product you open by scrolling
  • Scroll-driven pairing guide
Visit swapex.in Want something like this?
swapex.in
Swapex homepage section “Every part, genuine inside.” beside a 3D AirPods Pro case on a dark background.

I designed and built the whole Swapex storefront and its AI assistant. Customers find the exact replacement for their model, open a real 3D case by scrolling, follow a scroll-driven pairing guide, and get instant answers from the assistant.

My role
Design and development of the whole website, and the AI assistant
Built with
Shopify (Dawn 16 base) · Liquid · JavaScript · three.js · Chrome Prompt API

The problem

Lose one AirPod and Apple sells you a new pair. Swapex sells the single missing piece, but that only works if a customer can find the exact part for their model and trust that it will pair.

So the store has two jobs: get people to the right part fast, and make pairing feel easy before they even buy.

What’s on the site

The 3D AirPods Pro case with its lid open and both buds lifted.
01Scroll opens a real 3D AirPods Pro case.
Shop-by-part section with a model-number search box and left, right and case options.
02Shop by part, or search by model number.
Close-up 3D AirPod bud with “Take apart” and “X-ray” toggles.
03Take a bud apart, or switch to X-ray.
Pairing guide step one: a charging timer next to the case and a list of six steps.
04A six-step pairing guide that plays as you scroll.
Pairing guide step four with an iPhone Bluetooth settings mock showing “Forget This Device”.
05Each step shows the phone screen you will see.
Pairing guide step five: case open, “Connect” card shown, status “Connected”.
06And ends on the moment it connects.
Swapex Assistant chat panel answering the model number A3048 with the matching product.
07The assistant turns a model number into the exact part.
Swapex homepage on a phone.
08The same journey, designed for a phone first.

Under the surface

  1. 01

    One model, loaded once

    A single GLB of the AirPods Pro case is fetched by a shared loader and reused by the hero and the pairing guide. three.js is only requested when the section needs it, and pixel ratio is capped for phones.

  2. 02

    Fallbacks

    Sections pause offscreen, honour reduced-motion settings, and fall back to a static layout when WebGL is not available.

  3. 03

    A careful assistant

    Guided answers come from the store’s own policies and price list. Where the browser supports Chrome’s on-device model, free-text questions are answered within strict scope rules, and anything uncertain is handed to the team on WhatsApp.

Reels I made for Swapex

Swapex 2.0 launch reel · sound on

Pairing how-to reel · sound on

Want this for your business?

Talk on WhatsAppSend an enquiry