Kit Périmètre natif pour Shopware 6 (Storefront)

Ce kit s’adresse aux designers, aux freelances et aux agences qui conçoivent une boutique sur Shopware 6 avec le thème Storefront, et qui doivent la chiffrer avant de la dessiner. Il répond, bloc par bloc, à une seule question : ce que vous dessinez est-il natif, réglable dans l’administration, lié à un plan payant ou à développer ? Chaque bloc des écrans porte une étiquette qui renvoie à une ligne de la matrice, et chaque ligne cite la page de documentation officielle ou le fichier publié sur lequel elle repose. Vous présentez au client des maquettes que la plateforme et son thème savent livrer, et vous mettez à part, dans le devis, ce qui demande un plan payant, une extension de paiement ou du développement.

Le kit dessine la boutique avec le Storefront, le thème livré par défaut : ses gabarits Twig rendent les pages de la boutique et ses styles reposent sur Bootstrap. Une ligne repérée au cadrage se chiffre avant la maquette plutôt qu’à la passation : un aperçu rapide ou une recherche avancée qui demandent un plan payant, un checkout en une seule page que le Storefront ne livre pas, un filtre qui n’est ni une propriété ni un filtre livré, un paiement en ligne qui passe par une extension, une échelle d’espacements et de rayons que l’administration ne règle pas.

Sources officielles vérifiées le 11 novembre 2026, pour Shopware 6.7.16.0 en Community Edition et le thème Storefront de la même version, construit sur Bootstrap 5.3.8, sur une installation neuve. Le kit aide à cadrer et à concevoir : il ne vaut ni conseil juridique, ni audit de votre boutique, ni garantie d’exhaustivité.

Une matrice de 127 lignes, une par fonctionnalité, rangées par domaine : catalogue, navigation et recherche, fiche produit, panier, checkout, compte, contenus, e-mails, international, thème et vente aux professionnels. Ces colonnes en font le devis :

Ce que débloque chaque plan. Shopware 6 existe en Community Edition, gratuite et sous licence MIT, et en plans payants, Rise, Evolve et Beyond, qui ajoutent des fonctions par l’extension Shopware Commercial. Chaque plan comprend les fonctions du précédent, et la colonne edition de la matrice donne le plan minimal qui débloque chaque ligne :

Le guide et la feuille Extensions donnent le prix des plans Rise et Evolve relevé le 11 novembre 2026 sur la page tarifaire de l’éditeur, seule source de prix du kit ; le plan Beyond est sur devis. Relisez ces prix à la date du devis.

• Risque fort : les 11 lignes où le devis change de nature, soit les fonctions des plans Evolve et Beyond, et un filtre de listing qui n’est ni une propriété ni un filtre livré, dessiné mais à développer. Les 9 lignes en risque moyen se chiffrent à part sans changer la nature du projet : le plan Rise, l’extension de paiement de l’éditeur et la mise en place de l’échelle du kit par le thème enfant.
• Sources : chaque ligne cite sa page officielle, sa date de lecture et un extrait court en langue d’origine, de 25 mots au plus, soit 86 URL sources au total, dont 33 fichiers publiés de la plateforme. Le tableur compte 5 feuilles : Mode d’emploi, Matrice, Écrans, Extensions (les 5 extensions citées, avec leurs conditions et le prix du plan quand l’extension vient avec un plan) et Sources.
• Un fichier de conception pour Figma : 22 écrans en desktop et en mobile, et 3 e-mails (confirmation de commande, confirmation d’inscription, réinitialisation du mot de passe).
  • Écrans : accueil, listing de catégorie avec filtres, résultats de recherche et suggestions, fiche produit, fiche produit à variantes, panier en tiroir, panier, checkout : adresse (connexion, inscription ou commande sans compte) puis confirmation, commande terminée, connexion et inscription, mot de passe oublié, aperçu du compte, commandes, modification d’une commande (paiement, annulation), adresses, profil, liste d’envies, page de contenu, contact, page introuvable, demande de rétractation.
  • Étiquettes : 98 lignes de la matrice sont dessinées, en 88 blocs par jeu d’écrans et 288 étiquettes au total (141 en desktop, 141 en mobile, 6 dans les e-mails). Chaque bloc porte une étiquette sur deux lignes : l’identifiant et le statut, puis « Storefront : » suivi de la valeur du front, qui nomme le plan quand il en faut un. Tout est écrit en toutes lettres, et le contour redouble le statut. Les étiquettes sont posées dans un calque d’annotations que vous pouvez masquer.
  • Fondations et composants : 62 variables, 13 styles de texte, 2 styles d’effet, 24 jeux de composants pour 89 variantes (étiquette de périmètre, boutons, champs, cases et boutons radio, pastilles, quantité, badges, prix, notes, fil d’Ariane, pagination, onglets, accordéon, messages, étapes du checkout, filtre actif, facettes, carte produit, ligne de panier, récapitulatif de commande, en-tête, pied de page, tiroirs, modale) et 37 icônes. Aucun logo : les moyens de paiement sont écrits en libellés texte.
• 64 tokens : 19 couleurs, 9 espacements, 6 rayons, 9 pas de texte avec chacun un token de taille et un d’interligne, 2 familles de polices, 2 graisses, 4 tailles, 2 épaisseurs de trait et 2 ombres. Ils sont identiques dans le fichier de conception (62 variables et 2 styles d’effet), les deux fichiers de tokens, theme/theme.json et theme/theme.css. Espacements, rayons, tailles, interlignes et décalages d’ombre sont des multiples de 4 px.
• Un thème enfant du Storefront, dans le dossier theme/ :
  • theme/theme.json pose un champ par token, soit 64 champs : les 15 champs de couleur et de police que le Storefront rend réglables, avec les valeurs du kit, et 49 champs ajoutés par le kit. Il hérite de la configuration du Storefront.
  • overrides.scss surcharge 63 variables de Bootstrap et du Storefront, lues avant leur compilation, et base.scss pose les propriétés CSS du kit et les interlignes des titres après eux. theme/theme.css est la part du kit dans le CSS compilé, pour vérification.
  • theme/ecarts-config-defaut.md liste les 15 écarts entre le thème enfant et la configuration par défaut du Storefront, chacun avec sa raison, sa saisie et l’action à décider à la passation, puis les 18 valeurs du Storefront et les 15 valeurs de Bootstrap qui sortent de la grille de 4 px.
• Un guide de cadrage de 27 pages, en français : le périmètre natif et les versions relevées, les éditions et les plans, lire la matrice et les étiquettes, les 8 questions à poser au client avant la maquette, un atelier de cadrage pas à pas, 12 pièges où une maquette plausible sort du natif sans le dire, la passation au développement, l’application du thème enfant et de ses écarts, les 21 fonctionnalités que le kit ne tranche pas (15 sans page officielle, 4 hors de son périmètre, 2 sans écran de boutique), et 31 sources.
• Une checklist de passation de 20 points, dans le guide et en fichier texte à copier dans un ticket.

Fichiers du kit :

• LICENCE.txt, LISEZMOI.txt, CREDITS.txt
• figma/native-scope-kit-for-shopware-1.0.0.fig
• guide/guide-cadrage.pdf, guide/checklist-passation.md
• matrice/perimetre-natif.xlsx, matrice/perimetre-natif.csv
• tokens/tokens.json, tokens/tokens.2025-10.json
• theme/theme.json, theme/theme.css, theme/ecarts-config-defaut.md
• theme/app/storefront/src/scss/overrides.scss, theme/app/storefront/src/scss/base.scss

• Matrice en XLSX et en CSV UTF-8, avec les mêmes identifiants : le tableur a ses listes déroulantes et son en-tête figé, et se filtre par plan, par écran, par statut ou par risque ; le CSV s’importe dans tout tableur ou outil de suivi. Les chemins d’administration sont ceux de l’interface anglaise, tels que les écrit la documentation officielle ; les libellés de l’administration en français n’ont pas été relevés.
• Guide en PDF A4 balisé, et checklist en Markdown.
• Tokens en DTCG JSON au format antérieur à 2025.10, valeurs en chaîne (tokens/tokens.json), et les mêmes tokens au format DTCG 2025.10 pour les autres outils (tokens/tokens.2025-10.json).
• Thème enfant : theme/theme.json a été validé contre un schéma tiré du code de Shopware 6.7.16.0, et le SCSS compilé avec les fichiers du Storefront au même tag et Bootstrap 5.3.8, dans un projet de test, où les 64 tokens ont été relus au rendu. Le dossier theme/ se copie dans le dossier src/Resources/ d’une extension de thème. Il n’a pas été installé dans une boutique réelle.
• Code de la plateforme et du thème : le kit ne contient aucun fichier de Shopware, du Storefront ni de Bootstrap, ni aucun gabarit Twig. Son thème enfant reprend les noms des champs de configuration du Storefront et des variables SCSS, pour que la configuration se branche, avec les valeurs du kit ; 3 valeurs courantes coïncident avec la configuration par défaut, et le guide les déclare. Les valeurs du Storefront ne sont citées, pour comparaison, que dans theme/ecarts-config-defaut.md et dans la matrice.
• Fichier .fig : un fichier compatible Figma, à importer dans votre espace. Écrans desktop en 1 440 px, mobiles en 375 px, e-mails en 600 px.
• Polices : Inter (SIL OFL 1.1), la police par défaut du Storefront, est référencée par les tokens et par les champs de police, sans fichier de police : le projet la charge. Le guide est composé en Work Sans (SIL OFL 1.1), embarquée dans le PDF.
• Versions relevées : Shopware 6.7.16.0 (tag v6.7.16.0), thème Storefront de la même version, Bootstrap 5.3.8 et Twig ^3.29, sur une installation neuve en Community Edition ; documentation officielle lue le 11 novembre 2026, chaque ligne de la matrice portant sa date de lecture.

• Le checkout enchaîne une page Adresse et une page de confirmation : la première pour la connexion, l’inscription ou la commande sans compte, la seconde pour regrouper adresses, livraison, paiement, articles et total. Un checkout en une seule page, connexion comprise, se chiffre en développement.
• Les blocs liés à un plan payant sont dessinés, avec l’étiquette extension et le plan en seconde ligne : sans ce plan, retirez-les de la maquette avant le devis. Les fonctions B2B du plan Evolve et les prix propres à chaque client du plan Beyond ne sont pas dessinés.
• Le listing filtre par propriétés et par les filtres généraux livrés (fabricant, prix, note, livraison gratuite). Tout autre filtre se développe, et le kit en dessine un avec cette étiquette.
• Le paiement en ligne passe par une extension : la plateforme livre le paiement à la livraison, la facture, le prépaiement et le prélèvement ; le paiement en ligne passe par l’extension de paiement de l’éditeur, livrée avec la plateforme mais à installer, ou par celle d’un autre prestataire. Le kit ne cite aucun frais de prestataire : relevez-les à la date du devis.
• L’administration ne règle ni les tailles, ni les espacements, ni les rayons, ni les ombres : seules les couleurs et les polices s’y règlent. C’est pourquoi le kit livre un thème enfant, dont la mise en place se chiffre.
• Le Storefront est livré en allemand et en anglais : le français vient des traductions communautaires, mises à jour depuis l’administration.
• Le Storefront n’a pas de mode sombre au choix du visiteur, et le kit n’en dessine pas. Les thèmes premium de l’éditeur sont dépréciés d’après l’éditeur : le kit part du Storefront.
• Les noms de boutique, de personnes et de produits des écrans sont fictifs.
• Le PDF est balisé, mais sa conformité PDF/UA n’a pas été mesurée.
• Le kit n’est pas un thème complet et ne contient aucune extension : il sert à cadrer, à concevoir et à passer la main au développement.
• La matrice cite quelques extensions et prestataires par leur nom, à titre nominatif.
• Le guide, la matrice et les étiquettes sont en français ; les extraits de documentation restent en langue d’origine.
• Mises à jour : gratuites pour les acheteurs, publiées au fil des versions de la plateforme, sans calendrier garanti. Shopware 6.8 est annoncée : à sa sortie, la matrice, les étiquettes, le thème enfant et le guide seront relus, et un statut, une source ou un réglage qui change entre dans les mises à jour du kit. Elles ne couvrent pas les fonctionnalités laissées hors de la matrice, que le guide liste à part.

Le kit est vendu avec la licence commerciale, en paiement unique : vous pouvez l’utiliser pour vos projets personnels et professionnels, y compris pour vos clients, mais pas revendre ni redistribuer ses fichiers, même modifiés, comme kit ou comme modèle. Vous pouvez livrer le thème enfant (theme/theme.json et theme/app/storefront/src/scss/) dans l’extension de thème d’un projet client : c’est un usage dans un produit fini, que la licence permet ; seule sa redistribution comme ressource réutilisable en est exclue.

• Design tokens : ce que change vraiment le nouveau standard W3C DTCG

1.0.0 (11 novembre 2026) : première version.

Shopware est une marque de shopware AG. Community Edition, Rise, Evolve, Beyond, Shopware Commercial et Storefront désignent des produits de shopware AG, cités pour dire la compatibilité et le périmètre. Les autres noms de produits, de services et de prestataires cités appartiennent à leurs titulaires respectifs et ne sont cités que pour décrire une compatibilité. Kit indépendant, ni affilié à, ni approuvé ni sponsorisé par shopware AG.

Le nom de la plateforme et celui du thème ne servent que de mention de compatibilité et de périmètre ; le contenu de démonstration du fichier de conception porte une marque inventée. Aucun logo, aucune capture d’une boutique réelle ni du thème, aucune interface imitée : les écrans sont redessinés à partir de la structure de page documentée.

Déclaration d’IA : la matrice, les textes du guide, les tokens, le thème enfant (theme.json et SCSS), les scripts de contrôle et la construction du fichier de conception ont été produits avec un assistant d’IA (Claude Code, Anthropic), puis contrôlés par des scripts et par relecture. Sources officielles vérifiées le 11 novembre 2026 : chaque ligne de la matrice cite la source sur laquelle elle repose. Le kit ne contient aucune image générée par IA.