Les arguments publicitaires uniques (ASP) décrivent les raisons pour lesquelles votre entreprise se distingue de ses concurrents. Grâce à l’utilisation avancée de code CSS, nous pouvons convertir la barre démo en une bannière ASP sans modifier le code du thème. Cela permet de personnaliser les boutiques sans activer l’éditeur de thème, ce qui en fait une alternative simple et efficace pour afficher des messages.

Cette fonctionnalité a été testée avec le thème Conform Plus et peut fonctionner avec d’autres thèmes. Le code CSS personnalisé garantit que la bannière ASP est conçue correctement et qu’elle reste masquée sur les petits écrans, afin de conserver une interface mobile claire.

Pour une personnalisation plus poussée, toutes les propriétés de code CSS standard peuvent être appliquées pour modifier l’apparence de la bannière ASP. Une méthode similaire utilisant du code CSS peut être utilisée pour créer un message pleine page de maintenance.

Exemple de bannière d’annonce

Le design par défaut de la barre démo :

Après les modifications du code CSS et de traduction :

Activer la bannière d’annonce

Les étapes ci-dessous vous guideront dans l’activation de la bannière d’annonce après avoir accédé à votre arrière-boutique eCom.

1. Accédez à Paramètres, puis cliquez sur Avancé dans la colonne Paramètres généraux.
2. Faites défiler l’écran jusqu’à la section BOUTIQUE et activez l’option Afficher la bannière d’annonce.
3. Cliquez sur Enregistrer.

Modifier la bannière d’annonce

Vous pouvez modifier l’apparence du texte dans la bannière d’annonce en ajoutant des ASP.

1. Accédez à la page Home (accueil).
2. Accédez à Contenu > Traduction.
3. Cliquez sur Modify translation (modifier la traduction) pour modifier le texte de la bannière d’annonce existant.
4. Cliquez sur Créer.
5. Saisissez un ASP, puis cliquez sur Enregistrer.
   • Vous pouvez ajouter des symboles avant ou après vos ASP pour les différencier. 

Le texte de la bannière d’annonce peut être séparé en deux messages par défaut : Cette boutique est en construction et Toute commande passée ne sera ni traitée, ni complétée.

1. Accédez à Contenu > Traduction.
2. Cliquez sur Override Translation (supplanter une traduction) pour créer de nouvelles traductions.
   • Les traductions sont limitées à 255 caractères.

Par exemple :

• Cette boutique est en construction peut être remplacé par :
  • Commandé avant minuit, livré demain ! • Livraison et retour gratuits
• Toute commande passée ne sera ni traitée, ni complétée peut être remplacé par :
  • Toujours le moins cher !

Modifier le code CSS

1. Accédez à Home (accueil).
2. Accédez à Design > Avancé > Personnaliser le code CSS.
3. Copiez-collez le code suivant.
4. Cliquez sur Enregistrer.

   /* Ce sont des commentaires, ils peuvent être laissés dans votre code CSS. Ils sont là pour fournir des renseignements sur chaque partie. */
   
   /* Cette partie du code CSS permet de masquer le lien vers l’arrière-boutique et le bouton Fermer. */
   .wsa-demobar a, .wsa-demobar a.close {
   
   display: none !important;
   
   }
   
   
   /* Cette partie du code CSS permet de garantir que la barre ASP n’est plus visible lorsque vous faites défiler la page, tout comme la barre démo originale. */
   .wsa-demobar{
   
   position: absolute !important;
   
   
   /* Cette partie du code CSS permet de contrôler la couleur de l’arrière-plan et de la police de la barre ASP. Recherchez en ligne n’importe quel code couleur hexadécimal et remplacez le nombre ci-dessous. #00000000 est noir, #ffffffff est blanc. */
   
   background-color: #000000 !important; 
   
   color: #ffffff !important;
   }
   
   
   /* Cette partie du code CSS permet de garantir que la barre ASP est cachée pour les visiteurs qui utilisent un appareil mobile. Lorsqu’un écran a une largeur inférieure à 767 pixels, les ASP ne s’adaptent pas correctement. */
   
   @media screen and (max-width: 767px){
   
   .wsa-demobar{
   
   display: none !important;
   
   }
   
   body {
   
   margin-top: 0px!important;
   
   }
   
   }

   Comprendre le code CSS

   .wsa-demobar a, .wsa-demobar a.close { display: none !important; }
   Ce code supprime tous les liens de la bannière d’annonce, en particulier la partie « back to back office » (« revenir à l’arrière-boutique »).

   .wsa-demobar{ position: absolute !important; }
   Ce code positionne la bannière d’annonce différemment sur la page Web, par exemple au milieu.

   Pour modifier la couleur, ajoutez le code background-color:red !important; pour rendre la bannière rouge. Vous pouvez utiliser n’importe quelle propriété de code CSS pour modifier l’apparence de la bannière d’annonce.

   @media screen and (max-width: 767px){ .wsa-demobar{ display: none !important; } body { margin-top: 0px!important; } }
   Ce code masque la bannière d’annonce sur les écrans inférieurs à 767 pixels pour que le site Web reste clair et facile à parcourir en version mobile.