Skip to main content
La mise en page de votre panier est une pile de blocs : des éléments configurables que vous ajoutez, réorganisez, stylisez et personnalisez dans l’éditeur de panier. Les blocs que vous incluez, et dans quel ordre, constituent le panier que voient les acheteurs. Pour savoir comment les blocs s’insèrent dans les états et les sections, consultez Comment fonctionnent les paniers ?.

​
Blocs et sous-blocs

Il existe deux types de blocs :
  • Les blocs se placent directement dans le panier, dans l’une des trois sections : Header, Body ou Footer. Chaque section propose un ensemble de blocs différent.
  • Les sous-blocs s’imbriquent dans un autre bloc. Aujourd’hui, seul Cart items héberge des sous-blocs : la ligne Product (la ligne d’article elle-même), Subscription upgrade et Custom code.

​
Ajouter, réorganiser et supprimer des blocs

  • Ajoutez un bloc avec le sélecteur Add block. Un bloc est grisé s’il ne peut pas aller là où vous l’ajoutez, ou si vous avez atteint sa limite (le sélecteur affiche un badge count/max).
  • Réorganisez en faisant glisser un bloc au sein de sa section.
  • Supprimez avec l’icône corbeille, sauf pour les blocs verrouillés (ci-dessous).
  • Affichez/masquez la plupart des blocs avec le bouton en forme d’œil, qui masque un bloc aux acheteurs sans le supprimer. Quelques blocs structurels ne peuvent pas être masqués : Cart items, Checkout button et la ligne Product.

​
Blocs verrouillés

Certains blocs peuvent être réorganisés mais pas supprimés, afin que le comportement fondamental du panier (par exemple, le passage au paiement) ne puisse pas être retiré par accident :
  • Cart items
  • Checkout button

​
Blocs par défaut

Les nouveaux paniers démarrent avec une mise en page par défaut fonctionnelle :
  • Panier rempli : Header, Banner, Cart items, Summary, Checkout button
  • Panier vide : Header, bloc Empty cart
L’état de panier vide est la mise en page vide dans son ensemble. Le bloc Empty cart est un bloc à l’intérieur de celle-ci. Consultez Comment fonctionnent les paniers ? pour la différence.

​
Combien de blocs de chaque type vous pouvez ajouter

Les limites sont comptées par état de panier, pas par panier. Le panier rempli et le panier vide ont chacun leur propre quota, donc un panier peut contenir trois Banners dans sa mise en page remplie et trois de plus dans sa mise en page vide. La plupart des blocs sont limités à un par état. Les exceptions :

​
Content, Design et Code

Chaque bloc se configure via jusqu’à trois surfaces dans l’éditeur :
  • Content : les paramètres du bloc (texte, choix de produits, seuils, etc.). Le bloc Custom code est la seule exception : il n’a pas de panneau Content car le bloc est le code.
  • Design : un style par bloc qui se superpose à vos paramètres de design globaux. Chaque bloc en possède un, sauf Custom code, qui n’a aucun panneau de paramètres.
  • Code : remplacez le rendu intégré du bloc par un modèle personnalisé. La plupart des blocs le prennent en charge ; quelques-uns non.

​
Afficher ou masquer par marché, pays ou devise

Certains blocs peuvent afficher des paramètres différents, ou se masquer entièrement, selon qui est l’acheteur. C’est distinct du bouton en forme d’œil de la barre latérale, qui active ou désactive un bloc pour tout le monde. Types de conditions pris en charge aujourd’hui : marché Shopify, pays du client et devise du client (chacun avec In ou Not in). Le total du panier et le contenu du panier ne sont pas des types de conditions. Utilisez les seuils de paliers de Rewards pour la progression en dépenses/quantité, ou le Cart SDK lorsque vous avez besoin d’une règle que l’éditeur ne peut pas exprimer. Les conditions forment une liste ordonnée : la première condition correspondante l’emporte. Placez les règles spécifiques au-dessus d’un fourre-tout All buyers. Si rien ne correspond, le bloc n’affiche rien pour cet acheteur. Dans l’éditeur aujourd’hui, l’interface Conditions complète est disponible sur le bloc Rewards : des ensembles de paliers différents par marché, pays ou devise. Les autres blocs utilisent soit une configuration unique « tous les acheteurs », soit ne participent pas encore à ce système. L’aperçu de l’éditeur n’évalue pas l’acheteur en direct. Sélectionnez une condition dans le panneau pour prévisualiser cette variante.

​
Tous les blocs

Structure
  • Header : titre, nombre d’articles, logo et contrôle de fermeture, épinglé en haut.
  • Cart items : les articles que les clients ajoutent au panier ; se répète par ligne.
  • Subscription upgrade : sous-bloc qui propose de convertir une ligne en abonnement.
  • Summary : totaux, économies et remises appliquées.
  • Checkout button : l’appel à l’action principal vers le paiement.
  • Empty cart : le contenu affiché lorsque le panier est vide.
  • Express payments : boutons de paiement accéléré (Shop Pay, PayPal, etc.) à l’intérieur du panier.
Merchandising
  • Upsells : recommandations de produits choisies par stratégie.
  • Product add-on : un produit spécifique unique proposé en supplément.
  • Rewards : récompenses par paliers comme la livraison gratuite ou des cadeaux.
  • Shipping protection : un supplément de protection d’expédition en option.
Saisie de l’acheteur
  • Discount code : un champ pour appliquer un code de réduction.
  • Notes : un champ de notes de commande.
Contenu
  • Banner : une bannière de message, avec un compte à rebours facultatif.
  • Image : une image unique ou un préréglage hébergé comme les icônes de paiement.
  • Custom code : du HTML ou du React personnalisé n’importe où dans le panier.
Extension
  • Custom templates : remplacez le rendu de n’importe quel bloc depuis son onglet Code.

​
Blocs disponibles dans chaque section

Chaque section dispose d’un ensemble de blocs différent. Cela garde la mise en page ciblée et réduit l’encombrement. Certains de ces blocs sont spécifiques à un état (par exemple Empty cart uniquement dans l’état vide). Consultez Comment fonctionnent les paniers ?.

​
Erreurs de validation des blocs

Si les paramètres d’un bloc contiennent une valeur invalide, un petit point rouge apparaît à côté du nom de ce bloc dans la barre latérale. Le point reste jusqu’à ce que vous corrigiez le problème. Ce n’est pas une notification que l’on peut faire disparaître. Tant qu’un bloc comporte une erreur, l’enregistrement est bloqué. Le bouton Save reste cliquable, mais le sélectionner affiche un toast d’erreur (“Fix the errors in your cart blocks before saving”) et vous amène au premier bloc problématique, en ouvrant ses paramètres pour que vous puissiez corriger le champ mis en évidence. Publish exige en plus qu’il n’y ait aucun changement non enregistré, il reste donc indisponible tant qu’un enregistrement sans erreur n’a pas réussi. Une fois le champ invalide corrigé, le point disparaît de lui-même et l’enregistrement se déroule normalement.
Les blocs masqués sont tout de même validés. Un bloc que vous avez masqué peut contenir un paramètre invalide, afficher un point d’erreur et bloquer l’enregistrement exactement comme un bloc visible ; donc si l’enregistrement est bloqué et que tous les blocs visibles semblent corrects, vérifiez vos blocs masqués.