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

Tableau de bord → Personnaliser → CSS personnalisé (CSS مخصّص / 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.

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

.btn-primary { color: white; background: #f59e0b; }
/* └─ sélecteur ┘  └─── déclarations : propriété: valeur; ───┘ */

Un sélecteur désigne des éléments. Les types les plus courants :
- .classname — chaque élément portant cette classe (ex. .btn-primary). C'est ce que vous utiliserez dans 95 % des cas.
- tag — chaque élément d'un type donné (ex. button, h1, img).
- #id — l'unique élément portant cet id.
- .a .b — un .b à l'intérieur d'un .a. .a > .b — un .b qui est un enfant direct de .a.
- .a:hover — un .a pendant que la souris est dessus.
Une déclaration est propriété: valeur;. 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 .btn-primary { … } bat celui du thème.
!important force une valeur à l'emporter. À utiliser avec parcimonie — uniquement quand une règle normale ne suffit pas à surcharger le thème :

.btn-primary { border-radius: 999px !important; }

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

Trouver le bon sélecteur

Vous avez rarement besoin de deviner. Utilisez l'inspecteur de votre navigateur :

Ouvrez votre boutique sur un navigateur de bureau (Chrome, Firefox, Edge).
Clic droit sur l'élément que vous voulez 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 peuvent varier légèrement d'un thème à l'autre (Digital, Prestige, Showcase, Brico, Starter). En cas de doute, inspectez votre propre boutique plutôt que de copier une classe à l'aveugle — puis déposez-la dans l'aperçu pour confirmer.

Aide-mémoire des sélecteurs DZBuild

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

Sélecteur	Cible
`.navbar`	Le header / la barre de navigation en haut
`.announcement-bar`	La fine bande promo au-dessus du header
`.header-search`	Le champ de recherche dans le header
`.hero`	Le grand bloc bannière en haut de la page d'accueil
`.product-card`	Une tuile produit dans n'importe quelle grille de produits
`.product-image`	L'image à l'intérieur d'une carte produit
`.product-price`	Le texte du prix sur une carte produit
`.product-actions`	Les boutons d'action au survol d'une carte produit
`.add-to-cart`	Les boutons « Ajouter au panier » dans les grilles
`.btn-primary`	Les boutons primaires (Acheter, Commander, etc.)
`.whatsapp-float`	Le bouton WhatsApp flottant
`.footer`	Le pied de page

Certains thèmes exposent des variables CSS de marque que vous pouvez surcharger globalement :

Variable	Contrôle
`--primary`	Couleur de marque primaire
`--secondary`	Couleur secondaire
`--gradient`	Dégradé primaire→secondaire (boutons, hero)
`--btn-radius`	Arrondi des coins de boutons
`--background`	Fond de la page

/* Reskinner toute la boutique en un seul bloc (thèmes qui utilisent des variables) */
:root {
  --primary: #6d28d9;
  --secondary: #a78bfa;
  --btn-radius: 12px;
}

Modèles

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

Boutons

/* Boutons en pilule (entièrement arrondis) */
.btn-primary { border-radius: 999px; }

/* Boutons en dégradé avec une légère élévation au survol */
.btn-primary {
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  border: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, .35);
}

/* Style contour (outline) */
.btn-primary {
  background: transparent;
  color: #f59e0b;
  border: 2px solid #f59e0b;
}
.btn-primary: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 de l'image produit au survol */
.product-card:hover .product-image { transform: scale(1.04); }
.product-image { transition: transform .3s ease; }

/* Rendre le prix plus grand et plus gras */
.product-price { font-size: 1.15rem; font-weight: 800; }

Header et navbar

/* Header collant avec une ombre */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

/* Header plein, aux couleurs de la marque */
.navbar { background: #111827; }

Barre d'annonce

/* Barre d'annonce en dégradé qui attire l'œil */
.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 lourde, rien que pour les titres */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;800&display=swap');
h1, h2, .hero h1 { font-family: 'Sora', sans-serif; letter-spacing: -.5px; }

Boutiques en arabe

Pour les boutiques en arabe, choisissez une police avec une couverture complète des glyphes arabes — Cairo, Tajawal ou Almarai conviennent toutes très bien : @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');

Hero

/* Assombrir le hero pour que le texte superposé reste lisible */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
}
.hero h1 { position: relative; z-index: 1; text-shadow: 0 2px 12px rgba(0,0,0,.4); }

/* Footer sombre avec des liens qui changent de couleur au survol */
.footer { background: #0f172a; color: #cbd5e1; }
.footer a { color: #cbd5e1; transition: color .15s ease; }
.footer a:hover { color: #f59e0b; }

Ajustements réservés au mobile

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

@media (max-width: 768px) {
  /* Des boutons plus grands et plus faciles à toucher sur téléphone */
  .btn-primary { padding: 14px 18px; font-size: 1rem; }

  /* Masquer la barre de recherche sur mobile pour gagner de la place */
  .header-search { display: none; }

  /* Deux colonnes de produits au lieu d'une */
  .product-grid { grid-template-columns: 1fr 1fr; }
}

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 (.btn-primary, .add-to-cart) — cela empêche les clients de commander. Utilisez l'aperçu en direct pour confirmer qu'ils restent visibles.

Micro-animations fluides

/* Faire apparaître tout en fondu au chargement */
body { animation: dzfade .4s ease both; }
@keyframes dzfade { from { opacity: 0; } to { opacity: 1; } }

/* Transitions de couleur/ombre 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 au fil de votre saisie. N'enregistrez que lorsque 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 paiement visibles.
Restez sobre — quelques règles ciblées valent mieux qu'une feuille de style géante. Moins à maintenir, moins à casser.
Utilisez les variables de marque (--primary, --gradient) quand votre thème les prend en charge — un seul changement reskinne 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 de margin-left ne casse pas l'autre sens.
@import en premier — les imports de police 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 .btn-primary`)
Toujours rien	Faute de frappe dans le sélecteur / `;` ou `}` manquant	Revérifiez le bloc ; une seule paire `{ }` cassée peut désactiver le reste
Le changement apparaît dans l'aperçu mais pas en ligne	Cache edge	Patientez un instant et forcez le rechargement (Ctrl/Cmd+Shift+R)
Ma police ne se charge pas	`@import` n'est pas en haut	Déplacez chaque ligne `@import` tout en haut du champ
La boutique paraît cassée	Une règle est allée trop loin	Videz le champ et enregistrez pour revenir en arrière instantanément — rien n'est permanent

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 réglages restent intacts.

Vous voulez changer la mise en page, les couleurs, les polices ou les sections sans coder ? La plupart de ces options sont intégrées à l'éditeur visuel — voir Personnalisation de la boutique.

Où le coller​

Comment fonctionne le CSS (initiation en 60 secondes)​

Trouver le bon sélecteur​

Aide-mémoire des sélecteurs DZBuild​

Modèles​

Boutons​

Cartes produit​

Header et navbar​

Barre d'annonce​

Polices et typographie​

Hero​

Footer​

Ajustements réservés au mobile​

Masquer ce dont vous ne voulez pas​

Micro-animations fluides​

Bonnes pratiques​

Dépannage​

Revenir en arrière à tout moment​