# Guide du CSS personnalisé Le CSS personnalisé vous permet d'affiner l'apparence de votre boutique au-delà des contrôles intégrés du personnalisateur — boutons plus arrondis, ombres de cartes plus douces, une police sur mesure, un header collant, et bien plus encore. Ce guide est un tutoriel complet et accessible aux débutants : comment fonctionne le CSS, où le coller, l'aide-mémoire des sélecteurs DZBuild, et **des dizaines de modèles prêts à coller**. Fonctionnalité Entreprise Le CSS personnalisé est disponible sur le plan **Entreprise**. Sur les autres plans, le champ apparaît verrouillé. Consultez [les plans](https://dzbuild.com/fr/fr/docs/plans/enterprise.md) pour passer à la version supérieure. ## Où le coller[​](#où-le-coller "Lien direct vers Où le coller") Barre latérale **Personnaliser la boutique** → **Personnaliser** → **CSS personnalisé**. Saisissez ou collez votre CSS, regardez l'**aperçu en direct** se mettre à jour à droite, et cliquez sur **Enregistrer** quand le rendu vous convient. Votre CSS est chargé *après* la feuille de style principale du thème, donc vos règles l'emportent en général. Quelques parties apportent leurs propres styles plus loin dans la page ou sur l'élément lui-même : l'en-tête sur toutes les pages sauf les pages produit, le pied de page, le bouton WhatsApp flottant, les styles propres à la page produit et, sur certains thèmes, la barre d'annonce. Une règle qui les vise a besoin de `!important` pour gagner. Vous ne pouvez rien casser de façon permanente Le CSS personnalisé ne change que l'apparence — jamais vos produits, vos commandes ni vos données. Si la boutique paraît cassée, **videz le champ et enregistrez** pour revenir à la normale. Vérifiez toujours l'aperçu en direct *avant* d'enregistrer. Limite de 50 Ko — troncature silencieuse Le champ est plafonné à **50 000 caractères** : il n'accepte plus de texte au-delà, et le compteur en dessous indique combien vous en avez utilisé. La copie enregistrée est aussi coupée à 50 000 octets, sans aucune erreur affichée, et une lettre arabe compte pour deux octets : un CSS qui contient du texte arabe peut donc perdre sa fin même quand le compteur est sous la limite. Une coupure peut laisser une règle à moitié écrite et désactiver tout ce qui suit. Gardez la feuille de style courte, et si la fin de votre CSS cesse de fonctionner, vérifiez d'abord sa longueur. **Où il s'applique :** la page d'accueil, les pages produit, les pages catégorie et tous les produits, le panier, le checkout, le suivi de commande et la page de confirmation de commande. Il ne s'applique **pas** aux landing pages sur `/landing/{slug}` — celles-ci s'affichent en dehors du système de thèmes. ### Cherchez d'abord un réglage intégré[​](#cherchez-dabord-un-réglage-intégré "Lien direct vers Cherchez d'abord un réglage intégré") Plusieurs des modèles ci-dessous font double emploi — et peuvent entrer en conflit — avec un contrôle qui existe déjà dans le personnalisateur : | Ce que vous voulez | Contrôle intégré | | -------------------------------------------------------------------------- | ------------------------------------- | | En-tête collant, ombre d'en-tête, bordure d'en-tête | Personnaliser → En-tête et Logo | | Arrondi des coins des cartes produit (0 / 8 / 16 / 24 px) | Personnaliser → Carte produit | | Masquer le bouton « ajouter au panier » de la grille ou l'action au survol | Personnaliser → Carte produit | | Afficher/masquer la barre d'annonce et ses couleurs | Personnaliser → Barre d'annonce (Pro) | | Afficher/masquer la barre de recherche | Personnaliser → Barre de recherche | | Couleur du pied de page, masquer « Powered by DZBuild » | Personnaliser → Pied de page | | Couleurs des boutons Acheter maintenant / Fast Checkout | Personnaliser → Page produit (Pro) | Utilisez le réglage quand il existe — il survit aux changements de thème et ne sera pas écrasé par une future mise à jour de feuille de style. *** ## Comment fonctionne le CSS (initiation en 60 secondes)[​](#comment-fonctionne-le-css-initiation-en-60-secondes "Lien direct vers Comment fonctionne le CSS (initiation en 60 secondes)") Le CSS est une liste de **règles**. Chaque règle a un **sélecteur** (ce qu'il faut cibler) et un **bloc de déclarations** (ce qu'il faut changer) : ``` .add-to-cart { color: white; background: #f59e0b; } /* └─ sélecteur ┘ └───── déclarations : property: value; ─────┘ */ ``` * Un **sélecteur** désigne des éléments. Les types les plus courants : * `.classname` — tous les éléments portant cette classe (ex. `.add-to-cart`). **C'est ce que vous utiliserez 95 % du temps.** * `tag` — tous les éléments d'un type (ex. `button`, `h1`, `img`). * `#id` — l'élément unique portant cet id. * `.a .b` — un `.b` **à l'intérieur** d'un `.a`. `.a > .b` — un `.b` **enfant direct** d'un `.a`. * `.a:hover` — un `.a` pendant que la souris le survole. * Une **déclaration** s'écrit `property: value;`. Propriétés courantes : `color`, `background`, `border`, `border-radius`, `padding`, `margin`, `font-size`, `box-shadow`, `display`. * **La cascade** : quand deux règles touchent la même chose, la plus *spécifique* — ou celle chargée *en dernier* — l'emporte. Comme votre CSS est chargé après le thème, votre règle sur `.add-to-cart` bat celle du thème. * **`!important`** force une valeur à gagner. À utiliser avec parcimonie — seulement quand une règle normale ne parvient pas à surcharger le thème : ``` .add-to-cart { border-radius: 999px !important; } ``` C'est vraiment l'essentiel de ce dont vous avez besoin. Tout ce qui suit est du copier-coller. *** ## Trouver le bon sélecteur[​](#trouver-le-bon-sélecteur "Lien direct vers Trouver le bon sélecteur") Vous n'avez presque jamais besoin de deviner. Utilisez l'inspecteur de votre navigateur : 1. Ouvrez votre boutique sur un **navigateur desktop** (Chrome, Firefox, Edge). 2. **Clic droit** sur l'élément à modifier → **Inspecter**. 3. Dans le panneau qui s'ouvre, la ligne surlignée montre l'élément et son `class="…"`. Choisissez un nom de classe (ex. `product-card`) et ciblez-le avec `.product-card`. 4. Collez une règle de test dans le champ CSS personnalisé et regardez l'**aperçu en direct**. astuce Les sélecteurs diffèrent d'un thème à l'autre (Starter, Digital, Brico, Started V2, Prestige, Promobi, Bloom) — surtout pour le hero et les barres de recherche. En cas de doute, **inspectez votre propre boutique** plutôt que de copier une classe à l'aveugle, puis vérifiez la règle dans l'aperçu. *** ## Aide-mémoire des sélecteurs DZBuild[​](#aide-mémoire-des-sélecteurs-dzbuild "Lien direct vers Aide-mémoire des sélecteurs DZBuild") Les sélecteurs les plus utiles et les plus stables entre thèmes : | Sélecteur | Cible | | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `.navbar-store` | L'en-tête / la barre de navigation en haut, partagé par toutes les pages (le même élément porte aussi `id="navbar"`, donc `#navbar` fonctionne également). La page d'accueil Promobi a son propre en-tête, `.pm-nav` | | `.announcement-bar` | Le bandeau promo fin au-dessus de l'en-tête. Sur la page d'accueil Promobi, l'annonce défile à la place dans un bandeau `.pm-marquee` | | `.product-card` | Une tuile produit dans n'importe quelle grille | | `.product-image` | Le **conteneur** autour de l'image d'une carte produit — ciblez `.product-image img` pour l'image elle-même | | `.product-price` | Le texte du prix sur une carte produit | | `.product-actions` | Les boutons d'action au survol d'une carte produit (masqués sur les appareils tactiles — voir plus bas) | | `.add-to-cart` | Les boutons « ajouter au panier » / d'achat dans les grilles produits | | `.whatsapp-float` | Le bouton WhatsApp flottant. Une fois les réglages enregistrés dans Personnaliser → Widget d'aide, le bouton devient `.dzhw-launcher` | | `.footer` | Le pied de page sur toutes les pages, **sauf la page d'accueil Brico**, qui utilise `.brico-footer` | Trois sélecteurs qui circulent dans d'anciens extraits **ne fonctionnent pas** sur les boutiques DZBuild : * `.btn-primary` — n'existe que sur la page de confirmation de commande, nulle part ailleurs. Pour recolorer les boutons Acheter maintenant et Fast Checkout, utilisez les sélecteurs de couleur intégrés (Personnaliser → Page produit) ou les variables CSS ci-dessous. * `.header-search` : aucun balisage de la boutique ne l'utilise. La navbar partagée n'a pas de champ de recherche du tout : une règle « header-search » ne peut donc jamais fonctionner sur les pages produit, panier, catégorie ou checkout. La recherche est **propre à chaque thème et limitée à la page d'accueil** : `.brico-search`, `.sc-search` (Started V2 et Bloom), `.pr-search`, `.pm-search`, `.search-section` (Starter et Digital). * `.hero` — les vraies classes de hero sont elles aussi propres au thème : `.hero-section` (Starter), `.dt-hero-section` (Digital), `.sc-hero` (Started V2 et Bloom), `.pr-hero` (Prestige), `.pm-hero` (Promobi). Brico n'a pas de hero. ### Variables CSS de marque[​](#variables-css-de-marque "Lien direct vers Variables CSS de marque") Déclarées par les 7 thèmes actifs : | Variable | Contrôle | | --------------- | ------------------------------------------- | | `--primary` | Couleur de marque primaire | | `--secondary` | Couleur secondaire | | `--gradient` | Dégradé primaire→secondaire (boutons, hero) | | `--btn-radius` | Arrondi des coins des boutons | | `--card-border` | Bordure des cartes produit | | `--card-shadow` | Ombre des cartes produit | Le fond de page diffère selon le thème : **Starter et Digital** utilisent `--background` ; Bloom, Brico, Prestige, Promobi et Started V2 utilisent `--bg` (plus `--navbar-bg` et `--border-color`, et `--footer-bg` sur tous sauf Promobi). En cas de doute, définissez les deux. Les boutons de la page produit lisent leurs propres variables. Quand vous choisissez la couleur correspondante dans Personnaliser → Page produit, la page définit elle-même ces variables après votre CSS personnalisé, donc le sélecteur de couleur l'emporte ; une valeur définie ici ne s'applique que tant que ce sélecteur est vide : | Variable | Contrôle | | ------------- | ------------------------------------------------------------------------------- | | `--pd-buynow` | Couleur du bouton Acheter maintenant (`--pd-buynow-hover` pour le survol) | | `--pd-fc-btn` | Couleur du bouton d'envoi du Fast Checkout (`--pd-fc-btn-hover` pour le survol) | Pour changer les couleurs de toute la boutique, utilisez les sélecteurs de couleur primaire et secondaire dans **Personnaliser → Couleurs et Police** : ils atteignent toutes les pages, pages produit comprises. Les variables ci-dessous n'atteignent que les pages qui les lisent : les pages d'accueil des thèmes, le panier, le checkout, les pages catégorie, tous les produits et suivi de commande. Les pages produit utilisent leurs propres variables de couleur, la page d'accueil Promobi lit `--accent` et `--accent2`, et plusieurs pages construisent `--gradient` à partir des couleurs enregistrées : définissez-le aussi. ``` /* Recolorer les pages qui lisent ces variables */ :root { --primary: #6d28d9; --secondary: #a78bfa; --gradient: linear-gradient(135deg, #6d28d9 0%, #a78bfa 100%); --accent: #6d28d9; --accent2: #a78bfa; --btn-radius: 12px; --background: #faf7f2; --bg: #faf7f2; } ``` *** ## Modèles[​](#modèles "Lien direct vers Modèles") Copiez n'importe quel bloc dans le champ CSS personnalisé. Mélangez à volonté. ### Boutons[​](#boutons "Lien direct vers Boutons") Ces règles ciblent `.add-to-cart`, le bouton d'achat des tuiles de grille produit. Pour les boutons **Acheter maintenant** et **Fast Checkout** de la page produit, définissez `--pd-buynow` / `--pd-fc-btn` (ou utilisez les sélecteurs de couleur dans Personnaliser → Page produit) plutôt que de courir après une classe. ``` /* Boutons pilule (entièrement arrondis) */ .add-to-cart { border-radius: 999px; } /* Boutons en dégradé avec une légère élévation au survol */ .add-to-cart { background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); border: none; transition: transform .15s ease, box-shadow .15s ease; } .add-to-cart:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(245, 158, 11, .35); } /* Style contour (outline) */ .add-to-cart { background: transparent; color: #f59e0b; border: 2px solid #f59e0b; } .add-to-cart:hover { background: #f59e0b; color: #fff; } ``` ### Cartes produit[​](#cartes-produit "Lien direct vers Cartes produit") ``` /* Ombre douce + coins arrondis */ .product-card { border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); overflow: hidden; } /* Soulever la carte au survol */ .product-card { transition: transform .2s ease, box-shadow .2s ease; } .product-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0, 0, 0, .12); } /* Léger zoom sur l'image produit au survol */ .product-card:hover .product-image img { transform: scale(1.04); } .product-image img { transition: transform .3s ease; } /* Prix plus gros et plus gras */ .product-price { font-size: 1.15rem; font-weight: 800; } ``` Les effets de survol sont désactivés sur téléphone — laissez-les désactivés Tous les thèmes embarquent des surcharges `@media (hover: none) and (pointer: coarse)` marquées `!important` qui neutralisent les transformations `.product-card:hover` et masquent `.product-actions`. C'est volontaire : toute la carte est cliquable, et sur iOS un état de survol actif consomme le **premier tap** de l'acheteur, si bien que le produit ne s'ouvre plus au premier contact. Ne forcez pas le retour des styles de survol sur les appareils tactiles. ### En-tête et navbar[​](#en-tête-et-navbar "Lien direct vers En-tête et navbar") ``` /* Ombre sous l'en-tête */ .navbar-store { box-shadow: 0 2px 12px rgba(0, 0, 0, .06) !important; } /* En-tête plein aux couleurs de la marque */ .navbar-store { background: #111827 !important; } ``` L'en-tête collant, l'ombre et la bordure de l'en-tête disposent déjà d'interrupteurs dans **Personnaliser → En-tête et Logo** : utilisez-les en priorité, ils survivent aux changements de thème. Pour un en-tête collant, utilisez l'interrupteur : une règle `position` ici ne fait rien sur la plupart des pages et, avec `!important`, peut laisser un vide sous l'en-tête sur téléphone. ### Barre d'annonce[​](#barre-dannonce "Lien direct vers Barre d'annonce") ``` /* Barre d'annonce en dégradé, bien visible */ .announcement-bar { background: linear-gradient(90deg, #f59e0b, #ef4444) !important; color: #fff !important; font-weight: 600 !important; letter-spacing: .3px; } ``` ### Polices et typographie[​](#polices-et-typographie "Lien direct vers Polices et typographie") Le CSS personnalisé prend en charge `@import`, vous pouvez donc charger une Google Font et l'appliquer partout. Placez la ligne `@import` **tout en haut** du champ. Les polices de Google Fonts se chargent ; les feuilles de style et polices de la plupart des autres services de polices sont bloquées par la politique de sécurité de la boutique. ``` /* Charger des Google Fonts et les utiliser dans toute la boutique */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;800&display=swap'); body { font-family: 'Poppins', sans-serif; } /* Une police différente, plus grasse, uniquement pour les titres */ h1, h2 { font-family: 'Sora', sans-serif; letter-spacing: -.5px; } ``` N'oubliez pas le plafond de 50 Ko : une longue liste de lignes `@import` plus une grosse feuille de style peut l'atteindre et être tronquée silencieusement. Boutiques en arabe Pour les boutiques arabophones, choisissez une police avec une couverture complète des glyphes arabes — **Cairo**, **Tajawal** ou **Almarai** conviennent toutes : `@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');` ### Hero[​](#hero "Lien direct vers Hero") Il n'existe pas de classe `.hero` partagée — remplacez-la par le sélecteur de hero de votre thème : `.hero-section` (Starter), `.dt-hero-section` (Digital), `.sc-hero` (Started V2, Bloom), `.pr-hero` (Prestige), `.pm-hero` (Promobi). L'exemple ci-dessous utilise celui de Starter. ``` /* Assombrir le hero pour que le texte superposé reste lisible */ .hero-section::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); } .hero-section h1 { position: relative; z-index: 1; text-shadow: 0 2px 12px rgba(0,0,0,.4); } ``` ### Pied de page[​](#pied-de-page "Lien direct vers Pied de page") ``` /* Pied de page sombre avec liens aux couleurs de la marque au survol */ .footer { background: #0f172a !important; color: #cbd5e1 !important; } .footer a { color: #cbd5e1 !important; transition: color .15s ease; } .footer a:hover { color: #f59e0b !important; } ``` remarque `.footer` couvre toutes les pages sauf la **page d'accueil Brico**, qui rend son propre pied de page : utilisez `.brico-footer` dans ce cas, en plus de `.footer` pour les autres pages de Brico. La couleur du pied de page dispose aussi d'un sélecteur intégré (Personnaliser → Pied de page, Pro+). ### Ajustements mobile uniquement[​](#ajustements-mobile-uniquement "Lien direct vers Ajustements mobile uniquement") Enveloppez les règles dans une requête `@media` pour qu'elles ne s'appliquent qu'aux petits écrans : ``` @media (max-width: 768px) { /* Boutons plus grands, plus faciles à toucher sur téléphone */ .add-to-cart { padding: 14px 18px; font-size: 1rem; } /* Coins de cartes plus doux sur mobile */ .product-card { border-radius: 12px; } } ``` Deux choses que l'on tente souvent ici et qui ne marchent pas : * **Masquer la barre de recherche.** Il n'existe pas de classe de recherche partagée ; la recherche est limitée à la page d'accueil et propre à chaque thème (`.brico-search`, `.sc-search`, `.pr-search`, `.pm-search`, `.search-section`). Le personnalisateur a un interrupteur **Barre de recherche** : utilisez-le à la place. * **Forcer une grille produit à deux colonnes.** Les grilles produits de la page d'accueil sont déjà sur deux colonnes en mobile : des colonnes Bootstrap (`col-6 col-md-4 col-lg-3`) sur la plupart des thèmes, `.pm-grid` sur Promobi. Les pages tous les produits et catégorie utilisent `.products-grid`. `.product-grid` est le conteneur galerie + infos de la **page de détail produit** : le cibler écrase la galerie et la colonne d'infos côte à côte sur téléphone et ne change rien à la page d'accueil. ### Masquer ce dont vous ne voulez pas[​](#masquer-ce-dont-vous-ne-voulez-pas "Lien direct vers Masquer ce dont vous ne voulez pas") ``` /* Masquer le bouton WhatsApp flottant (ou désactivez-le dans Personnaliser → Widget d'aide) */ .whatsapp-float, .dzhw-launcher { display: none !important; } /* Masquer la barre d'annonce */ .announcement-bar { display: none; } ``` attention Ne masquez jamais vos boutons **Acheter / Ajouter au panier** (`.add-to-cart`, ainsi que les boutons Acheter maintenant et Fast Checkout) — cela empêche les clients de commander. Utilisez l'aperçu en direct pour confirmer qu'ils restent visibles. Si vous voulez vraiment les retirer sur certaines pages, le personnalisateur dispose de vrais interrupteurs pour cela (Personnaliser → Carte produit et Personnaliser → Page produit, Pro+). ### Micro-animations fluides[​](#micro-animations-fluides "Lien direct vers Micro-animations fluides") ``` /* Faire apparaître la page en fondu au chargement */ body { animation: dzfade .4s ease both; } @keyframes dzfade { from { opacity: 0; } to { opacity: 1; } } /* Transitions de couleurs/ombres fluides partout */ a, button, .product-card { transition: all .15s ease; } ``` *** ## Bonnes pratiques[​](#bonnes-pratiques "Lien direct vers Bonnes pratiques") * **Prévisualisez avant d'enregistrer** — le panneau de droite se met à jour en direct pendant que vous tapez. N'enregistrez que quand le rendu vous convient. * **Mobile d'abord** — la plupart des acheteurs algériens sont sur téléphone. Vérifiez toujours l'aperçu mobile *et* un vrai téléphone. * **Ne masquez pas l'interface critique** — gardez Acheter/Ajouter au panier, le prix et le checkout visibles. * **Restez léger** — quelques règles ciblées valent mieux qu'une feuille de style gigantesque, et le champ est plafonné à **50 Ko** avec troncature silencieuse au-delà. * **Utilisez un réglage intégré quand il existe** — voir le tableau en haut de cette page. Un réglage du personnalisateur ne sera pas annulé par une mise à jour de thème. * **Utilisez les sélecteurs de couleur pour les couleurs de marque** (Personnaliser → Couleurs et Police) : un seul changement re-skinne toute la boutique. Les variables CSS (`--primary`, `--gradient`, `--pd-buynow`) n'atteignent que les pages qui les lisent, comme l'explique la section des variables plus haut. * **Vérifiez les deux langues** — si vous vendez en arabe (RTL) et en français/anglais (LTR), prévisualisez les deux pour qu'un ajustement `margin-left` ne casse pas l'autre sens. * **`@import` en premier** — les imports de polices doivent être tout en haut du champ, sinon le navigateur les ignore. *** ## Dépannage[​](#dépannage "Lien direct vers Dépannage") | Symptôme | Cause probable | Solution | | ------------------------------------------------------ | -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Ma règle ne s'applique pas | La règle du thème est plus spécifique | Ajoutez `!important`, ou ciblez plus précisément (ex. `.product-card .add-to-cart`) | | Ma règle ne s'applique pas | Le sélecteur n'existe pas sur DZBuild | `.btn-primary`, `.header-search` et `.hero` sont les coupables habituels — voir l'aide-mémoire | | Toujours rien | Faute de frappe dans le sélecteur / point-virgule ou accolade manquants | Revérifiez le bloc ; une seule accolade cassée peut désactiver tout le reste | | La fin de ma feuille de style ne fait rien | Vous avez dépassé le plafond de 50 Ko et le CSS a été tronqué à l'enregistrement | Raccourcissez le CSS | | Le changement apparaît dans l'aperçu mais pas en ligne | Les pages de la vitrine sont mises en cache quelques minutes | Attendez environ cinq minutes, puis rechargez de force (Ctrl/Cmd+Maj+R) ou ouvrez une fenêtre privée. Il n'existe pas de purge manuelle, et une page déjà chargée par un visiteur garde l'ancien CSS jusqu'à l'expiration de sa copie en cache | | Ma police ne se charge pas | `@import` n'est pas en haut | Déplacez chaque ligne `@import` tout en haut du champ | | Rien ne change sur ma landing page | Le CSS personnalisé ne s'applique pas aux pages `/landing/…` | Stylisez la landing page depuis l'éditeur de landing pages | | La boutique paraît cassée | Une règle est allée trop loin | **Videz le champ et enregistrez** pour revenir instantanément — rien n'est permanent | Une balise de fermeture égarée ne peut pas casser votre page Si une chaîne `` ou `` se retrouve dans le champ, DZBuild l'échappe avant qu'elle n'atteigne la page : elle ne peut donc ni terminer la feuille de style ni injecter du balisage. Elle est échappée plutôt que conservée, ne vous attendez donc pas à ce qu'un tel texte s'affiche. *** ## Revenir en arrière à tout moment[​](#revenir-en-arrière-à-tout-moment "Lien direct vers Revenir en arrière à tout moment") Le CSS personnalisé n'est jamais destructif. Pour tout annuler, **videz le champ CSS personnalisé et cliquez sur Enregistrer**. Votre boutique revient aux valeurs par défaut du thème au prochain chargement de page. Vos produits, commandes et paramètres restent intacts. Vous voulez changer la mise en page, les couleurs, les polices ou les sections sans code ? La plupart de ces réglages sont intégrés à l'éditeur visuel — voir **[Personnalisation de la boutique](https://dzbuild.com/fr/fr/docs/storefront/customization.md)**.