- Sites Shopify
Trouver la coque de son iPhone sans fouiller tout le catalogue
La boutique reconnaît l’iPhone du visiteur et s’ouvre sur les coques qui lui vont.
Le problème
Une marque de coques en paiement à la livraison au Maroc vend pour de nombreux modèles d’iPhone. Sur téléphone, choisir son modèle passait par 28 boutons sur un rail à faire glisser, coupé au bord de l’écran, et une coque commandée pour le mauvais modèle ne va pas au téléphone.
Ce que j’ai construit
Un accueil Shopify construit autour d’une question, « Ton iPhone, c’est lequel ? ». La page reconnaît le modèle à la taille de l’écran et s’en souvient, charge la grille des coques de ce modèle sans changer de page, et un tap sur une coque l’ajoute au panier. Quand l’écran correspond à plusieurs iPhone, la page demande lequel, avec des boutons assez grands pour ne pas se tromper.
Détails techniques
- Modèle détecté à la taille de l’écran, confirmé quand plusieurs iPhone la partagent
- Barre du modèle qui reste à l’écran sur mobile
- Fond animé en CSS pur, coupé en mouvement réduit ou en économie de données
- Chaque changement construit sur une copie de travail du thème en ligne
Stack
- Shopify (Liquid)
- JavaScript
- Shopify Admin API
- Python
- Playwright
Le résultat
Le visiteur voit les coques de son iPhone dès l’ouverture, sans liste à parcourir ; la détection, l’ajout au panier et la barre du modèle sont verrouillés par des tests de bout en bout.
Un projet similaire en tête ?
Parlez-moi de votre activité et de votre échéance. Vous recevez une proposition par email.