Skip to main content
Lorsque les paramètres de design intégrés ne suffisent pas, ajoutez votre propre CSS personnalisé pour styliser le panier.

​
Où l’ajouter

Dans l’éditeur de panier, ouvrez Cart settings → Custom CSS. Votre CSS s’applique à tout le panier et est chargé après les styles de base du panier, vos règles ont donc la priorité.

​
Ne ciblez que les classes publiques

Stylisez le panier en utilisant ses classes publiques cart-external-*. L’éditeur les complète automatiquement et vous met en garde contre les autres :
  • cart-external-* : la cible publique et prise en charge. Utilisez-les. Elles ne portent aucun style propre, elles existent donc uniquement pour que votre CSS puisse s’y accrocher.
  • cart-internal-* : la tuyauterie interne du panier, où réside tout son style intégré. L’éditeur signale les sélecteurs qui les ciblent comme des erreurs. Elles ne sont pas modifiées à la légère, puisque chaque panier existant en dépend, mais elles appartiennent au panier plutôt que d’être un contrat avec vous. Restylisez plutôt via la jumelle cart-external-*.
  • Les autres classes cart-* que l’éditeur ne reconnaît pas sont signalées comme des avertissements.
Vous verrez des classes cart-internal-* dans le balisage, y compris dans le modèle personnalisé par défaut de chaque bloc. C’est normal : ce sont elles qui donnent à un bloc son apparence intégrée. La règle ici concerne les sélecteurs que vous écrivez dans ce panneau, pas les noms de classes que le panier affiche.Si vous écrivez un modèle personnalisé qui modifie la structure DOM d’un bloc, consultez Styliser un modèle personnalisé pour savoir quels noms de classes conserver et lesquels abandonner.

​
Shadow DOM : le panier est autonome

Sur la boutique, tout le panier s’affiche à l’intérieur de son propre shadow DOM. Cela signifie :
  • Le CSS de votre thème ne peut pas s’infiltrer dans le panier, et le CSS du panier ne peut pas s’en échapper, donc votre CSS personnalisé est automatiquement limité au panier et n’entrera pas en conflit avec le reste de votre site.
  • Vos sélecteurs doivent référencer des éléments et des classes à l’intérieur du panier. Les sélecteurs visant des éléments de page en dehors du panier ne peuvent pas y accéder.
La même frontière s’applique au JavaScript : document.querySelector ne peut pas non plus voir à l’intérieur du tiroir. Un script cherchant à atteindre un élément du panier doit passer par shadowRoot, et il cible ces mêmes classes cart-external-*.

​
Quand utiliser plutôt les paramètres de design

Pour les couleurs, les arrondis, les espacements et la largeur, les paramètres de design intégrés sont plus simples et plus sûrs, ne recourez donc au CSS personnalisé que pour ce qu’ils ne couvrent pas.

​
Pour aller plus loin

  • Paramètres de design : les contrôles de style intégrés, et la première chose à essayer.
  • Modèles personnalisés : remplacez entièrement le balisage d’un bloc lorsque le CSS seul ne suffit pas.
  • Cart SDK : pour le comportement plutôt que l’apparence.