Apprenez à personnaliser la barre d’annonces dans votre tiroir Upcart, y compris la hauteur, la position, le compte à rebours, la mise en forme du texte et les couleurs.
Le paramètre Height contrôle l’épaisseur d’affichage de la barre d’annonces. Il offre trois options : Slim, Normal et Thick. Slim garde le tiroir plus compact, laissant de la place au contenu du panier — particulièrement utile sur les petits écrans. Normal se situe entre les deux. Thick offre une plus grande emphase visuelle, aidant votre message à se démarquer auprès des clients.
Utilisez le paramètre Position pour choisir si la barre d’annonces apparaît au-dessus ou en dessous de la liste des produits dans le tiroir de panier. Elle s’affichera toujours juste au-dessus de la section du pied de page, quel que soit le placement.
Si vous souhaitez que l’annonce expire après un délai défini, vous pouvez activer le compte à rebours et définir sa durée en minutes. Comme l’affichage est uniquement en minutes, nous recommandons de définir un maximum de 59:60 pour garantir un comportement précis. Une fois le minuteur écoulé, toute la barre d’annonces est automatiquement supprimée du panier.
Le compte à rebours intégré est basé sur la session et décompte à partir d’un nombre de minutes défini. Il ne prend pas en charge les comptes à rebours récurrents ou quotidiens qui se réinitialisent à une heure précise (par exemple, un compte à rebours jusqu’à 14 h chaque jour). Cette fonctionnalité n’est actuellement pas disponible dans Upcart.
Cette section vous permet de saisir et de mettre en forme le message affiché dans la bannière d’annonce. Vous pouvez styliser des portions spécifiques du texte à l’aide de la barre de mise en forme au-dessus du champ de saisie, qui comprend des options de gras, d’italique, de soulignement et de couleur.
Le champ Announcement Text ne prend pas en charge les hyperliens — il n’y a pas de bouton de lien ou d’URL dans la barre d’outils de mise en forme, et les balises <a> collées ou les liens Markdown sont supprimés à l’enregistrement. Pour rendre l’annonce cliquable ou inclure un lien, utilisez plutôt le module Custom HTML (voir ci-dessous).
Étant donné que le champ Announcement Text intégré n’affiche pas les hyperliens, vous pouvez remplacer ou compléter la barre d’annonces en injectant un lien avec du Custom HTML :
Définissez HTML Location sur Above announcements/rewards (pour apparaître au-dessus de la barre d’annonces) ou Below header/announcements/rewards (pour apparaître directement en dessous).
Collez un extrait avec votre lien, par exemple :
<div style="text-align: center; padding: 8px;"> <a href="https://yourstore.com/sale" style="color: #ffffff; text-decoration: underline;"> Shop the sale → </a></div>
Cliquez sur Save, puis testez dans votre panier en ligne.
Pour en savoir plus sur les emplacements Custom HTML et le style, consultez Custom HTML et Custom CSS. L’équipe d’assistance d’Upcart n’écrit pas et ne débogue pas de code personnalisé — contactez un Shopify Expert si vous avez besoin d’aide pour le créer.Si vous utilisez la fonctionnalité de compte à rebours, insérez la variable du minuteur directement dans votre message. Utilisez {{timer}} pour les paniers V2 ou {TIMER} pour les paniers V1.
Assurez-vous de saisir manuellement la variable du minuteur ({{timer}} pour V2, {TIMER} pour V1) plutôt que de la copier-coller. Cela évite des problèmes de mise en forme cachés qui pourraient empêcher le minuteur de s’afficher correctement dans votre panier en ligne.
Vous pouvez contrôler la taille du texte de l’annonce à l’aide du curseur, avec des options allant de 10px à 24px. Cela contribue à garantir la lisibilité sur les expériences mobile et ordinateur.
Background Color vous permet de définir la couleur de remplissage globale de la barre d’annonces. Border Color vous permet d’ajuster les lignes horizontales au-dessus et en dessous de la bannière pour un aspect de conteneur stylisé.
Pour des fonctionnalités supplémentaires, JavaScript peut être utilisé pour personnaliser le compte à rebours. Ajoutez votre script dans la section « Scripts (Before Load) » plutôt que dans le module Custom HTML. Il s’agit d’une exigence de synchronisation de chargement, pas d’une restriction de sécurité — le Custom HTML exécute bien les scripts, mais ils s’exécutent trop tard pour se raccrocher de manière fiable à l’événement de chargement du panier. La section « Scripts (Before Load) » exécute votre code avant le chargement du panier, de sorte que les rappels comme upcartSubscribeCartLoaded se déclenchent correctement. Exemple de code :
<script> window.upcartSubscribeCartLoaded(function(event) { // Your countdown timer code here // event.cart contains the cart object with .items[], .total, .currency });</script>
Remarque sur l’héritage : window.upcartOnCartLoaded fonctionne toujours, mais il est obsolète et génère un avertissement dans la console. Utilisez upcartSubscribeCartLoaded pour tous les nouveaux scripts.Veillez à tester attentivement le placement et la syntaxe de votre code. Certaines restrictions de la plateforme peuvent encore affecter la façon dont les scripts sont traités.
Cette page vous a-t-elle été utile ?
⌘I
Assistant
Responses are generated using AI and may contain mistakes.
