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 pour passer à la version supérieure.

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 du thème, donc vos règles ont priorité.

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 Ko. Tout ce qui dépasse est coupé à l'enregistrement, sans aucune erreur affichée, ce qui 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é

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)

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

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

Ouvrez votre boutique sur un navigateur desktop (Chrome, Firefox, Edge).
Clic droit sur l'élément à modifier → Inspecter.
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.
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

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)
`.announcement-bar`	Le bandeau promo fin au-dessus de l'en-tête
`.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
`.footer`	Le pied de page sur tous les thèmes sauf Brico, qui embarque son propre `.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, .mobile-search (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

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, --footer-bg, --border-color). En cas de doute, définissez les deux.

Les boutons de la page produit exposent leurs propres variables, émises quand vous réglez la couleur correspondante dans Personnaliser → Page produit :

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)

/* Rebrander toute la boutique en un seul bloc */
:root {
  --primary: #6d28d9;
  --secondary: #a78bfa;
  --btn-radius: 12px;
  --background: #faf7f2;
  --bg: #faf7f2;
}

Modèles

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

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

/* 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 collant avec une ombre */
.navbar-store {
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

/* En-tête plein aux couleurs de la marque */
.navbar-store { background: #111827; }

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.

Barre d'annonce

/* Barre d'annonce en dégradé, bien visible */
.announcement-bar {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  color: #fff;
  font-weight: 600;
  letter-spacing: .3px;
}

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.

/* Charger une Google Font et l'utiliser dans toute la boutique */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

body { font-family: 'Poppins', sans-serif; }

/* Une police différente, plus grasse, uniquement pour les titres */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;800&display=swap');
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

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 sombre avec liens aux couleurs de la marque au survol */
.footer { background: #0f172a; color: #cbd5e1; }
.footer a { color: #cbd5e1; transition: color .15s ease; }
.footer a:hover { color: #f59e0b; }

remarque

.footer couvre tous les thèmes sauf Brico, qui rend son propre pied de page — utilisez .brico-footer dans ce cas. La couleur du pied de page dispose aussi d'un sélecteur intégré (Personnaliser → Pied de page, Pro+).

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, .mobile-search). 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 des colonnes Bootstrap (col-6 col-md-4 col-lg-3) et sont déjà sur deux colonnes en mobile. 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 le bouton WhatsApp flottant */
.whatsapp-float { display: none; }

/* 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

/* 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

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 variables de marque (--primary, --gradient, --pd-buynow) — un seul changement re-skinne toute la boutique.
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

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	Le cache de votre propre navigateur	Un changement enregistré atteint les visiteurs en quelques secondes : il devrait déjà être visible pour tout le monde. Rechargez de force (Ctrl/Cmd+Maj+R) ou ouvrez une fenêtre privée
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 </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.

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 immédiatement aux valeurs par défaut du thème. 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.

Où le coller​

Cherchez d'abord un réglage intégré​

Comment fonctionne le CSS (initiation en 60 secondes)​

Trouver le bon sélecteur​

Aide-mémoire des sélecteurs DZBuild​

Variables CSS de marque​

Modèles​

Boutons​

Cartes produit​

En-tête et navbar​

Barre d'annonce​

Polices et typographie​

Hero​

Pied de page​

Ajustements mobile uniquement​

Masquer ce dont vous ne voulez pas​

Micro-animations fluides​

Bonnes pratiques​

Dépannage​

Revenir en arrière à tout moment​