Personnalisation de la boutique
Le personnalisateur DZBuild est un éditeur en direct : modifiez un réglage à gauche, et regardez l'aperçu de la boutique se mettre à jour à droite. Chaque sauvegarde publie en quelques secondes.
🎬 Vidéo — démonstration complète
Où le trouver
- Page de personnalisation générale : Tableau de bord → Personnaliser (
/dashboard/customize) — fonctionne pour tous les thèmes. - Pages spécifiques aux thèmes (uniquement pour les thèmes qui ont des options en plus) :
- Digital :
/dashboard/customize/digital - Prestige :
/dashboard/customize/prestige
- Digital :
Si votre thème actif a une page dédiée, allez-y pour trouver les options propres au thème comme l'uploader de bannière Digital ou l'opacité d'overlay hero Prestige.
Ce que vous pouvez personnaliser
| Section | Contrôles |
|---|---|
| Marque | Logo, favicon, image OG / carte sociale |
| Couleurs | Primaire, secondaire, fond, texte |
| Typographie | Police courante (Cairo, Tajawal, Almarai, Inter, Roboto), police de titres optionnelle |
| Header | Position du logo, barre de recherche, icône panier, sélecteur de langue |
| Hero | Image / vidéo / carrousel produits, titre, sous-titre, bouton CTA + lien cible |
| Bannières | 1–3 bannières promotionnelles, lien cible par bannière |
| Produits en avant | Choisissez les produits affichés sur la page d'accueil |
| Catégories en avant | Bloc des catégories en avant |
| Footer | Colonnes de liens, icônes sociales, icônes de paiement, contact |
| Menu mobile | Bottom nav (Digital / Showcase) ou hamburger (autres) |
| Popup panier | Textes et chaînes de traduction du panier coulissant |
| CSS personnalisé (Pro) | Injectez du CSS pour surcharger les valeurs par défaut |
Workflow
- Ouvrez Tableau de bord → Personnaliser.
- Le panneau de gauche contient tous les contrôles ; le panneau de droite affiche un aperçu en direct.
- Basculez entre les aperçus desktop et mobile en haut.
- Cliquez sur Enregistrer quand vous êtes satisfait. Les changements sont en ligne en ~2 secondes.
- Utilisez Annuler pour revenir sur les modifications non sauvegardées.
Téléverser des images depuis le personnalisateur
Glissez-déposez ou cliquez sur n'importe quel contrôle d'image pour téléverser. En arrière-plan, la page appelle :
/dashboard/customize/upload— upload d'image générique (logo, favicon, image OG)./dashboard/customize/digital/upload-banner— uploader de bannière dédié au thème Digital.
Les images sont stockées sur notre CDN et servies via cdn.dzbuild.app avec redimensionnement à la volée.
Réinitialiser aux valeurs par défaut
Si une session de personnalisation tourne mal, Tableau de bord → Personnaliser → Réinitialiser (/dashboard/customize/reset) restaure les valeurs par défaut du thème actif. Vos produits, commandes et autres données ne sont pas affectés — seul l'aspect visuel.
Options spécifiques au thème
Chaque thème expose un petit ensemble de réglages qui lui sont propres. En résumé :
- Digital — variante du hero (image / vidéo / carrousel), border-radius des cartes, toggle de bottom-nav mobile, uploader de bannière.
- Prestige — opacité d'overlay hero, couleur d'accent, style de bouton.
- Showcase — comportement du hero plein écran, mise en avant de la page produit.
- Brico — densité de la grille (2 / 3 / 4 cols), style des cartes catégorie.
- Starter — layout du header, layout du footer.
Voir les docs par thème pour ce que chacun expose.
CSS personnalisé (Pro)
Le plan Pro expose un champ CSS personnalisé. Tout ce que vous y mettez est chargé après la feuille de style du thème, donc vos règles ont priorité.
/* Arrondir tous les boutons primaires */
.btn-primary { border-radius: 999px; }
/* Cacher la barre de recherche sur mobile */
@media (max-width: 768px) {
.header-search { display: none; }
}
Le CSS personnalisé est puissant mais facile à casser. Si votre boutique paraît cassée après une modification CSS, videz le champ et sauvegardez pour revenir en arrière — il n'y a aucune modification destructive.
Conseils
- Prévisualisez sur un vrai téléphone, pas seulement sur l'onglet d'aperçu mobile. Les acheteurs algériens shoppent massivement sur mobile, souvent sur des réseaux lents.
- Surveillez le panier coulissant dans toutes les langues que vous prenez en charge. Les chaînes de traduction diffèrent entre thèmes — Prestige en particulier utilise des clés différentes des autres.
- Ne sur-personnalisez pas les couleurs. Limitez-vous à deux couleurs d'accent et laissez vos photos faire le reste.
- Après une grosse session de personnalisation, partagez votre URL en privé sur WhatsApp — l'aperçu OG est un bon test rapide.