HTML personnalisé

La section Custom HTML d’Upcart vous permet d’insérer du code personnalisé dans différentes parties du tiroir de panier.
Vous pouvez également écrire du JavaScript à l’aide de balises <script> et interagir avec le panier via l’API publique d’Upcart (par ex., upcartOnCartLoaded (deprecated — use upcartSubscribeCartLoaded for new scripts)).

Où le trouver

Allez dans : Cart Editor > Settings > Custom HTML

Comment ça fonctionne

Le menu déroulant HTML Location vous permet de choisir où le code apparaîtra dans la mise en page du panier. Selon votre sélection, le code sera injecté dans la zone correspondante du panier. Vous pouvez l’utiliser pour ajouter :

Des messages personnalisés
Du texte de confiance
Des intégrations d’applications
Des extraits d’analytique
Des points d’ancrage pour le style
Du contenu promotionnel, comme des bannières avec des offres ou des remises personnalisées
Des garanties produit qui renforcent la confiance des clients

Jetons dynamiques

Vous pouvez utiliser le jeton suivant dans n’importe quel champ Custom HTML pour injecter des données de panier en direct :

Jeton	Ce qu’il affiche
`{{UPCART_SUBTOTAL}}`	Le sous-total actuel du panier, formaté dans la devise de votre boutique

Exemple :

<p>Your current total: <strong>{{UPCART_SUBTOTAL}}</strong></p>

Ce jeton fonctionne dans tous les champs d’emplacement HTML sauf Scripts (Before Load), où vous devriez plutôt utiliser l’API JavaScript. C’est le seul jeton dynamique disponible dans les champs Custom HTML.

Emplacements HTML disponibles


Emplacement	Description
Above announcements/rewards	Haut du panier, sous l’en-tête du panier.
Below header/announcements/rewards	Immédiatement sous les annonces ou les barres de récompense.
Between each line item	Injecté sous chaque produit du panier.
Below cart items	Directement sous les articles du panier, au-dessus des modules du bas.
Above footer/add-ons	Sous les articles du panier et les upsells, au-dessus des add-ons.
Above checkout button	À l’intérieur du pied de page, directement au-dessus du bouton de paiement et du sous-total.
Below checkout button	À l’intérieur du pied de page, directement sous le bouton de paiement.
Bottom of cart	Tout en bas du tiroir (en dehors du pied de page).
On empty cart screen	Affiché à côté du texte « Your cart is empty ».
Scripts (Before Load)	Zone invisible pour exécuter du JavaScript avant le chargement du panier. Idéal pour le suivi, la logique conditionnelle ou un comportement personnalisé.

CSS personnalisé (facultatif)

Vous pouvez styliser votre HTML à l’aide de l’éditeur Custom CSS situé sous :
Upcart > Cart Editor > Settings > Custom CSS Par exemple, pour ajuster l’alignement du panier vide :

[class*="styles_CartPreview__empty__"] { flex-direction: column; } [class*="styles_CartPreview__empty__"] h3 { margin: unset; }

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

Où le trouver

Comment ça fonctionne

Jetons dynamiques

Emplacements HTML disponibles

CSS personnalisé (facultatif)

​Où le trouver

​Comment ça fonctionne

​Jetons dynamiques

​Emplacements HTML disponibles

​CSS personnalisé (facultatif)

Où le trouver

Comment ça fonctionne

Jetons dynamiques

Emplacements HTML disponibles

CSS personnalisé (facultatif)