Créer une bannière

Voici le parcours complet, d’une page Banners vide jusqu’à une barre visible par la clientèle.

Attention

L’intégration d’application doit être activée, sinon rien de ce que crée l’application ne s’affichera sur votre vitrine. Consultez Activer l’intégration d’application.

1. Ouvrir Banners et en démarrer une

   Dans le menu de l’application, cliquez sur Banners, puis sur Create banner.

   S’il s’agit de la première, la page affiche Create your first banner avec le même bouton au centre.

   

   La page Banners avant d’en avoir créé une.

2. Choisir un point de départ

   Une boîte de dialogue s’ouvre avec dix modèles, regroupés selon leur usage. Cliquez sur l’un d’eux à gauche et l’aperçu à droite montre la barre telle qu’elle apparaîtra sur une page.

   Groupe	Modèles
   Sale and urgency	Flash sale, Black Friday, Selling fast, Sticky footer
   Discount code	Discount code, Welcome offer
   Shipping	Free shipping, Shipping cutoff
   Announcement	Announcement, New arrivals

   Sous l’aperçu, de petites étiquettes indiquent ce que contient la barre (Text, Countdown, Button) et où elle se place.

   Vous préférez partir de zéro ? Choisissez Start from blank en bas de la liste.

   Cliquez sur Use this template.

   

   Chaque modèle peut être modifié ensuite : rien n’y est figé.

3. La nommer

   Le créateur s’ouvre. En haut à gauche, remplacez le nom par quelque chose que vous reconnaîtrez dans la liste : « Black Friday top bar », et non « Banner 3 ».

   Le compteur à côté du champ indique la place qu’il vous reste.

4. Écrire ce que dit la barre

   Le panneau Content liste les éléments de la barre. Cliquez sur l’un d’eux et ses réglages s’ouvrent dans la colonne de droite.

   • Cliquez sur Text pour modifier le message
   • Cliquez sur Countdown pour définir la date de fin
   • Cliquez sur Button pour modifier le libellé et sa destination
   • Faites glisser la poignée à gauche d’une ligne pour réordonner
   • Add element en place un nouveau à la fin

   Consultez Contenu et éléments de la barre pour savoir ce que peut faire chaque élément.

   

   Choisissez un élément à gauche, modifiez-le à droite.

5. Lui donner du style

   Ouvrez le panneau Design, l’icône en forme de pinceau dans le rail.

   Définissez l’arrière-plan, les couleurs du texte et d’accent, la place que prend la barre et si la clientèle peut la fermer. Consultez Concevoir une bannière.

6. Choisir son emplacement

   Ouvrez le panneau Placement, la troisième icône du rail.

   • Top of the page repousse la page vers le bas ; Bottom of the page l’épingle au bas de l’écran
   • Stay on screen la garde visible pendant le défilement
   • Conditions détermine quelles pages l’affichent : laissez All pages pour l’afficher partout
   • Devices la limite à l’ordinateur ou au mobile
   • Schedule l’active et la désactive automatiquement

   Consultez Où s’affiche une bannière.

7. Vérifier l’aperçu

   Le centre du créateur montre la barre sur une page de vitrine fictive. Les deux icônes en haut permettent de passer de la largeur ordinateur à la largeur mobile : cela vaut le coup d’œil, car une barre qui se lit bien sur un ordinateur portable peut être à l’étroit sur un téléphone.

8. La passer en Active et enregistrer

   À côté du nom, passez de Draft à Active, puis cliquez sur Save.

   Draft enregistre la bannière sans la montrer à personne. Active est ce qui la place sur la vitrine.

   

   Une bannière doit être Active pour que la clientèle puisse la voir.

9. Regarder votre vitrine

   Ouvrez votre boutique dans un nouvel onglet et rechargez la page. La barre doit se trouver en haut ou en bas de la page.

   Elle n’y est pas ? Parcourez Le compte à rebours ne s’affiche pas : les mêmes vérifications s’appliquent aux bannières.

Si le bouton a besoin d’un lien

Un bouton réglé sur Open a link a besoin d’une URL pour que la bannière puisse être enregistrée comme Active. Les modèles arrivent avec /collections/all déjà renseigné : remplacez-le par la page où vous voulez envoyer la clientèle.

Étapes suivantes

• Contenu et éléments de la barre
• Concevoir une bannière
• Animation et groupes
• Où s’affiche une bannière