Slider de recommandations de produits — cartes premium sombres

Type d’action : Recommandations de produits. Configuré depuis : le menu de l’action — aucun code nécessaire.

Le slider Dark Premium présente les recommandations sur des cartes presque noires, avec des photos de produits pleine largeur, un texte clair et des accents dorés — le prix, le point de pagination actif et le bouton Add to Cart reprennent tous l’or. Au survol, une carte se soulève avec une ombre lumineuse profonde. Il convient à l’électronique, au luxe, à la mode, au gaming et à tout site au design sombre ou très contrasté.

Le slider de recommandations Dark Premium Cards : cartes presque noires, photos de produits pleine largeur, texte clair, prix dorés et badges vifs — Dark Premium Cards : panneaux presque noirs, prix doré et badges vifs qui restent lisibles sur la surface sombre.

Ce modèle repose sur le même moteur que le slider Overlay Card — chaque option de slider, de flèches, de points, de lecture automatique, de badges et de mode démo fonctionne de la même façon. Cette page traite de ce qui est propre à ce style. Pour la référence complète des options, voir le guide du slider Overlay Card.

Ce qui définit ce style

Panneaux de carte sombres (#16181d, rayon de 12 px, bordure discrète) avec la photo qui remplit le haut d’un bord à l’autre (background-size: cover — fonctionne avec tout style de photo, y compris les photos d’ambiance).
Texte clair sur fond sombre sous l’image : titre presque blanc, ligne vues/ventes atténuée avec le nombre de ventes en doré, et le prix en doré gras (#d4af6a). Les sections Product Title, Site Statistics et Pricing sont activées par défaut.
Add to Cart doré avec texte sombre, activé par défaut, révélé au survol pendant que la carte se soulève avec une ombre lumineuse.
Badges vifs — le Best Seller orange, les Popular/New bleus et les badges rouges de stock/remise restent volontairement éclatants ; ils ressortent nettement sur les cartes sombres.
Flèches rondes sombres avec chevrons dorés, qui passent en or plein au survol, plus un point de pagination actif doré et une barre de défilement sombre — tout l’ensemble des contrôles suit le thème.

L’accent doré

L’or (#d4af6a) apparaît à cinq endroits, chacun avec son propre champ de menu : adapter l’accent à votre couleur ne demande donc que quelques modifications :

Sale / Regular Price Style — section Pricing
Purchases Icon Style — section Site Statistics
Button Style + Hover — section Add to Cart
Active Dot Style — section Pagination Dots
Side Arrow Custom Style + Hover — section Slider Arrows

Remplacez #d4af6a par la couleur de votre marque dans ces champs, et le thème suit.

Démarrage rapide

Ajoutez l’action et choisissez le modèle de slider Dark Premium Cards.
Faites pointer Main Product Image Column (Card Image Style) vers le champ d’image de votre catalogue. Tant qu’aucun catalogue n’est connecté, six produits de démonstration apparaissent dans l’éditeur avec une bannière d’avertissement — les visiteurs ne les voient jamais, et ils disparaissent dès que votre catalogue est chargé.
Définissez le nombre d’éléments visibles pour ordinateur / tablette / mobile dans Slider & Items Per View.
Vérifiez le widget par rapport au fond de votre page : les cartes sombres fonctionnent sur les pages claires comme sombres, mais sur une page sombre, vous voudrez peut-être éclaircir la Card Border Color ou ajouter un fond via Container Style pour les détacher.
Prévisualisez sur les trois tailles d’appareil, puis publiez.

Travailler dans l’éditeur

Le modèle Dark Premium Cards ouvert dans l’éditeur Personyze, avec la barre latérale des options, l’avertissement des produits de démonstration, l’info-bulle de clic pour modifier et les badges — 1 La barre latérale des options — chaque partie du widget y a sa section. Cliquez sur l’une d’elles pour déplier ses réglages.
2 L’**avertissement des produits de démonstration**, affiché seulement tant qu’aucun catalogue n’est connecté. Les vrais visiteurs ne voient jamais les cartes de démonstration ni cette bannière.
3 **Cliquer pour modifier** — cliquer sur n’importe quel élément de l’aperçu mène directement à son option, sans chercher dans la barre latérale.
4 et 5 Les badges s’empilent automatiquement dans les coins sans se chevaucher — ici Popular et un avertissement rouge de stock faible sur la même carte.

On accède aux options de deux façons : choisissez une section dans la barre latérale, ou cliquez directement sur l’élément dans l’aperçu pour déplier ses réglages. Pour les développeurs, HTML Source (advanced) s’ouvre en bas. Prévisualisez en Téléphone, Tablette ou Ordinateur pour vérifier chaque point de rupture avant de publier.

Changer de style sans changer de modèle

Les trois modèles de slider ne diffèrent que par leurs valeurs par défaut : celui-ci peut donc être remodelé depuis le menu :

Recolorez les cartes en blanc avec un texte sombre, et vous obtenez le style Clean Catalog.
Activez Show Text on Image avec le Gradient Overlay et désactivez les blocs sous l’image pour obtenir le style Overlay.

Utilisez le modèle qui part au plus près de votre objectif — c’est moins de travail que d’en remodeler un qui en part loin.

FAQ

Le texte du titre est invisible.
Vous prévisualisez probablement après avoir passé le fond de la carte à une couleur claire — les textes par défaut sont clairs sur fond sombre. Recolorez Title Text Style, la ligne de statistiques et les styles de prix en même temps que le fond de la carte.

Les photos sur fond blanc ressemblent à des boîtes blanches sur la carte sombre.
C’est la nature des photos détourées sur une surface sombre. Utilisez des photos d’ambiance, ou réglez Card Box Style sur background-size: contain avec background-color: #ffffff pour un effet de photo encadrée dans la carte sombre.

Puis-je utiliser un autre accent que l’or ?
Oui — voir L’accent doré ci-dessus ; ce sont cinq champs de menu.

Les produits de démonstration s’affichent-ils parfois aux vrais visiteurs ?
Non. Ils ne s’affichent que dans l’éditeur et sur les liens d’aperçu, et seulement tant qu’aucun catalogue n’est connecté.

Voir aussi

Slider de recommandations Overlay Card — la référence complète des options du moteur commun.
Clean Catalog Cards — la version claire.
Tous les modèles
Configurer le flux de produits