PUNISHMENT PARIS
REFONTE DU SITE E-COMMERCE SHOPIFY, UX/UI ET RÉFÉRENCEMENT NATUREL
CLIENT
PUNISHMENT PARIS
LIEU
PARIS (75), ÎLE-DE-FRANCE
CATÉGORIE
E-COMMERCE SHOPIFY, UX/UI & SEO
UNE MARQUE FORTE, UNE VITRINE MUETTE
Punishment est une marque parisienne de vêtements homme née d'un label de musique électronique : cuirs, chemises, tracksuits et manteaux, fabriqués dans des ateliers parisiens à partir de tissus issus de stocks dormants. Son site Shopify montre des images remarquables, mais il ne présente aucun produit sur l'accueil et ne donne presque aucun signal à Google.
J'ai construit un dossier de refonte complet : audit de l'existant, direction UI, nouvelle architecture, quatre maquettes cliquables (accueil, collection, fiche produit, panier) et une feuille de route en trois phases sur douze semaines.
Le cœur du travail porte sur le référencement naturel : titres de page, méta-descriptions, ancres d'URL, champs méta produits et catégories, données structurées et suivi dans Google Search Console, pour que chaque page s'affiche proprement dans l'aperçu des moteurs de recherche. Le projet est mené depuis mon studio de graphiste à Issy-les-Moulineaux, aux portes de Paris.
Voir le site de Punishment Paris · Ouvrir le dossier de présentation
LE PROJET
Faire du site l'équivalent d'une sortie de label : chaque pièce présentée comme un morceau, une boutique qui vend dès le premier écran, et des pages que Google comprend.
Rien n'est à inventer : les photos, l'histoire des collections et les engagements existent déjà. La refonte les met en ordre, pour le client comme pour les moteurs de recherche.
SERVICES
- Audit UX/UI et SEO de la boutique Shopify
- Direction UI, palette et composants
- Architecture et méga-menu
- Quatre maquettes HTML cliquables
- Titres, méta-descriptions et ancres d'URL
- Champs méta produits et catégories
- Données structurées et Google Search Console
Ce qui freinait le site
Relevé effectué le 2 novembre 2026 sur l'accueil, la page Collections, la page Histoire et le catalogue public de la boutique. Chaque constat a reçu une réponse dans la refonte.
- SEOTitres génériquesAccueil « Punishment Paris », Histoire « About » (en anglais sur un site français), Collections « Collections ». La seule description est og:description « Punishment Paris ».
- SEOLibellés et URL qui se contredisent« Blousons » mène à /collections/accessoires, « Manteaux » à /jackets, la carte automne-hiver 2026 ouvre /ah25-26.
- SEOImages sans texte alternatifLes trois images du diaporama et 5 des 9 vignettes de la page Collections n'ont pas d'attribut alt.
- SEOCollections sans texteUne grille d'images sans paragraphe : rien à indexer pour « blouson cuir homme » ou « chemise selvedge ».
- UXUn accueil qui ne vend rienUn diaporama de trois photos sans titre, sans texte ni bouton. Aucun produit, aucun prix.
- PerfHéro servi en 3 840 pxUn poids qui pénalise le premier affichage mobile (LCP), un critère suivi par Google.
Le premier écran, avant et après
Faites glisser la poignée pour comparer l'accueil actuel et la proposition. Mêmes photos, autre hiérarchie : un titre, un bouton, des engagements dans le bandeau et quatre pièces visibles avant tout défilement.






Actuel
- Diaporama plein écran sans message
- Menu à 13 entrées masquées
- Promotion −30 % sans contexte
- Aucun produit, aucun prix
Proposé
- Titre H1 et bouton vers la collection
- Bandeau de réassurance tiré des engagements
- Navigation en trois mots
- Quatre pièces visibles avant tout défilement
Photos © Punishment Paris, campagne © Hugo Comte, chargées depuis la boutique punishmentparis.com.
L'aperçu sur les moteurs de recherche
C'est la première image de la boutique pour un client qui ne la connaît pas encore : le titre bleu, l'adresse et deux lignes de description dans Google. Dans Shopify, tout se règle dans le bloc « Aperçu sur les moteurs de recherche » de chaque page. Comparez l'avant et l'après, puis modifiez les champs pour voir le résultat en direct.
Les longueurs suivent les repères habituels : environ 60 caractères pour un titre et 155 à 160 pour une méta-description avant que Google ne coupe. Le moteur reste libre de réécrire un titre ou un extrait qu'il juge peu pertinent : c'est justement ce qui arrive quand ces champs sont vides ou génériques.
Titres de page et méta-descriptions
Un gabarit par type de page, pour que les 23 fiches et toutes les collections suivent la même règle : la famille de produit, la matière, « homme », puis le nom de la marque. Chaque page vise une requête précise sans dénaturer le ton de la marque.
| Page | Titre actuel | Titre proposé | Méta-description proposée |
|---|---|---|---|
| Accueil | Punishment Paris | Punishment Paris | Vêtements homme créateur fabriqués à Paris | Marque née d'un label électronique : cuirs, chemises, tracksuits et manteaux fabriqués dans des ateliers parisiens à partir de stocks dormants. |
| Collection | Cuirs | {Famille} homme | Punishment Parisex. « Blousons et pantalons en cuir homme » | {Nombre} pièces en cuir de vachette et d'agneau plongé, coupées à Paris. Livraison offerte en Europe. |
| Produit | Rider cuir noir | {Type} {Nom} en {matière} {couleur} | Punishment Paris | Les 150 premiers caractères de la description, puis le prix et « livraison offerte en Europe ». |
| Histoire | About | Notre histoire, née d'un label électronique | Punishment Paris | Deux créateurs rencontrés chez Jean-Paul Gaultier, un vestiaire masculin entre musique, scène et rue. |
| Requête à viser | Page cible | Levier |
|---|---|---|
| blouson cuir homme créateur | Collection Cuirs | Titre, texte de collection, alt des images |
| pantalon charpentier cuir homme | Fiche Chermès | Titre produit et champ méta « matière » |
| chemise selvedge homme | Fiche Redline | Titre produit et description enrichie |
| survêtement nylon imprimé homme | Collection Tracksuit | Titre, introduction et bloc éditorial |
| marque vêtement homme fabriqué à Paris | Accueil, Fabrication | H1 textuel, engagements, données Organization |
| mode homme stocks dormants | Engagements | Page dédiée et maillage depuis les fiches |
Pistes à valider avec les données de Search Console et un outil de volumes de recherche avant la rédaction finale.
Ancres d'URL et redirections 301
Une nomenclature unique en français : le libellé du menu, le titre de la page et l'ancre d'URL disent la même chose. Chaque ancienne adresse est redirigée en 301 pour conserver les liens et l'historique acquis auprès de Google. Dans Shopify, la case « Créer une redirection d'URL » le fait au moment où l'on modifie l'ancre ; les autres se saisissent dans Contenu › Menus › Redirections d'URL.
| Libellé | Ancienne URL | Nouvelle URL |
|---|---|---|
| Blousons | /collections/accessoires | /collections/blousons |
| Accessoires | /collections/accessoires-1 | /collections/accessoires |
| Manteaux | /collections/jackets | /collections/manteaux |
| Chemises | /collections/shirts | /collections/chemises |
| Pantalons | /collections/pants | /collections/pantalons |
| Pulls | /collections/jersey | /collections/pulls |
| Automne-hiver 25/26 | /collections/ah25-26 | /collections/automne-hiver-25-26 |
| Printemps-été | /collections/ss-24 | /collections/printemps-ete-volume-one |
| Notre histoire | /pages/lhistoire | /pages/notre-histoire |
Ordre de mise en place : libérer d'abord accessoires (renommé blousons), puis renommer accessoires-1 en accessoires, sans quoi Shopify refuse l'ancre déjà prise.
Champs méta produits et catégories
Les champs méta (métachamps Shopify) donnent à chaque produit et à chaque collection des informations structurées : elles nourrissent les titres, les filtres de l'app Search & Discovery, les textes de collection et les données structurées lues par Google.
Produits
Renseignés sur les 23 pièces, en commençant par la catégorie standard Shopify et le type de produit, aujourd'hui vides.
Catégories (collections)
Chaque collection devient une vraie page d'atterrissage, avec ses propres textes et son propre aperçu dans Google.
Google Search Console
Les correctifs SEO n'attendent pas le nouveau thème : ils se font dans l'administration Shopify actuelle, et Search Console permet de mesurer leur effet pendant toute la refonte.
- Relever le point de départPropriété de domaine vérifiée, export des requêtes, des pages et du taux de clics avant toute modification.
- Soumettre le sitemapShopify génère
/sitemap.xml: il est soumis dans Sitemaps, puis chaque page refaite passe par « Inspection de l'URL ». - Surveiller les redirectionsRapport Pages : aucune 404 après le changement des ancres d'URL, anciennes adresses bien remplacées dans l'index.
- Suivre les requêtes hors marqueRapport Performances filtré sur les requêtes qui ne contiennent pas « punishment » : c'est le vrai indicateur du travail SEO.
- Valider les données structuréesRapports Extraits de produits et Fils d'Ariane : prix, disponibilité et livraison lus sans erreur.
- Contrôler les Core Web VitalsLCP mobile sous 2,5 s sur l'accueil et les collections, grâce aux images servies de 640 à 2 400 px.
Données structurées
Elles transforment un simple lien bleu en résultat enrichi : prix, disponibilité et livraison offerte s'affichent directement sous le titre. Organization sur l'accueil, Product sur chaque fiche, BreadcrumbList sur les collections et les produits. Un H1 textuel unique par page et un texte alternatif sur chaque image complètent le balisage.
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Rider cuir noir",
"brand": { "@type": "Brand", "name": "Punishment Paris" },
"material": "Cuir de vachette",
"offers": {
"@type": "Offer",
"price": 1450,
"priceCurrency": "EUR",
"availability": "https://schema.org/InStock",
"shippingDetails": {
"@type": "OfferShippingDetails",
"shippingRate": { "@type": "MonetaryAmount", "value": 0, "currency": "EUR" }
}
}
}
Le vestiaire comme une sortie de label
Plâtre et encre, comme le typogramme noir et blanc de la marque. Un seul accent, le bordeaux du blouson Vaillant. Des pièces numérotées comme les pistes d'un disque.
- Un accueil qui vend dès le premier écran. Titre H1, bouton vers la saison, puis huit nouveautés avec leur prix.
- Un méga-menu en quatre groupes. Extérieur, Hauts, Bas & ensembles, Collections, au lieu de 13 liens à plat.
- Filtres et tri sur les collections. Famille, taille, matière, prix, alimentés par les champs méta.
- Des fiches produit complètes. Galerie 4:5, guide des tailles, matière et fabrication, entretien, barre d'achat fixe sur mobile.
- Un tiroir panier. Le client reste sur la fiche et continue sa visite.
- Des engagements visibles là où l'on achète. Stocks dormants et ateliers parisiens dans le bandeau, sur les fiches et au panier.
Le dossier complet
Audit, avant / après, direction UI, architecture, recommandations UX et SEO, feuille de route, et quatre maquettes cliquables : menu, filtres, choix de taille et panier fonctionnent. Le dossier a lui aussi son mode clair et son mode sombre.
Trois phases, douze semaines
Le SEO commence dès la première semaine, dans la boutique actuelle, pendant que le nouveau thème se construit.
Corrections rapides
- Titres, méta-descriptions et H1
- Alt sur toutes les images
- Ancres d'URL et redirections 301
- Type, matière, couleur sur les 23 produits
- Sitemap soumis dans Search Console
Nouveau thème
- Thème Shopify 2.0 sur mesure
- Méga-menu, accueil, collections filtrables
- Fiche produit et tiroir panier
- Tests avec cinq clients, mobile d'abord
- Mise en ligne et suivi des 404
Contenu et portée
- Pages Fabrication et Créatifs
- Journal : histoires de collection
- Version anglaise et hreflang
- Playlist et lookbook de saison