Récit · Base Theme
Une boutique Shopware se reconnaît au premier coup d'œil. C'est précisément ce que ce thème corrige.
Pas un habillage pour une boutique — une fondation pour les dix suivantes. Monochrome par défaut, la couleur réservée à ce qui a du sens, et un mode sombre sans étape de build.
La boutique et les personnes de ce récit sont une illustration, pas des clients. Le logiciel est réel ; le problème est celui pour lequel nous appellent sans cesse les détaillants qui exploitent plus d'une adresse.
Le signe distinctif
Le thème par défaut a un visage, et les clients le connaissent.
Le thème par défaut n'a rien de mauvais. Il est complet, maintenu et raisonnable. Il est aussi reconnaissable — et une boutique qui ressemble à une plateforme plutôt qu'à une marque a dépensé sa première impression avant qu'on ait lu un mot.
On corrige cela d'ordinaire par une pile de surcharges sélecteur par sélecteur contre Bootstrap. Cela tient jusqu'à ce que la mise à jour suivante déplace quelque chose en dessous.
Ce que c'est à la place
Une couche de tokens, et Bootstrap qui pointe dessus.
Chaque décision visuelle — couleur, échelle typographique, espacements, hauteurs de contrôles, rayons, élévation, animation — se résout en un token. Les variables de Bootstrap et ses propriétés `--bs-*` pointent vers ces tokens au lieu d'être surchargées une à une.
Une marque modifie donc des valeurs, pas des composants. Le thème reste maintenable parce qu'il ne se bat pas avec le framework en dessous.
- --color-text-primary
- #1a1a1a
- #f6f6f6
- --color-bg-base
- #ffffff
- #0b0b0b
- --color-surface
- #ffffff
- #121212
- --color-border
- #e3e3e3
- #282828
- --color-action
- #000000
- #ffffff
Les valeurs livrées par le thème, lues dans sa propre palette. Un seul jeu de noms ; le mode décide des valeurs.
Ce que touche le marchand
La mise en page, sans ouvrir une feuille de style.
Largeur de conteneur et largeur maximale du contenu. Espacement des sections. En-tête collant, barre supérieure, fil d'Ariane. Style de navigation. Colonnes de pied de page. Des réglages Shopware ordinaires, là où un marchand les cherche déjà.
Ce ne sont pas des interrupteurs cosmétiques ajoutés par-dessus : ils conditionnent du vrai balisage dans Twig. Barre supérieure désactivée veut dire aucune barre livrée, pas une barre masquée en CSS.
Et les pièces
Rayon des angles, style de carte, produits par rangée.
Style du bouton principal, traitement des cartes, format des images produit, et colonnes de grille réglées séparément pour ordinateur, tablette et mobile — parce que trois de front convient sur un portable et pas sur un téléphone.
La dernière case de ce panneau est le sujet de la scène suivante.
La bascule
Mode sombre, sans étape de build.
Une lune à côté des icônes compte et panier, à toutes les tailles d'écran. Le choix reste dans le navigateur du visiteur et toute la palette est réévaluée via un attribut sur l'élément html. Les mêmes noms de tokens, d'autres valeurs.
L'implémentation est en ligne : un minuscule script anti-flash dans le head, pour qu'un visiteur en mode sombre ne voie jamais un éclair blanc, plus un petit script de câblage. Pas de webpack, pas de chaîne d'assets. Désactivez le réglage et ni le balisage ni les scripts ne sont livrés.
Shopware fige certaines couleurs à la compilation ; ces éléments sont repointés vers les tokens afin de suivre la bascule au lieu de rester sombre sur sombre.
Clair
Sombre
Où est passée la couleur
La teinte est réservée au sens.
L'interface est neutre : la hiérarchie vient du ton, de la typographie, des espacements et de filets d'un pixel. Dès lors, si quelque chose est coloré, c'est qu'il porte une information — succès, avertissement, danger, information, et les étoiles de notation.
Comptez les éléments colorés sur une page de catégorie. Les étoiles, et rien d'autre. C'est voulu, et c'est pourquoi un message de statut se lit comme un statut et non comme une décoration de plus.
La page qui vend
Fil d'Ariane, titre, contenu — dans cet ordre.
Un fil discret avec la page courante en encre, douze pixels jusqu'au titre semi-gras, huit jusqu'à une description facultative, puis le contenu. Sur téléphone, le fil se replie au lieu de passer à la ligne. Sur une fiche produit, le produit est la station courante.
Les prix dégressifs se lisent comme un tableau, parce que c'en est un. La galerie, le champ de quantité et le bouton panier proviennent des mêmes hauteurs de contrôle et rayons que le reste de la boutique.
Clair
Sombre
Ce que l'équipe éditoriale a construit
Les Shopping Experiences continuent de fonctionner.
Chaque bloc CMS natif est habillé par le design system : typographie courante et chapeau, images arrondies, carrousels et galeries, cartes image-texte, blocs produit de hauteur égale, un voile et un texte clair sur texte-sur-image, et une carte de consentement habillée pour la vidéo intégrée.
Ce qu'un éditeur a réglé dans l'administration s'applique toujours. Le thème habille les blocs ; il ne retire pas la mise en page à celui qui l'a construite.
Comment nous le savons
Clair et sombre, ordinateur et téléphone, vérifiés.
Une suite Playwright couvre la boutique dans les deux schémas de couleurs et les deux tailles, contraste de texte WCAG AA compris. Les bordures de formulaire tiennent 3:1, le focus est un anneau visible plutôt qu'un contour supprimé, et les liens dans le texte courant gardent leur soulignement puisqu'ils partagent la couleur du texte.
Les habillages de plugins ont leur propre test, qui se saute lui-même lorsque le plugin n'est pas installé sur la boutique testée.
Clair
Sombre
Deux faces d'une même boutique
Pour qui fait ses achats
- Une boutique qui se lit comme la marque, pas comme la plateforme qui la fait tourner.
- Un mode sombre réellement sombre, y compris là où le cœur fige des couleurs.
- Un texte au contraste AA, un focus visible, et des cibles tactiles à la taille d'un pouce.
- Aucun éclair blanc au chargement pour qui navigue le soir.
Pour qui le maintient
- Les changements de marque sont des valeurs de tokens et des réglages, pas des retouches de composants.
- Bootstrap est redirigé plutôt que combattu : les mises à jour du cœur restent supportables.
- Une fondation commune à tous les projets plutôt qu'un habillage sur mesure par client.
- Apache-2.0 et sur Packagist — forkez, lisez, aucune discussion de licence.
Réponses franches
Ce que ce n'est pas
Les limites, dites franchement, y compris celles qui comptent le plus pour une chaîne. Un plugin qui promet tout est un plugin dont on le découvre plus tard.
- Shopware 6.7 uniquement
- Il lui faut `shopware/core` et `shopware/storefront` en ~6.7.0. Il n'existe pas de branche 6.6.
- Une fondation, pas une boutique finie
- Il fournit une base cohérente sur laquelle bâtir une marque. Il ne prend pas les décisions de design à votre place et ne livre aucune mise en page sur mesure.
- Les habillages de plugins sont optionnels et à sens unique
- Le thème habille l'interface de nos plugins et ne dépend d'aucun. Installez un plugin qu'il ne connaît pas et rien ne s'applique — c'est voulu, mais un plugin tiers peut donc continuer à ressembler à lui-même.
- Le cœur fige encore des couleurs
- Le mode sombre repointe les éléments du cœur que nous avons trouvés. Si un nouvel élément apparaît sombre sur sombre après une mise à jour, il faut l'ajouter — c'est une liste, pas une règle qui attrape tout.
- Les réglages exigent une recompilation
- Après une modification des réglages ou une mise à jour, recompilez le thème. Standard Shopware, mais autant le dire avant que quelqu'un s'étonne que rien ne bouge.
Installer
Gratuit, à quatre commandes d'ici.
Le thème est publié sur Packagist sous Apache-2.0. Pas de clé de licence, pas de compte, pas de frais — installez-le comme n'importe quoi d'autre.
$ composer require kommandhub/base-theme-sw
$ bin/console plugin:refresh
$ bin/console plugin:install --activate KmhBaseTheme
$ bin/console theme:change --all KmhBaseThemeComposer, puis affectez le thème à un canal de vente.
Ou téléchargez le zip de la release sur GitHub et importez-le via Extensions → Mes extensions.
- Version
- 1.0.0
- Licence
- Apache-2.0
- Prérequis
- Shopware 6.7, PHP 8.2+
- Prix
- Gratuit
Avant de demander
Les questions qu'un détaillant pose en premier
Ce thème Shopware est-il vraiment gratuit ?
Oui. Il est publié sous Apache-2.0 sur Packagist et le code source est public sur GitHub. Aucune clé de licence, aucun abonnement, aucune édition payante — usage commercial autorisé, fork possible, et vos projets clients peuvent tourner dessus.
Prend-il en charge le mode sombre ?
Oui, et sans étape de build. Un bouton figure à côté des icônes compte et panier à toutes les tailles d'écran, le choix reste dans le navigateur du visiteur, et toute la palette est réévaluée via un attribut sur l'élément html. Un petit script anti-flash dans le head évite tout éclair blanc en mode sombre. Désactivez le réglage et ni le balisage ni les scripts ne sont livrés.
Avec quelles versions de Shopware fonctionne-t-il ?
Shopware 6.7 et PHP 8.2 ou plus récent. Il n'existe pas de branche 6.6 — si vous êtes en 6.6, la montée de version passe d'abord.
Puis-je changer couleurs et mise en page sans écrire de SCSS ?
Oui. Largeur de conteneur, largeur maximale, espacement des sections, en-tête collant, barre supérieure, fil d'Ariane, style de navigation et colonnes de pied de page sont des réglages du thème, tout comme le rayon des angles, le style des boutons et des cartes, le format des images produit et les colonnes de grille par taille d'écran. Au-delà, ce sont des valeurs de tokens, pas des retouches de composants.
Est-ce un design de boutique fini ?
Non, et c'est volontaire. C'est une fondation sur laquelle bâtir une marque — une base cohérente d'un projet à l'autre plutôt qu'un habillage sur mesure pour une boutique. Il ne livre aucune mise en page propre et ne prend aucune décision de design à votre place.
Apache-2.0, sur Packagist, et en service sur les captures ci-dessus.
Chaque capture de cette page provient de notre propre boutique de démonstration, prise en fonctionnement. Le thème est open source — lisez-le, forkez-le, ou installez-le et continuez. Pour l'ajuster à une marque, parlons-en.