Créer une bannière basique

Une bannière basique est une barre que vous composez à partir d’éléments de contenu (titres, messages, boutons, comptes à rebours, images) regroupés en une ou plusieurs sections. L’éditeur comporte deux onglets : Design (contenu et style) et Placement (où et pour qui la barre s’affiche).

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 Basic

   Cliquez sur Create banners. Dans la boîte de dialogue Select Type, cliquez sur Select à côté de Basic, le type qui prend en charge un ou plusieurs groupes de contenu.

   

   Choisissez Basic pour créer une barre d’annonce standard.

   Note

   Vous préférez ne pas partir de zéro ? Sur la page Banners, utilisez Featured templates ou View all templates pour ouvrir une bannière prête à l’emploi et la modifier.

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 : il identifie la bannière dans votre liste 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. Créer le contenu

   Sous Content, Section 1 liste les éléments qui composent la barre. Cliquez sur un élément pour modifier son texte et son style, faites glisser la poignée à gauche pour le réordonner, ou utilisez les icônes à droite d’une ligne pour le masquer, le dupliquer ou le supprimer.

   Cliquez sur Add element pour en ajouter un :

   Élément	Ce qu’il ajoute
   Message	Une ligne de texte courant.
   Heading	Un grand titre.
   Line break	Un espacement vertical entre les éléments.
   Button	Un bouton d’appel à l’action avec son propre lien.
   Countdown	Un compte à rebours en jours / heures / minutes / secondes.
   Image	Une image ou un logo.

   

   Ajoutez, réordonnez et modifiez les éléments qui composent la barre.

5. (Facultatif) Ajouter d’autres groupes de contenu

   Cliquez sur Add Group pour créer Section 2, Section 3, et ainsi de suite. Chaque section est un message distinct, et la bannière les fait défiler tour à tour ; vous réglez le rythme sous Animation dans les étapes suivantes.

   Gardez une seule section si vous ne voulez qu’un message fixe.

6. Styliser la barre

   Dans le panneau Style :

   • Background Type : choisissez Single Color, Gradient Color ou Pattern Image, puis définissez la couleur ou l’image.
   • Font Style : définissez la police, la taille, l’épaisseur et la couleur du texte.
   • Padding : contrôlez l’espacement à l’intérieur de la barre.

   

   Définissez l’arrière-plan, les polices et le remplissage de toute la barre.

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

8. Régler le rythme de l’animation

   Dans le panneau Animation, choisissez une transition Horizontal ou Vertical, puis définissez les durées en secondes :

   Champ	Ce qu’il contrôle
   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.
   Time Per Group	La durée d’affichage de chaque section avant de passer à la suivante.

   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.

9. (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 : cliquez sur l’un d’eux pour l’insérer.

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

11. 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 : définissez des règles de ciblage détaillées pour votre bannière.
• Créer une bannière à défilement infini : essayez plutôt une barre défilante façon bandeau.

Astuce

Besoin d’aide ?

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