Ajouter un panier à un site web

Un panier permet aux clients de voir combien d’articles ils ont ajoutés à leur commande et de passer cette dernière. Lorsque vous intégrez votre boutique en ligne, des produits séparés ou des bouton « Acheter maintenant » à un site web, l’icône du panier apparaîtra automatiquement sur cette page dès qu’au moins un produit sera ajouté au panier.

Vous avez également la possibilité d’ajouter un panier supplémentaire à d’autres pages de votre site web ou de le placer dans l’en-tête du site. Cette icône indique aux visiteurs du site web que vous disposez d’une boutique en ligne leur permettant de faire leurs achats. Vous pouvez également modifier l’apparence du panier : choisir l’icône, les informations à afficher (nombre d’articles, sous-total, etc.), définir la position d’affichage, etc.

---

Ajouter un panier à un site web

Vous pouvez ajouter un panier aux pages de votre site web afin que les clients puissent se rendre sur la page de commande depuis n’importe quelle page. Une icône de panier rappellera également aux clients qu’ils ont ajouté des produits à leur panier, les encourageant ainsi à passer commande.

Pour ajouter un panier aux pages de votre site web :

1. Accédez à l’administration de votre boutique → Site web.
2. Faites défiler jusqu’à la section « Ajoutez votre boutique à d’autres sites  » et cliquez sur Choisissez la plateforme → Autres plateformes et constructeurs de sites web.
3. Cliquez sur Sac de courses supplémentaire. Le code du panier sera copié dans le presse-papier.
4. Rendez-vous dans l’éditeur de votre site web et ouvrez la page sur laquelle vous voulez ajouter le panier.
5. Collez le code dans le code source de la page. Il peut s’agit d’un onglet HTML ou source ou d’un bouton séparé destiné à ajouter des codes. Cela dépend du constructeur de site web que vous utilisez.
6. Enregistrez et publiez les modifications.

La nouvelle icône du panier apparaîtra sur votre site web.

---

Personnaliser l’apparence du panier

Vous pouvez personnaliser l’apparence du panier pour qu’elle corresponde davantage à celle de votre site web. Pour modifier l’apparence par défaut du panier, vous devez changer son code par défaut et en ajouter un nouveau qui apportera la modification souhaitée. Vous verrez ci-dessous plusieurs codes pour différentes apparences.

Pour changer l’apparence de l’icône de votre panier :

1. Sélectionnez le changement d’apparence souhaité ci-dessous.
2. Copiez le code sous le changement d’apparence souhaité.
3. Remplacez VALUE par l’une des valeurs proposées et STORE_ID par l’identifiant de votre boutique que vous pouvez copier dans le coin inférieur gauche de l’administration de votre boutique.
4. Rendez-vous dans l’éditeur de votre site web et ouvrez la page sur laquelle vous souhaitez ajouter le panier.
5. Collez le code dans le code source de la page. Il peut s’agit d’un onglet HTML ou source ou d’un bouton séparé destiné à ajouter des codes. Cela dépend du constructeur de site web que vous utilisez.
6. Enregistrez et publiez les modifications.

Mise en page

Valeur	Mise en page
SMALL_ICON
SMALL_ICON_COUNTER
COUNTER_ONLY
TITLE_COUNTER
MEDIUM_ICON_COUNTER
MEDIUM_ICON_TITLE_COUNTER
BIG_ICON_TITLE_SUBTOTAL
BIG_ICON_DETAILS_SUBTOTAL

 

Voici un code de modification de la mise en page du panier :

<div data-layout="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code"charset="utf-8"></script>
<script>Ecwid.init();</script>
</div>

dans lequel :

VALUE est le nom de la mise en page que vous souhaitez appliquer à l’icône de votre panier. Copiez-la depuis la colonne de gauche du tableau ci-dessus.

STORE _ID est l’identifiant de votre boutique, que vous pouvez copier dans l’administration de votre boutique, dans le coin inférieur gauche.

Icône

Valeur	Icône
BAG
CART
BASKET

Voici un code de modification de l’icône du panier :

<div data-icon="VALUE" class="ec-cart-widget"></div>
<div><<script data-cfasync="false" type="text/javascript"
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script>
<script>Ecwid.init();</script>
</div>

dans lequel :

VALUE doit être remplacé par BAG, CART ou BASKET selon le type d’icône que vous souhaitez utiliser.

STORE _ID est l’identifiant de votre boutique, que vous pouvez copier dans l’administration de votre boutique, dans le coin inférieur gauche.

Pour utiliser une image personnalisée comme icône de panier, utilisez ce code :

<div data-custom-icon-url="VALUE" class="ec-cart-widget">
</div><div><script data-cfasync="false" type="text/javascript" src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" charset="utf-8"></script><script>Ecwid.init();</script>
</div>

dans lequel :

VALUE est soit une URL vers le fichier d’icône personnalisé, soit une balise SVG. Pour obtenir une URL menant vers votre icône, téléchargez votre image sur n’importe quel hébergeur d’image depuis lequel vous pourrez obtenir un lien direct vers une image.

STORE _ID est l’identifiant de votre boutique, que vous pouvez copier dans l’administration de votre boutique, dans le coin inférieur gauche.

Forme de la bordure

Pour modifier la forme de la bordure qui entoure l’icône de votre panier, utilisez ce code :

<div data-fixed-shape="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script>
</div>

dans lequel :

VALUE est remplacé par NONE si vous ne souhaitez pas de bordure, RECT pour une bordure rectangulaire ou PILL pour une bordure rectangulaire arrondie.

STORE _ID doit être remplacé par l’identifiant de votre boutique, que vous pouvez copier dans l’administration de votre boutique, dans le coin inférieur gauche.

Emplacement

 

Paramètre	Valeur	Description
data-fixed	TRUE / FALSE	Fixe le panier à un emplacement précis de vos pages
data-fixed-position	TOP_LEFT / TOP_RIGHT / BOTTOM_LEFT / BOTTOM_RIGHT	Fixe le panier à un emplacement de l’écran : l’icône reste visible même en faisant défiler la page
data-horizontal-indent	Positive integer including zero	Définit la marge horizontale entre le widget du panier et le bord de l’écran ou un conteneur de l’iFrame
data-vertical-indent	Positive integer including zero	Définit la marge verticale entre le widget du panier et le bord de l’écran ou un conteneur de l’iFrame

Voici un code de modification de l’emplacement du panier :

<div data-fixed="VALUE" 

data-fixed-position="VALUE"

data-fixed-shape="VALUE" 

data-horizontal-indent="VALUE" 

data-vertical-indent="VALUE" class="ec-cart-widget"></div>
<div>
<script data-cfasync="false" type="text/javascript" 
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

dans lequel :

VALUE doit être remplacé par l’une des valeurs indiques dans le tableau ci-dessus selon l’emplacement que vous souhaitez faire adopter à votre panier.

STORE _ID doit être remplacé par l’identifiant de votre boutique, que vous pouvez copier dans l’administration de votre boutique, dans le coin inférieur gauche.

Animation

Vous pouvez afficher ou désactiver l’effet d’animation lorsqu’un article est ajouté au panier en utilisant le code suivant :

<div data-show-buy-animation="VALUE" 
class="ec-cart-widget"></div>
<div><script data-cfasync="false" 
type="text/javascript" 
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script>
</div>

dans lequel :

VALUE doit être remplacé par TRUE pour activer l’animation ou FALSE pour la désactiver.

STORE _ID doit être remplacé par l’identifiant de votre boutique, que vous pouvez copier dans l’administration de votre boutique, dans le coin inférieur gauche.

Utiliser la même apparence de panier sur tous les appareils

L’icône du panier s’adapte à la largeur de l’écran et peut avoir un aspect différent sur les appareils ayant une largeur d’écran différente. Pour que l’apparence du panier soit la même sur tous les appareils, utilisez ce code :

<div data-responsive="VALUE" 
class="ec-cart-widget"></div>
<div><script data-cfasync="false" 
type="text/javascript" 
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script>
</div>

dans lequel :

VALUE doit être remplacé par TRUE pour que le panier s’adapte automatiquement à différentes tailles d’écran ou FALSE pour que son apparence soit la même malgré les différentes tailles d’écran.

STORE _ID doit être remplacé par l’identifiant de votre boutique, que vous pouvez copier dans l’administration de votre boutique, dans le coin inférieur gauche.

---

Ajouter un panier à des pages WordPress

Vous pouvez ajouter votre boutique en ligne à un site web WordPress grâce à une extension de boutique en ligne. Cette extension vous permet également d’ajouter une icône de panier et de modifier sa mise en page et son apparence.

Pour ajouter un panier à un site WordPress :

1. Rendez-vous dans votre Tableau de bord WordPress → Design → Personnaliser.
2. Cliquez sur Boutique en ligne dans le menu latéral.
3. Cliquez sur Widget de panier.
4. Sélectionnez l’emplacement souhaité du panier, définissez sa mise en page, l’icône ainsi que d’autres paramètres sur cette page.
5. Sélectionnez l’option Afficher lorsque le panier est vide si vous souhaitez que l’icône du panier s’affiche même quand il ne contient aucun produit.

---

Personnaliser l’apparence du panier sur WordPress

Pour modifier l’apparence de l’icône du panier ajoutée à un site WordPress :

1. Rendez-vous dans votre Tableau de bord WordPress → Design → Personnaliser.
2. Cliquez sur Boutique en ligne dans le menu latéral → Widget de panier.
3. Réglez les paramètres du widget de panier selon vos souhaits. L’apparence du widget de panier change dans la prévisualisation en fonction des paramètres que vous définissez.
4. Une fois que l’apparence vous convient, cliquez sur Publier.