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.

📝 Remarque — Fonctionnalité Entreprise

Le CSS personnalisé est disponible sur le plan Entreprise. Sur les autres plans, le champ apparaît verrouillé. Consultez les plans pour passer à la version supérieure.

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.

💡 Astuce — 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.

⚠️ Attention — 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.

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 :

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.

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) :

C'est vraiment l'essentiel de ce dont vous avez besoin. Tout ce qui suit est du copier-coller.

Vous n'avez presque jamais besoin de deviner. Utilisez l'inspecteur de votre navigateur :

💡 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.

Les sélecteurs les plus utiles et les plus stables entre thèmes :

Trois sélecteurs qui circulent dans d'anciens extraits ne fonctionnent pas sur les boutiques DZBuild :

Déclarées par les 7 thèmes actifs :

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 :

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.

Copiez n'importe quel bloc dans le champ CSS personnalisé. Mélangez à volonté.

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.

⚠️ Attention — 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.

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.

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.

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.

💡 Astuce — 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');

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.

📝 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+).

Enveloppez les règles dans une requête @media pour qu'elles ne s'appliquent qu'aux petits écrans :

Deux choses que l'on tente souvent ici et qui ne marchent pas :

⚠️ 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+).

📝 Remarque — Une balise de fermeture égarée ne peut pas casser votre page

Si une chaîne </style> ou </script> 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.

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.