Ajouter un panier latéral

Dans ce tutoriel, nous allons voir comment insérer un panier latéral dans votre boutique, et comment ajouter un produit dans ce panier, pour observer son comportement : Demo live

Tout d’abord, rendez-vous dans le « Dashboard ->  Applications » pour activer l’application « Side Cart ».

Vous avez trouvé? Bravo!
Votre panier latéral est d’ores et déjà opérationnel et fonctionne normalement avec les paramètres d’origine.

L’icône « Panier Side Cart » apparait en bas à droite.

Par défaut, tous les textes sont en anglais. C’est un peu embêtant ? Pas de soucis, vous pouvez tout changer manuellement dans le « Dashboard -> Side cart -> Général » et ainsi metter les textes que vous souhaitez.

Si une icône figure déjà en bas à droite (via les applications « Crisp » ou « Hotjar » par exemple), vous pouvez changer la position de l’icône du side Cart dans « Side cart -> Style ». Premièrement, dans « MAIN », modifiez la position de manière l’horizontale (« Right » et « Left ») puis dans « SIDE CART BASKET », modifiez la position de manière verticale (« Bottom » et « top »).

1. L’en-tête (bloc rouge) : les éléments dans le « Header » sont activés par défaut. Pour les enlever allez dans « Side cart -> Général-> Header ». Pour mofidier le style, par exemple la couleur de la barre « Free shipping » dans « Side cart -> Style -> Header ».

2. Body (bloc jaune) : dans le « Side cart body », se trouvent les produits présents dans le panier. Dans « Général », vous pouvez changer l’ordre d’affichage des produits et enlever les informations du produit que vous ne vous voulez pas afficher dans le « Side cart ». Dans « Style », vous retrouverez le design/ la présentation des infos qui s’affichent sur votre écran: taille de l’image, couleur de fond, couleur de texte, couleur du bouton quantité etc…

3. Produits suggérés (bloc vert) : dans « Général », vous pouvez choisir les informations à afficher sur les produits suggerés. Par exemple, il est possible d’enlever le bouton « Ajouter » ou encore de choisir quel type de produit afficher. Dans « Style » vous pouvez changer la position du produit: le mettre après le bloc « Footer »par exemple.

4. Footer (bloc bleu) : dans le cas présent, seuls « Livraison » et « Total » sont cochés dans « Général ». Néanmoins, libre à vous de  cocher toutes les informations que vous désirez voir sur votre « Side cart » .
Vous pouvez par exemple, mofifier le style des boutons. Par ailleurs, il y a de nombreuses dispositions disponibles grâce au bouton « Row ». Pour ce faire, il faut mettre le bouton design sur « Custom » afin que le design choisi dans « Side Cart » soit appliqué à la boutique .

Voilà, vous y êtes arrivé.e ! Bravo ! Il est possible d’aller encore plus loin, dans l’onglet « Advanced »: en effet, vous pourrez y ajouter votre propre CSS.