Adaptez le tiroir du panier à votre boutique

Ouvrez le design de votre panier et sélectionnez Style. Cet onglet contrôle l’apparence générale du tiroir et la manière dont il s’ouvre.

Choisir les couleurs

La ligne Couleurs du thème propose les couleurs de votre thème publié. Choisissez-en une, puis sélectionnez un Style de palette : Épuré, Teinté ou Sombre. Vous pouvez également choisir une couleur personnalisée ou en essayer une aléatoire.

Par défaut restaure les couleurs par défaut tout en conservant la mise en page, notamment la largeur du tiroir et le rayon des angles.

Modifier les couleurs d’un bloc

Sous Modifier les couleurs, la première ligne, Tiroir, contient les couleurs de base : arrière-plan, texte, accent, texte d’accent, texte atténué, économies et bordures. En dessous, chaque bloc du tiroir possède sa propre ligne, par exemple l’en-tête, la barre d’annonce, la barre de récompenses, les upsells, le pied de page et le bouton de paiement. La ligne d’un bloc s’affiche lorsque ce bloc est activé.

Laissez la couleur d’un bloc vide pour que celui-ci utilise les couleurs du tiroir. Choisir une couleur de thème, une couleur personnalisée ou aléatoire, ou Par défaut, efface la couleur de chaque bloc afin que le tiroir reparte sur une base épurée.

Définir la mise en page du tiroir

La carte Mise en page définit la position du tiroir et son comportement :

• Position du tiroir : choisissez le bord gauche ou droit.
• Mise en page du tiroir : Attaché se place contre le bord ; Flottant laisse un espace autour du tiroir et affiche Écart par rapport aux bords, de 0 à 80 px.
• Hauteur de l’en-tête : Par défaut ou Compact. Compact réduit de moitié l’espace au-dessus et au-dessous du titre du panier, afin que davantage de contenu tienne sur les petits écrans.
• Largeur du tiroir : de 280 à 700 px.
• Ouvrir le panier lorsqu’un produit est ajouté : consultez la section sur l’ouverture automatique ci-dessous.

L’aperçu de l’éditeur conserve sa propre largeur fixe afin que les commandes restent utilisables. Enregistrez et consultez la boutique en ligne pour évaluer la largeur réelle du tiroir. Un écran étroit limite le tiroir à l’espace disponible.

Définir la forme et le texte

La carte Forme et texte contient les dernières options :

• Rayon des angles : de 0 à 20 px.
• Taille du texte : de 90 à 120 %. Cette option redimensionne tout le texte du tiroir en une seule fois et conserve la police de votre thème.
• Ombres : activez ou désactivez les effets de profondeur.

Ajuster les images des produits

La forme de l’image est carrée ou portrait (3:4). Elle s’applique aux images des articles du panier et à toutes les images d’upsell, afin que tout le tiroir utilise le même recadrage.

La carte Images regroupe toutes les tailles d’image au même endroit : Taille de l’image de l’article du panier, Taille de l’image des upsells en liste (upsells dans les mises en page Liste verticale et Un à la fois), Taille de l’image des upsells en carrousel et latéraux (mise en page Carrousel et chaque carte d’upsell latéral) et Taille de l’image de l’add-on.

La bordure des images des articles du panier ajoute une fine ligne autour de chaque photo de produit dans le panier. Activez-la lorsque vos photos ont un arrière-plan blanc, afin qu’elles se distinguent du tiroir. Les nouveaux paniers n’en ont pas, et les images d’upsell et d’add-on n’en reçoivent jamais.

Contrôler l’ouverture automatique

Ouvrir le panier lorsqu’un produit est ajouté se trouve sur la carte Mise en page. Désactivez cette option pour empêcher l’ouverture automatique après un ajout. Les clients peuvent toujours ouvrir le tiroir avec l’icône du panier.

Dans cet exemple, une couleur de thème bleue avec les options Teinté et Flottant donne au tiroir un arrière-plan bleu pâle et un espacement de 16 px. Enregistrez, puis vérifiez la vitrine sur ordinateur et mobile. Pour des modifications allant au-delà de ces contrôles, consultez HTML et CSS personnalisés. Le CSS personnalisé se trouve en bas de Style, sous Avancé.