- Shopify stores
Finding the case for your iPhone without digging through the catalogue
The store recognises the visitor’s iPhone and opens on the cases that fit it.
The problem
A cash-on-delivery phone-case brand in Morocco sells cases for many iPhone models. On a phone, picking your model meant 28 buttons on a sideways rail cut off at the edge of the screen, and a case ordered for the wrong model does not fit.
What I built
A Shopify home built around one question, “Which iPhone is yours?”. The page recognises the model from the screen size and remembers it, loads the grid of cases for that model without leaving the page, and one tap on a case adds it to the cart. When a screen matches several iPhones, the page asks which one, with buttons big enough not to miss.
Technical details
- Model detected from the screen size, confirmed when several iPhones share it
- Model bar that stays on screen on mobile
- Animated background in pure CSS, off with reduced motion or data saver
- Every change built on a staging copy of the live theme
Stack
- Shopify (Liquid)
- JavaScript
- Shopify Admin API
- Python
- Playwright
The result
Visitors see the cases for their iPhone as soon as the store opens, with no list to scroll; detection, add-to-cart and the model bar are locked by end-to-end tests.
A similar project in mind?
Tell me about your business and when you need it. You get a proposal by email.