> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Module d'annonces

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

<div id="height">
  # Hauteur
</div>

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.

<div id="position">
  # Position
</div>

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.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/announcements-bar-position-comparison.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=10c93ddb37a1b682ee6ffd8c22ca0365" alt="Deux paniers Upcart comparant la barre d'annonces positionnée au-dessus et en dessous des produits" width="1845" height="1380" data-path="images/upcart/announcements-bar-position-comparison.png" />

<div id="timer-minutes">
  ## Minuteur (minutes)
</div>

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.

<Note>
  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.
</Note>

<div id="announcement-text">
  ## Texte de l'annonce
</div>

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.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/announcements-color-picker-open-styling.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=b5cf7eef319675ff522346102babd4ff" alt="Sélecteur de couleurs ouvert pour styliser le texte dans l'éditeur de texte d'annonce" width="990" height="758" data-path="images/upcart/announcements-color-picker-open-styling.png" />

<Note>
  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).
</Note>

<div id="adding-a-link-or-url-to-the-announcement">
  ### Ajouter un lien ou une URL à l'annonce
</div>

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

1. Allez dans **Upcart > Cart Editor > Settings > Custom HTML**.

2. 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).

3. Collez un extrait avec votre lien, par exemple :

   ```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   <div style="text-align: center; padding: 8px;">
     <a href="https://yourstore.com/sale" style="color: #ffffff; text-decoration: underline;">
       Shop the sale →
     </a>
   </div>
   ```

4. 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](/fr/upcart/custom_html) et [Custom CSS](/fr/upcart/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.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/announcements-announcement-text-field-timer.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=4ba5a19c53cfefb36cc37c1d560c6b3e" alt="Champ de texte d'annonce avec la variable de compte à rebours ajoutée au message" width="1094" height="462" data-path="images/upcart/announcements-announcement-text-field-timer.png" />

<div id="important">
  ## Important
</div>

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.

<div id="font-size">
  # Taille de police
</div>

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.

<div id="colors">
  # Couleurs
</div>

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

<div id="advanced-timer-configuration">
  # Configuration avancée du minuteur
</div>

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 :

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<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.