Ajouter un panier latéral

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” smile.
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 smile.

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. smile

Faite la même chose pour “content two” et ça sera bon. 

Voir plus de conseils de Webdesign

Derniers Articles Webdesign

Comment créer une PAGE PRODUIT originale ?

Comment créer une PAGE PRODUIT originale ?

Aujourd’hui, je vais vous parler de la création d’une page produit originale. La durée du processus d’achat est très importante dans la vente de produits en ligne. Si vous désirez passer plus de temps sur un produit particulier, cela signifie qu’il sera plus facile à vendre. Dans cette vidéo, je vais vous montrer un effet incroyable qui peut rendre votre page de produit beaucoup plus belle et plus originale que les autres. Les produits se vendent et la plupart d’entre eux n’ont rien de spécial dans le design de leur page produit. Je vais partager avec vous quelques secrets sur la façon de créer une page produit originale.

read more
Comment créer une page 404 PERSONNALISÉ ?

Comment créer une page 404 PERSONNALISÉ ?

Dans cette vidéo, je vais vous montrer comment créer une page 404 personnalisée. Il s’agit de la page que les internautes voient lorsqu’ils essaient d’accéder à une page de votre site Web qui n’existe pas.
Il est important de disposer d’une page 404 personnalisée car elle permet de garder les visiteurs sur votre site et d’améliorer le classement de votre site dans les moteurs de recherche.
Vous allez voir qu’il est très simple de réaliser une belle page 404 avec votre image de marque.

read more