Vous pouvez utiliser la fonctionnalité de code CSS personnalisé intégrée pour modifier l’apparence de la bannière d’annonce de manière à ce qu’elle apparaisse en pleine page ou sous la forme d’un message contextuel. Cela ajoute une couche à votre thème existant, au lieu d’afficher une barre en haut de la page Web.

Ce processus est différent de celui utilisé pour désactiver votre boutique eCom.

Notre équipe de soutien technique peut vous aider avec la solution fixe présentée ici, mais la modification du code CSS peut entraîner des problèmes nécessitant l’aide d’un service tiers pour une personnalisation plus poussée.

L’apparence par défaut de la bannière d’annonce est une barre grise qui apparaît en haut de votre page Web :

Ces instructions changeront la bannière d’annonce en un message bleu en plein écran sur votre page Web :

Ajout du code CSS personnalisé

Vous pouvez modifier l’apparence de la bannière d’annonce sur votre site Web. Pour ce faire, suivez les instructions ci-dessous :

1. À partir de l’arrière-boutique eCom, dans la barre latérale de gauche, cliquez sur Design.
2. Du côté droit de l’écran, cliquez sur Avancé.
3. Dans le coin supérieur droit de l’écran, cliquez sur Personnaliser le code CSS.
4. Copiez le code suivant :
   

   .wsa-demobar {
     font-size: 2em !important;
     color: #333 !important;
     padding-top: 200px;
     height: 100% !important;
     width: 100% !important;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 9999;
     background: #a7c7dc !important; /* Old browsers */
     background: -moz-linear-gradient(top, #a7c7dc 0%, #85b2d3 100%) !important; /* FF3.6-15 */
     background: -webkit-linear-gradient(top, #a7c7dc 0%,#85b2d3 100%) !important; /* Chrome10-25,Safari5.1-6 */
     background: linear-gradient(to bottom, #a7c7dc 0%,#85b2d3 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   }
   .wsa-demobar a {
       display: none;
   }
   .wsa-demobar .close {
       display: none !important;
   }
   

5. Copiez-le dans la fenêtre CSS personnalisé.
6. Cliquez sur Sauvegarder.

Traduire les messages

Vous pouvez utiliser la fonctionnalité de traduction dans votre boutique eCom pour modifier l’affichage des messages dans différentes langues, dans la limite de 255 caractères par message. Les étapes ci-dessous expliquent comment traduire les messages spécifiques Cette boutique est en construction et Toute commande passée ne sera ni traitée, ni complétée, mais les mêmes instructions peuvent être suivies pour la traduction d’autres chaînes de traduction, si nécessaire.

1. À partir de l’arrière-boutique eCom, dans la barre latérale de gauche, cliquez sur Contenu > Traduction.
2. Sélectionnez la chaîne de traduction Cette boutique est en construction ou Toute commande passée ne sera ni traitée, ni complétée dans la liste.
   • Si elles ne figurent pas dans la liste, cliquez sur Modify translation (modifier une traduction) pour les rechercher.
3. Saisissez un message pour remplacer chaque chaîne de traduction dans les champs Traduction à.
4. Cliquez sur Sauvegarder.
5. Pour l’autre chaîne de traduction, répétez les étapes à partir de l’étape 2.

Activer la bannière d’annonce

Suivez ces instructions pour rendre vos modifications visibles en activant la bannière d’annonce.

1. À partir de l’arrière-boutique eCom, dans la barre latérale de gauche, cliquez sur Paramètres.
2. Dans la section Paramètres généraux, cliquez sur Avancé.
3. Dans la section BOUTIQUE, activez l’option Afficher la bannière d’annonce.

Afficher la bannière d’annonce sous la forme d’un message

Vous pouvez afficher votre bannière d’annonce sous la forme d’un message flottant sur votre site Web, que les utilisateurs peuvent fermer après l’avoir lu. Vous pouvez utiliser le code CSS ci-dessous pour afficher un message en adaptant le fonctionnement de la bannière d’annonce.

Exemple de code CSS

Ce code CSS peut être appliqué à votre site Web pour que la bannière d’annonce apparaisse sous la forme d’un message contextuel au lieu d’une bannière.

1. À partir de l’arrière-boutique eCom, dans la barre latérale de gauche, cliquez sur Design.
2. Du côté droit de l’écran, cliquez sur Avancé.
3. Dans le coin supérieur droit de l’écran, cliquez sur Personnaliser le code CSS.
4. Copiez le code suivant :
   

   
   /* Bannière d’annonce eCom (C-Series) - Création d’un message contextuel DÉBUT*/
   div.wsa-demobar {
     top: auto !important;
     bottom: 100px;
     border-radius: 10px;
     padding: 10px;
     width: 20% !important;
     height: auto !important;
     position: fixed;
     font-size: 11px;
     text-shadow: 0px 0px 3px black !important;
     right: 30px;
     left: auto !important;
     background: #333333 !important;
     box-shadow: 5px 5px 5px hsla(231, 92%, 49%, 0.11) !important;
   }
   
   /* Si vous souhaitez supprimer le lien « Return to backoffice » */
   .wsa-demobar a { display: none; }
   
   /* Si vous souhaitez que le message s’affiche sans possibilité de le fermer */
   .wsa-demobar a.close { display: none !important; }
   /* Bannière d’annonce eCom (C-Series) - Création d’un message contextuel FIN */
   

5. Copiez-le dans la fenêtre CSS personnalisé.
6. Cliquez sur Sauvegarder.

Tester vos modifications

Comme pour toute modification d’apparence, vous devriez toujours tester vos modifications pour voir si le résultat final vous plaît. Ouvrez une fenêtre de navigation privée et accédez à la page d’accueil de votre boutique eCom pour voir à quoi ressembleront les modifications du point de vue de vos clients.