Créer une bannière à défilement infini

Une bannière à défilement infini est une barre dont le contenu défile en boucle de droite à gauche, comme un bandeau d’actualités. Utilisez-la pour des promotions récurrentes, des messages de livraison gratuite ou de courtes annonces que vous voulez faire remarquer à votre clientèle.

Note

Une bannière à défilement infini ne comporte qu’une seule section de contenu : il n’y a pas d’option Add Group. Si vous voulez plusieurs messages qui défilent l’un après l’autre, utilisez plutôt une bannière basique.

1. Ouvrir la page Banners

   Dans votre admin Shopify, ouvrez l’application Sami Product Labels, cliquez sur Extra Features dans la barre latérale de l’application, puis passez à l’onglet Banners.

   

   Ouvrez Banners depuis la barre latérale de Sami Product Labels.

2. Cliquer sur Create banners, puis choisir Infinite Scroll

   Cliquez sur Create banners. Dans la boîte de dialogue Select Type, cliquez sur Select à côté de Infinite Scroll, le type qui fait tourner le contenu de la bannière à l’infini pour un effet de défilement continu.

   

   Choisissez Infinite Scroll pour créer une barre façon bandeau défilant.

3. Nommer la bannière

   L’éditeur plein écran s’ouvre sur l’onglet Design. Remplacez New Banner dans le champ du nom, au-dessus de l’aperçu, par un nom de 50 caractères maximum. Ce nom est interne et n’est jamais affiché à votre clientèle.

   À côté du nom, vous trouvez aussi un sélecteur de langue, les boutons d’aperçu bureau et mobile, et l’interrupteur de statut Active / Draft.

   

   La barre d’outils au-dessus de l’aperçu contient le nom de la bannière, la langue, l’appareil d’aperçu et le statut.

4. Modifier le contenu défilant

   Section 1 commence par un seul élément Description contenant un texte d’exemple tel que ✨ Free ship on order $40+ ✨. Cliquez dessus pour ouvrir ses réglages à droite :

   • Content : un éditeur de texte enrichi avec gras, italique, souligné, emoji, alignement et une vue HTML (</>). La pastille de langue indique la langue que vous modifiez.
   • Text : la Size et la Color de la police.
   • Padding et Margin : l’espacement autour de l’élément, en pixels.

   Cliquez sur Add element pour ajouter d’autres éléments à la boucle (Message, Heading, Line break, Button, Countdown ou Image), et faites glisser la poignée à gauche d’une ligne pour les réordonner.

   

   Modifiez l’élément qui défile sur la barre, ou ajoutez-en d’autres à la séquence.

5. Styliser la barre

   Dans le panneau Style :

   • Background Type : choisissez Single Color, Gradient Color ou Pattern Image. Les bannières à défilement infini utilisent Pattern Image par défaut ; utilisez Change Image pour remplacer la tuile ou Remove pour l’effacer.
   • Font Style : définissez la police, l’épaisseur et la couleur de texte par défaut.
   • Padding : contrôlez l’espacement à l’intérieur de la barre.

   Note

   Les images de motif doivent être au format PNG, JPG ou SVG, peser 5 Mo au maximum et mesurer 512 × 512 px.

6. Ajouter un bouton de fermeture ou rendre la barre cliquable

   Les deux options se trouvent dans le panneau Button et sont désactivées par défaut :

   • Cochez Include Close Button pour placer un « x » sur la barre afin que la clientèle puisse la fermer. Deux champs apparaissent : Color et Hover Color.
   • Cochez Bar Clickable pour transformer toute la barre en lien. Un champ Link URL apparaît : saisissez la destination et utilisez l’interrupteur à côté pour ouvrir le lien dans un nouvel onglet.

   

   Cocher chaque case fait apparaître ses réglages : couleurs du bouton de fermeture ou URL du lien.

7. Régler la vitesse de défilement et le rythme

   Les quatre champs du panneau Animation sont en secondes :

   Champ	Ce qu’il contrôle
   Scroll speed	La durée d’une boucle complète. Un nombre plus élevé fait défiler plus lentement.
   Disappear After	La durée pendant laquelle la barre reste à l’écran avant de se masquer.
   Interval Between Bar Display	Le délai avant que la barre ne réapparaisse.
   Time For The Bar To Fade In	La durée de l’animation d’apparition en fondu.

   Note

   Laissez un champ à 0 pour désactiver ce comportement : par exemple, Disappear After = 0 garde la barre visible jusqu’à ce que la personne la ferme.

   

   Scroll speed définit la durée d’une boucle : augmentez-la pour ralentir le bandeau.

8. (Facultatif) Ajouter du CSS personnalisé

   Ouvrez Advance Section pour écrire votre propre CSS dans la zone Custom CSS (Developer Zone). La liste CSS reference en dessous affiche les sélecteurs disponibles, dont .samita_banner_groups.infinityScroll, l’enveloppe utilisée lorsque le défilement infini est activé. Cliquez sur un sélecteur pour l’insérer.

9. Choisir où la bannière s’affiche

   Passez à l’onglet Placement et choisissez une position d’affichage :

   Position	Comportement
   Top	Repousse le contenu de la page vers le bas.
   Top Sticky	Repousse le contenu vers le bas et reste visible pendant le défilement.
   Top Overlay	Recouvre le haut du contenu de la page.
   Overlay Sticky	Recouvre le contenu et reste visible pendant le défilement.
   Bottom Sticky	Fixée en bas de la page.
   Custom	Placez la barre où vous voulez à l’aide d’un shortcode.

   Sous le sélecteur de position, affinez l’audience avec Product conditions, Customer conditions, Page conditions, Language conditions, Country conditions, Other conditions et Visibility date. Le panneau Shortcode vous donne l’extrait à coller dans votre thème lorsque vous choisissez Custom.

   Consultez Configurer les conditions d’affichage pour le détail de chaque type de condition.

   

   Choisissez une position d’affichage, puis ajoutez des conditions pour contrôler qui voit la bannière.

10. Enregistrer et activer

    Réglez l’interrupteur de statut au-dessus de l’aperçu sur Active, puis cliquez sur Save en haut à droite. Laissez-le sur Draft pour continuer à travailler sans publier.

    Attention

    Les bannières ne s’affichent sur votre vitrine que si l’intégration d’application est activée dans votre thème. Consultez Activer l’application dans votre thème.

Étapes suivantes

• Configurer les conditions d’affichage : contrôlez où et pour qui votre bannière s’affiche.
• Créer une bannière basique : créez plutôt une barre d’annonce statique ou rotative.

Astuce

Besoin d’aide ?

Si vous rencontrez des difficultés en suivant ces étapes, contactez-nous à l’adresse [email protected].