Aller au contenu

Panier

Ajustez la mise en page, le style et le contenu supplémentaire de la page du panier pour la garder claire, cohérente avec votre marque et facile à utiliser.

Cette section affiche les articles du panier lorsque des produits ont été ajoutés et bascule vers des messages de panier vide lorsque le panier est vide. Utilisez-la pour affiner le style et la mise en page de la page du panier, et pour ajouter du contenu alimenté par des applications ou du contenu personnalisé lorsqu’il soutient le parcours d’achat.

Ces contrôles de couleur vous permettent de remplacer le style de la page du panier sans modifier les couleurs globales de votre thème. Ils sont particulièrement utiles pour améliorer le contraste, mieux distinguer les lignes d’articles ou rendre les titres et les libellés d’accompagnement plus faciles à parcourir.

Conservez d’abord des couleurs de texte et d’icône lisibles, puis utilisez les couleurs des sous-titres et des bordures de manière plus subtile pour structurer le contenu. De petits ajustements fonctionnent généralement mieux que de forts changements de couleur sur une page utilitaire comme le panier.

Si vous ajoutez un arrière-plan personnalisé ou un overlay, revérifiez le contraste des détails des articles, des totaux et des actions afin que le panier reste facile à utiliser.

  1. App
  2. Custom liquid

Les blocs d’application permettent aux applications installées d’ajouter des fonctionnalités ou des messages dans la section du panier. Utilisez-les pour des ajouts liés au panier, comme des incitations, des notices ou d’autres outils qui doivent rester proches du contenu du panier. Pour le comportement du bloc dans l’éditeur, consultez documentation Shopify sur les sections et les blocs

Soyez sélectif dans l’emplacement. Trop de blocs ajoutés peuvent donner l’impression que le panier s’allonge et détourner l’attention de la vérification des articles et de la poursuite du parcours.

Le Liquid personnalisé ajoute du contenu personnalisé avancé dans la section du panier.

Utilisez-le lorsque vous avez besoin de messages flexibles, d’extraits d’application ou d’un autre contenu personnalisé qui n’est pas couvert par les paramètres intégrés du panier. Ce bloc inclut également son propre paramètre de visibilité, ce qui est utile lorsque vous souhaitez que le contenu d’accompagnement s’affiche uniquement sur mobile ou uniquement sur ordinateur.

Paramètres d’espacement contrôlent l’espace au-dessus et en dessous du contenu du panier sur ordinateur et sur mobile. Utilisez-les pour donner à la page une impression plus aérée, ou réduisez l’espace supplémentaire lorsque votre panier inclut déjà des messages plus longs ou des blocs ajoutés.

Un espacement mobile distinct est particulièrement utile, car les pages de panier peuvent devenir longues rapidement. Réduire l’espace vertical sur les petits écrans peut rendre la page plus efficace sans modifier la présentation sur ordinateur.

Paramètres d’arrière-plan de section vous permettent d’ajouter une couleur d’arrière-plan, un dégradé, une image, une vidéo et un overlay à la section du panier. Ces paramètres sont particulièrement utiles lorsque vous souhaitez que la page du panier paraisse plus cohérente avec votre marque tout en gardant le contenu lisible.

Les choix de dégradé remplacent les choix de couleur unie, et les dégradés d’overlay remplacent les couleurs d’overlay. Vous pouvez également définir des médias d’arrière-plan distincts pour mobile, ce qui est utile lorsque les images de bureau se recadrent mal sur les petits écrans.

Paramètres de séparateur ajoutent une ligne facultative en haut ou en bas de la section du panier. Ils sont utiles lorsque le panier a besoin d’une frontière visuelle plus claire avec le contenu voisin.

Si vous laissez la couleur du séparateur transparente, la section revient à la couleur de bordure du thème. C’est souvent la façon la plus simple de garder le panier cohérent avec le reste du design.

Paramètres de largeur contrôlent à la fois la largeur maximale du contenu du panier et la largeur de l’enveloppe de la section. Cela vous permet de garder le panier compact et facile à lire, ou de lui donner plus d’ampleur lorsqu’il est associé à un style de page plus large.

Pour la plupart des boutiques, une largeur de contenu modérée permet de parcourir confortablement les lignes d’articles, les prix et les contrôles. La largeur de l’enveloppe est surtout importante lorsque vous utilisez un arrière-plan, car elle modifie l’étendue de ce traitement visuel sur la page.

  1. Gardez le panier facile à parcourir. Privilégiez un contraste clair pour le texte, les icônes et les bordures afin que les détails des articles et les totaux restent lisibles d’un seul coup d’œil.
  2. Utilisez les blocs supplémentaires avec parcimonie. Ajoutez du contenu d’application ou du contenu personnalisé uniquement lorsqu’il soutient le parcours du panier au lieu d’entrer en concurrence avec les actions principales du panier.
  3. Ajustez séparément le mobile. Vérifiez l’espacement mobile, la visibilité et les médias d’arrière-plan pour éviter que le panier ne devienne trop long ou visuellement chargé.
  4. Choisissez la largeur avec soin. Une largeur de contenu équilibrée donne généralement une meilleure impression qu’un panier trop étroit ou qu’un panier qui étire trop les détails sur la page.
  5. Vérifiez les deux états du panier. Prévisualisez la section avec des articles dans le panier et avec le panier vide afin que le style et l’espacement soient soignés dans les deux situations.
  6. Examinez le comportement sur ordinateur et sur mobile. Comparez les deux affichages pour l’alignement, la visibilité et le recadrage des médias, surtout si vous utilisez des arrière-plans différents ou masquez du contenu sur une taille d’écran.
  7. Conservez la lisibilité des retours de formulaire. Assurez-vous que les changements de quantité, les messages de validation et les états vides ou de succès restent faciles à lire lorsque les clients interagissent avec les contrôles du panier.
  8. Tenez compte du contexte produit. Revérifiez le panier après avoir modifié les variantes, les quantités ou la disponibilité afin que les actions affichées et les détails des articles aient toujours du sens.