Ce guide offre un aperçu complet de la façon de personnaliser l'apparence des éléments de personnalisation intégrés à la page dans ta boutique Shopify. Nous allons explorer les sélecteurs CSS et les bonnes pratiques pour t'aider à offrir une expérience d'achat sur mesure et engageante à tes clients.
Comprendre la structure CSS sur Shopify
Chaque composant de personnalisation sur ta page Shopify est structuré dans un cadre CSS spécifique. Cette structure permet un style ciblé et garantit la cohérence du design à travers tes éléments personnalisés. Décortiquons les composants clés :
Conteneur principal
Le conteneur principal sert d'enveloppe pour tous les composants de personnalisation. Utilise la classe suivante pour appliquer un style global à toute ta section de personnalisation :
.g-selector-container: Cette classe représente le conteneur principal.
Types de personnalisation
Les différents types de personnalisation, comme le texte, les images ou les variantes, sont distingués par des classes supplémentaires. Cela te permet d'appliquer des styles spécifiques en fonction du type de contenu :
.g-selector-variants: Pour la personnalisation basée sur les variantes de produit comme la taille ou la couleur..g-selector-text: Pour les personnalisations basées sur du texte..g-selector-image: Pour les personnalisations utilisant des images, comme les images téléchargées par l'utilisateur..g-selector-collection: Pour afficher une collection d'options, comme des échantillons de couleurs ou des motifs..g-selector-condition: Pour la logique de personnalisation conditionnelle, où les options apparaissent en fonction des sélections précédentes de l'utilisateur.
Libellé pour le nom de l'élément
Chaque type de personnalisation inclut un élément enfant pour le libellé ou le titre. Tu peux personnaliser ce libellé en utilisant le sélecteur suivant :
.g-selector-label: Utilise ce sélecteur pour styliser le texte qui décrit les options de personnalisation, par exemple, « Choisis ta taille » ou « Sélectionne une couleur. »
Personnaliser les boutons et les états sur Shopify
Les boutons sont des éléments essentiels de la personnalisation, souvent utilisés pour sélectionner des variantes ou des conditions. Voici comment tu peux personnaliser leur apparence :
Conteneurs de boutons et boutons
.g-selector-buttons: Cette classe représente le conteneur qui contient tous les boutons pour une option spécifique..g-selector-button: Cette classe est appliquée à chaque bouton individuel dans le conteneur.
États des boutons
Tu peux styliser différents états des boutons pour fournir un retour visuel aux utilisateurs :
.g-selector-button-active: Cette classe est appliquée lorsqu'un bouton est actuellement sélectionné par l'utilisateur..g-selector-button-disabled: Cette classe est appliquée lorsqu'un bouton est indisponible ou non cliquable.
Styliser les miniatures d'images sur Shopify
Pour les personnalisations qui impliquent des choix basés sur des images, comme des échantillons de couleur, tu peux utiliser la classe suivante :
.g-selector-collection-thumbnail: Cette classe est appliquée à chaque miniature d'image dans une collection. Tu peux personnaliser cette classe pour ajuster la taille, les bordures et la mise en page de ces images.
Exemples de personnalisations CSS sur Shopify
Voici un exemple de comment tu peux personnaliser l'apparence des sélecteurs en utilisant CSS. N'oublie pas de maintenir la cohérence avec ta marque et d'assurer la réactivité sur différents appareils.
/* Styles généraux du conteneur */.g-selector-container { padding: 20px; border: 1px solid #e0e0e0; background-color: #f9f9f9; } /* Styles pour les étiquettes */.g-selector-label { font-size: 14px; color: #333; margin-bottom: 8px; } /* Boutons */.g-selector-button { background-color: #007bff; color: #fff; padding: 10px; border: none; cursor: pointer; } .g-selector-button-active { background-color: #28a745; } .g-selector-button-disabled { background-color: #ccc; cursor: not-allowed; } /* Personnalisations des miniatures */.g-selector-collection-thumbnail { width: 100px; height: 100px; border: 2px solid #ddd; margin: 5px; }
Bonnes pratiques pour la personnalisation sur Shopify
Maintiens la cohérence : Assure-toi que tes personnalisations correspondent à l'image de marque globale de ton site web pour une expérience utilisateur harmonieuse.
Teste sur tous les appareils : teste la réactivité de tes personnalisations sur les ordinateurs de bureau et les appareils mobiles.
Améliore l'accessibilité : Utilise des couleurs à fort contraste pour le texte et les boutons, et assure-toi que tous les éléments interactifs ont des états de focus appropriés pour rendre ton site accessible à tous les utilisateurs.