Base de connaissances
Guides
Académie
Tutoriels vidéo
Appuyez sur la touche échap pour quitter :
Articles consultés récemment :

Sommaire

Ajouter un panier à un site Web personnalisé

Vous pouvez ajouter une icône de panier sur votre site Web personnalisé à l'aide de l'extension de la boutique Panier supplémentaire. L'icône permet à vos clients de voir combien d'articles ils ont ajouté à leur commande et de passer à la commande.

Vous pouvez également changer l'apparence et l'apparence de l'icône par défaut du panier, définir sa position sur la page, appliquer la redirection vers une page personnalisée ou des effets animés au moyen de paramètres spéciaux qui sont ajoutés au code d'intégration. La combinaison de plusieurs paramètres dans un seul code d’intégration permet de créer l’icône de panier qui correspond le mieux à la conception de votre site Web.

Pour les utilisateurs de Sites instantanés, Wix et Wordpress : suivez les instructions sur la façon de personnaliser l'icône de votre panier sur Site Instantané (bloc d'en-tête), sur Wix et Wordpress.

Ajouter un panier par défaut

Si votre boutique Ecwid est ajoutée à un site Web personnalisé, vous pouvez ajouter un panier en utilisant un petit bout de code. Vous devrez copier et coller ce code sur votre site Web.

Pour ajouter un panier à un site Web personnalisé :

  1. À partir de l'interface d'administration d'Ecwid, accédez à Canaux de vente.
  2. Dans la section « Vendre sur votre site Web », cliquez sur le bloc Personnaliser le site Web.
  3. Faites défiler vers Extensions de boutique Panier supplémentaire.
  4. Cliquez sur Ajouter un panier et le code du panier sera copié dans votre presse-papiers :
    adding_shopping_bag.png
  5. Connectez-vous à la zone d'administration de votre site Web et ouvrez la page où vous voulez afficher le panier.
  6. Collez le code du panier copié dans le code source de la page. Selon la plateforme que vous utilisez, cela peut être HTML, onglet source ou un bouton séparé pour ajouter des codes. Si vous ne savez pas comment ajouter un code personnalisé à votre site Web, veuillez contacter votre développeur pour des instructions plus détaillées.
  7. Enregistrez et publiez les modifications.

Une fois que vous avez enregistré et publié, une icône de panier apparaîtra sur votre site Web.

Modifier la disposition du panier

Vous pouvez modifier la disposition par défaut du panier en ajoutant le paramètre data-layout au conteneur « ec-cart-widget » dans le code d'intégration, comme indiqué dans l'exemple ci-dessous :

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

où :
VALUE est une des valeurs prises en charge pour le paramètre de mise en page des données ;
STORE_ID est l'ID de votre boutique Ecwid.

Vous pouvez trouver les valeurs prises en charge et voir à quoi ressemble chaque mise en page dans le tableau ci-dessous.

Valeur Mise en page
SMALL_ICON shopping-bag-small-icon.png
SMALL_ICON_COUNTER shopping-bag-small-icon-counter.png
COUNTER_ONLY shopping-bag-counter-only.png
TITLE_COUNTER shopping-bag-title-counter.png
MEDIUM_ICON_COUNTER shopping-bag-medium-icon-counter.png
MEDIUM_ICON_TITLE_COUNTER shopping-bag-medium-icon-title-counter.png
BIG_ICON_TITLE_SUBTOTAL shopping-bag-big-icon-title-subtotal.png
BIG_ICON_DETAILS_SUBTOTAL shopping-bag-big-icon-details-subtotal.png

Afficher ou masquer un panier vide

Vous pouvez afficher ou masquer le panier quand il est vide au moyen du paramètre data-show-videty-cart spécifié pour le conteneur « ec-cart-widget » dans le code d'intégration, comme indiqué dans l'exemple ci-dessous :

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

où :
VALUE est soit TRUE ou FALSE ;
STORE_ID est l'ID de votre boutique Ecwid.

Le code ne fonctionne que pour les paniers flottants.

Modifier l'icône du panier

Vous pouvez changer l'icône du panier par défaut en ajoutant le paramètre data-icon au conteneur « ec-cart-widget » dans le code d'intégration, comme indiqué dans l'exemple ci-dessous :

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

où :
VALUE est une des valeurs prises en charge pour le paramètre d'icône de données ;
STORE_ID est l'ID de votre boutique Ecwid.

Vous pouvez trouver les valeurs prises en charge et voir à quoi ressemble chaque icône dans le tableau ci-dessous.

Valeur Icône
BAG shopping-bag-bag.png
CART shopping-bag-cart.png
BASKET shopping-bag-basket.png

Modifier la forme de la bordure du panier

Vous pouvez modifier la forme de la bordure autour du panier en ajoutant le paramètre data-fixed-shade au conteneur « ec-cart-widget » dans le code d'intégration, comme indiqué dans l'exemple ci-dessous :

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

où :
VALUE est NONE (pas de bordure) /RECT  (bordure rectangle) /PILL (bordure rectangulaire arrondie) ; 
STORE_ID est l'ID de votre boutique Ecwid.

Appliquer une icône de panier personnalisée

Pour utiliser une icône de panier personnalisée sur votre site Web :

  1. Téléversez votre image d'icône dans votre hébergement ou dans n'importe quel hébergement d'images où vous pouvez obtenir un lien direct vers l'image. Ou créez une image SVG de votre icône de panier.
  2. Utilisez le code suivant pour ajouter un panier à votre site Web :
<div data-custom-icon-url="VALUE" 
class="ec-cart-widget"></div>
<div><script data-cfasync="false" 
type="text/javascript" 
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

et remplacez : 
VALUEavec soit une URL vers le fichier d'icône personnalisée ou un balisage SVG
STORE_IDavec l'ID de votre boutique Ecwid.

Modifier la position du panier

Vous pouvez changer la position du panier à l'aide de plusieurs paramètres ajoutés au conteneur « ec-cart-widget » dans le code d'intégration.

<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.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

où : 
VALUE est une des valeurs prises en charge pour chaque paramètre ; 
STORE_ID est l'ID de votre boutique Ecwid.

Vous pouvez trouver les paramètres qui permettent de modifier la position du panier et leurs valeurs prises en charge dans le tableau ci-dessous.

Paramètre Valeur Description
data-fixed TRUE / FALSE Fait défiler le page sur une page. Utilisez le paramètre « data-fixed-position » pour définir la position du panier.
data-fixed-position TOP_LEFT / TOP_RIGHT / BOTTOM_LEFT / BOTTOM_RIGHT Définit la position où le panier fixe apparaît. Pour utiliser un panier dans un mode fixe, ajoutez également le paramètre « data-fixed » dans votre code.
data-horizontal-indent Entier positif incluant zéro 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 Entier positif incluant zéro Définit la marge verticale entre le widget du panier et le bord de l'écran ou un conteneur de l'iFrame.

Afficher ou masquer l'animation du panier

Vous pouvez afficher ou masquer l'effet animé lorsque des articles sont ajoutés au panier à l'aide du paramètre data-show-buy-animation spécifié pour le conteneur « ec-cart-widget » dans le code d'intégration, comme indiqué dans l'exemple ci-dessous :

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

où :
 VALUE est soit TRUE ou FALSE ; 
STORE_ID est l'ID de votre boutique Ecwid.

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

Vous pouvez désactiver la réactivité du widget panier pour qu'il soit identique dans les différentes tailles d'écran, bureau et mobile. Pour cela, incluez le paramètre data-responsive dans le conteneur « ec-cart-widget » dans le code d'intégration, comme indiqué dans l'exemple ci-dessous :

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

où : 
VALUE est soit TRUE (le panier s'adapte automatiquement à des tailles d'écran différentes) ou FALSE (le panier a la même apparence sur des tailles d'écran différentes) ;
STORE_ID est l'ID de votre boutique Ecwid.

Cet article vous a-t-il été utile ?

Génial ! Merci pour vos commentaires !

Merci pour vos commentaires !

Nous sommes désolés ! Que s'est-il passé ?
Utilisateurs qui ont trouvé cela utile : 31 sur 41
10
Nous utilisons des cookies et des technologies similaires pour garder vos préférences en mémoire, mesurer l'efficacité de nos campagnes et analyser des données anonymisées afin d'améliorer les performances de notre site. En choisissant « Accepter », vous acceptez l'utilisation de cookies.
Accepter les cookies Refuser