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.