Site e-commerce, marque de sport

Hijab Motion

Hijab Motion est une marque de hijabs de sport à laquelle je suis associé : je m'y occupe du site et de la boutique. Le site e-commerce, refait en septembre 2026, garde son propre design et confie le catalogue, le panier et le paiement à Shopify. Il vend en précommande, avant que l'usine ait livré.

  • Site e-commerce
  • Shopify headless
  • Précommande
Site Hijab Motion (site e-commerce, marque de sport) réalisé par Kawn Studio

En bref

Marque
Hijab Motion, hijabs pour faire du sport
Mon rôle
Associé, je m'occupe du site et de la boutique
En ligne depuis
septembre 2026
Pages
Accueil, catalogue, fiches produit, panier, compte client, blog, contact, pages légales
Réalisé par
Kawn Studio, Nabil Aoulad Sbaa
Outils
React, TypeScript, Shopify (headless), three.js (fond tramé), Framer Motion, Brevo, Boxtal

Shopify pour vendre, un site à la marque

Hijab Motion conçoit des hijabs pour faire du sport voilée. Sa ligne tient en une phrase : le sport est un droit, pas un privilège. La marque est née d'une idée de Lyad Bouali, qui en gère le marketing, la communication et la conception du produit. Je suis associé au projet, et je m'occupe du site et de la boutique en ligne.

La boutique tourne sur Shopify, en headless : Shopify gère les produits, le panier, les comptes et le paiement, et le site, construit à part, garde son propre design. En septembre 2026, on a gardé le nom et les couleurs de la marque, et j'ai refait la direction artistique du site. Il est en ligne depuis ce mois-là.

Vendre avant d'avoir le stock

Les hijabs se vendent en précommande : on paie à la commande, le colis part quand l'usine a livré. La précommande vit dans les fiches produit, le panier et les conditions de vente, qui disent tous quand le colis part et jusqu'à quand il peut arriver. Elle s'ouvre ou se ferme d'un seul réglage.

Ce réglage a servi dès le lendemain. La précommande a ouvert le 18 septembre 2026, et le 19, l'usine a décalé sa livraison sans donner de date. On a fermé la boutique dans la journée et retiré toutes les dates du site. Elle a rouvert le 24 octobre, en série limitée à 150 hijabs : expédition début décembre, livraison au plus tard le 24 décembre.

Ne promettre que ce que dit la fiche technique

Quand le site est sorti, personne n'avait encore porté le hijab. Aucun avis client n'était donc possible. La preuve est venue de la communauté de la marque, réunie dans un groupe WhatsApp, à qui on a demandé ce qui la gênait avec un hijab classique pendant le sport. Le site cite trois réponses, avec l'accord de leurs autrices, et chaque réplique reprend la fiche technique transmise par Lyad.

La règle vaut pour tout le site. La fiche dit « déperlant », pas « respirant » : j'ai retiré le mot partout, jusque dans le nom des produits sur Shopify. Une gêne à laquelle la fiche ne répond pas n'apparaît pas dans la conversation.

Les temps forts du site

  1. Accueil du site Hijab Motion : le titre « Nées pour bouger », la précommande ouverte et le bouton « Choisir mon hijab ».

    Nées pour bouger

    Le titre de l'accueil, « Nées pour bouger », parle aux femmes que la marque vise au féminin. Dessous, une phrase dit le produit, une autre dit que la précommande est ouverte et quand le colis arrive. Un seul bouton, « Choisir mon hijab », mène au catalogue. En haut, un bandeau défile et rappelle la série limitée.

  2. Les produits sur l'accueil de Hijab Motion : hijab noir, Pack Duo et hijab bleu marine, marqués « Précommande ».

    Les produits, dès le premier défilement

    Les produits arrivent juste sous l'accueil. En septembre, je les ai remontés au-dessus du reste, pour qu'on les voie dès qu'on commence à descendre. Trois cartes, le noir, le Pack Duo et le bleu marine, portent chacune l'étiquette « Précommande ». Une phrase dessous résume la gamme : deux coloris, à l'unité ou en pack, taille unique.

  3. Le manifeste de Hijab Motion en trois phrases, entre deux bandes bleues.

    Le manifeste, en trois phrases

    Le manifeste de la marque tient en trois phrases, dont « Le sport est un droit, pas un privilège ». Il occupait une section collante de plus de deux écrans de défilement : je l'ai ramené à une section ordinaire. Les phrases apparaissent une seule fois, entre deux bandes bleues, et la page reprend aussitôt.

  4. Conversation de groupe sur le site Hijab Motion : les gênes citées par la communauté et les réponses de la marque.

    Les mots de la communauté

    La marque a demandé à sa communauté ce qui la gênait avec un hijab classique pendant le sport. Trois réponses sont mises en scène comme une conversation de groupe : « l'ajustement fréquent », un hijab « lourd », un look « pas toujours très esthétique ». Chaque message reçoit sa réponse, tirée de la fiche technique.

  5. Section produit de Hijab Motion : quatre points sur l'image du hijab, le maintien arrière détaillé à droite.

    Le hijab, point par point

    Quatre points sont posés sur l'image du hijab : maintien arrière, tissu, coupe, logo. Au survol d'un point, son détail s'ouvre dans la liste d'à côté, et l'inverse. Au téléphone, la liste devient une rangée de cartes qui défilent au doigt, et la carte visible allume son point sur l'image.

  6. Catalogue de la boutique Hijab Motion : le titre, le paragraphe d'introduction et les premières cartes produit.

    Un catalogue qui répond d'abord

    La page du catalogue s'ouvre sur un paragraphe qui répond aux questions d'avant l'achat : les deux coloris, l'unité ou le pack, la matière, le maintien, la taille. Derrière le titre ondule le fond tramé animé du site. Dessous viennent tous les produits, puis trois questions de la FAQ : coloris, matière, disponibilité.

  7. Fiche du Pack Duo sur la boutique Hijab Motion : choix de la composition et bouton « Précommander ».

    Le Pack Duo, à composer

    Le Pack Duo contient deux hijabs, et la cliente choisit les deux : noir et noir, bleu et bleu, ou un de chaque. Chaque choix montre deux pastilles de couleur suivies de leur nom écrit : en petit, le noir et le bleu marine se confondent. Au-dessus du bouton « Précommander », un encart rappelle la série limitée et l'expédition.

  8. Blog de Hijab Motion : le titre de la page et un premier article.

    Un blog qui ramène à la boutique

    Le blog répond aux questions qu'on se pose quand on fait du sport voilée, par exemple comment garder son hijab en place. Les articles s'écrivent dans Shopify et le site les lit en direct. Chacun finit sur un encart vers les produits. Partagé dans une conversation WhatsApp, un lien d'article affiche son titre et son image.

  9. FAQ de l'accueil de Hijab Motion : les questions sur la taille, la matière, le maintien et l'entretien.

    Une FAQ écrite une fois

    Les questions sont formulées comme on les chercherait, par exemple « Le hijab reste-t-il en place pendant le sport ? » Chacune est écrite une seule fois. L'accueil les montre toutes, le catalogue et les fiches produit seulement celles qui les concernent : la taille, le maintien et l'entretien sur une fiche. Une réponse corrigée l'est partout.

  10. Accueil de Hijab Motion sur téléphone : le visuel en haut, le titre et le bouton en bas.
    Fiche du Pack Duo sur téléphone : la photo du produit, les vignettes de la galerie, le nom et le prix.

    Au téléphone

    Au téléphone, l'accueil a sa propre composition : le visuel en haut, le titre et le bouton en bas, à portée du pouce, sur le fond tramé animé. Le bouton prend toute la largeur. Sur une fiche produit, la photo prend toute la largeur et la galerie défile en vignettes juste en dessous, avant le nom et le prix.

Ce que la marque gère sans développeur

Les produits, leurs prix, leurs descriptions et leurs visuels se changent dans Shopify, et le site les affiche tels quels. Les articles du blog s'écrivent aussi dans l'administration Shopify, y compris depuis l'application sur téléphone : le site les lit en direct, sans mise en ligne à lancer. Lyad peut publier un article sans passer par moi. Une seule chose attend la mise en ligne suivante : l'entrée d'un nouveau produit dans le plan du site envoyé à Google.

  • Les produits : prix, descriptions, visuels, compositions des packs
  • Les articles du blog, avec leur titre et leur description pour Google
  • Les codes de réduction

Ce que j'ai livré

  • La direction artistique du site, refaite en septembre 2026 avec le nom et les couleurs de la marque
  • Les visuels du haut de page et des produits
  • Le site e-commerce, en code sur-mesure, relié à Shopify en headless : catalogue, fiches produit, panier, compte client, paiement
  • La précommande en série limitée : compteur des pièces restantes, ouverture et fermeture d'un seul réglage, conditions de vente adaptées
  • La livraison choisie dans le panier : point relais ou domicile, en France, en Belgique, au Luxembourg et en Suisse
  • Les codes de réduction de la communauté
  • Le blog, écrit dans Shopify, et la FAQ, écrite une fois et reprise page par page
  • La collecte d'e-mails, reliée à Brevo
  • Le référencement de chaque page : titre, description, aperçu au partage, données produit pour Google
  • Les pages légales de la boutique : CGV, livraison et retours, confidentialité, cookies

Un lancement à préparer, ou un produit à vendre avant de l’avoir en stock ? Une page de précommande se construit comme une landing page. C’est ce dont on parle pendant les 30 minutes de l’appel découverte.

Réserver mon appel · Une page de lancement, construite comme une landing page · Une autre page à une seule action : Nova Créa

Sois là quand tes clients te cherchent.

Trente minutes, gratuites, pour savoir ce qu'il te faut. Le devis suit sous 24 h, et ton site est garanti trois mois après sa mise en ligne.