Achat Modèles CSS

Modèles CSS d'achat modernes

Un prix barré, un badge de promotion éclatant et un bouton qui s'estompe lorsqu'une taille est épuisée proviennent tous de la feuille de style. Les modèles CSS d'achat vous fournissent ces styles à l'avance pour les fiches produits, les blocs de prix et les sélecteurs d'options. Vous ajustez la palette et les espacements selon votre marque, et les règles visuelles pour chaque situation d'achat sont déjà prêtes.

Les états visuels que remarquent les clients

Le prix et le bouton d'achat sont les éléments les plus importants d'une fiche produit. De bons styles leur accordent la priorité grâce à la graisse de la police, à la taille et aux espacements. Une brève ligne de caractéristiques ou une mention de livraison reste plus petite et plus légère, facile à lire et tout aussi facile à survoler. Les états ci-dessous apparaissent dans la plupart des boutiques, et chacun exige sa propre apparence :

• un prix de vente placé à côté de l'ancien, ce dernier étant barré et atténué ;
• une option sélectionnée qui se distingue des tailles non sélectionnées situées à côté ;
• une variante indisponible ou un bouton désactivé qui apparaît inactif au premier coup d'œil ;
• des styles de survol et de focus qui indiquent qu'un élément est prêt à être actionné, y compris pour les utilisateurs au clavier.

Les mentions de stock et les badges de réduction sont purement informatifs. Les sélecteurs d'options et le bouton d'achat incitent en revanche à cliquer. Un bon style préserve cette distinction, de sorte qu'un badge rouge ne ressemble jamais à un élément cliquable.

Descriptions inégales, écrans étroits

Les règles Grid et Flexbox déterminent la manière dont une rangée de cartes gère des produits aux descriptions de longueurs inégales. Un nom de produit trop long peut repousser le prix et le bouton plus bas que sur la carte voisine, rendant la comparaison difficile dans la rangée. Des modèles fiables ancrent ces deux éléments au bas de chaque carte afin qu'ils restent alignés sur toute la rangée, peu importe la hauteur du texte au-dessus. Sur mobile, les cartes passent sur moins de colonnes et le bouton s'étire souvent sur toute la largeur de la carte pour être facilement touché. Le prix, les options et le bouton s'empilent ensuite dans l'ordre naturel de lecture de l'acheteur.

Classes réutilisables pour des grilles de cartes denses

Comme les mêmes éléments se répètent sur des dizaines de cartes, les styles fonctionnent mieux sous forme de classes réutilisables pour la carte, le prix et le badge de promotion. Nicepage Theme Colors applique une palette de couleurs globale à travers les pages du projet, préservant la cohérence des accents des boutons et des prix tout en assurant la mise en valeur propre à chaque offre. Un catalogue compact nécessite des cartes denses et des boutons courts.

Les produits comportant plusieurs options exigent des cartes plus hautes, davantage d'espace entre les sélecteurs et un bouton positionné sous le dernier choix. Le choix idéal est généralement le modèle dont les styles couvrent déjà votre carte la plus dense, vos badges et vos différents états.