Modifier le style du symbole du panier

Vous pouvez modifier l'aspect du symbole du panier, définir sa position sur la page, appliquer la redirection vers une page personnalisée ou des effets animés en utilisant des paramètres spéciaux ajoutés au code d'intégration.

Astuce: Si vous n'avez pas encore ajouté le symbole du panier à votre site Web, découvrez comment le faire dans le Guide du panier de votre boutique MyCOMMERCE.

Astuce: Le code d'intégration est le code de widget dont vous avez besoin pour intégrer le catalogue de votre boutique dans un autre site web. En savoir plus.

Vous pouvez combiner plusieurs paramètres au sein d'un code d'intégration afin de créer le symbole de panier qui correspond le mieux au design de votre site Web.


Dans cet article:

Modifier la disposition du symbole du panier

Afficher ou masquer un panier vide
Modifier le symbole du panier
Modifier la forme du cadre du panier
Appliquer un symbole de panier personnalisé
Modifier la position du panier
Afficher ou masquer une animation du panier

Modifier la disposition du symbole du panier

Vous pouvez modifier la disposition du symbole du panier en ajoutant le paramètre de données de disposition au conteneur «ec-cart-widget» dans le code d'intégration, comme présenté dans l'exemple suivant:

<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 l'une des valeurs supportées pour le paramètre de données de disposition;
STORE_ID est l’identifiant de votre boutique MyCOMMERCE.

Vous pouvez trouver les valeurs supportées et voir à quoi ressemble chaque disposition dans le tableau suivant.

warenkorbsymbol aendern_auswahl

Afficher ou masquer un panier vide

Le paramètre data-show-empty-cart indiqué dans le code d’intégration pour le conteneur «ec-cart-widget» permet d’afficher ou de masquer le panier vide, comme présenté dans l'exemple suivant:

leerer warenkorb ausblenden oder einblenden

où:
VALUE est soit TRUE soit FALSE;
STORE_ID est l’identifiant de votre boutique MyCOMMERCE.

Remarque: Le code fonctionne uniquement pour le panier flottant.

Modifier le symbole du panier

Vous pouvez modifier le symbole de panier standard en ajoutant le paramètre de données de symbole au conteneur «ec-cart-widget» dans le code d'intégration, comme présenté dans l'exemple suivant:

<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 l'une des valeurs supportées pour le paramètre de données de symbole;
STORE_ID est l’identifiant de votre boutique MyCOMMERCE.

Vous pouvez trouver les valeurs supportées et voir à quoi ressemble chaque symbole dans le tableau suivant.

warenkorbsymbol aendern

Modifier la forme du cadre du panier

Vous pouvez modifier la forme de la bordure autour du panier en ajoutant les paramètres data-fixed-shape au conteneur «ec-cart-widget» dans le code d'intégration, comme présenté dans l'exemple suivant:

<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 rectangulaire) / PILL (bordure rectangulaire arrondie);
STORE_ID est l’identifiant de votre boutique MyCOMMERCE.

Appliquer un symbole de panier personnalisé

Vous pouvez utiliser un symbole personnalisé pour le panier en ajoutant le paramètre data-custom-icon-url au conteneur «ec-cart-widget» dans le code d'intégration, comme présenté dans l'exemple suivant:

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

où:
VALUE est soit une URL, soit un fichier de symbole personnalisé, soit une marge SVG;
STORE_ID est l’identifiant de votre boutique MyCOMMERCE.

Modifier la position du panier

Vous pouvez modifier 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 l’une des valeurs supportées pour chaque paramètre;
STORE_ID est l’identifiant de votre boutique MyCOMMERCE.

Trouvez dans le tableau suivant les paramètres qui permettent de modifier la position du panier et les valeurs supportées.

Paramètre Valeur Description

données fixes

TRUE / FALSE Garantit que le panier soit fixé à un endroit défini sur vos pages.

position à données fixes

TOP_LEFT / TOP_RIGHT / BOTTOM_LEFT / BOTTOM_RIGHT

Place le panier à l'écran et fait suivre le symbole lorsque vous faites défiler la page.

Retrait horizontal des données

Nombre entier positif avec zéro

Définit la bordure horizontale entre le widget du panier et le bord de l'écran ou d’un conteneur iframe.

Retrait vertical des données

Nombre entier positif avec zéro

Définit l’écart vertical entre le widget du panier et le bord de l'écran ou d’un conteneur iframe.

Afficher ou masquer une animation du panier

Vous pouvez afficher ou masquer l'effet animé lorsque des articles sont ajoutés au panier en utilisant le paramètre data-show-buy-animation indiqué pour le conteneur «ec-cart-widget» dans le code d’intégration, comme présenté dans l'exemple suivant:

<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 soit FALSE;
STORE_ID est l’identifiant de votre boutique MyCOMMERCE.