Bonjour. Comment pouvons-nous vous aider ?

Création d’un message pleine page de maintenance

Cet article présente la marche à suivre pour créer un message pleine page indiquant la maintenance ou un site hors connexion. Ce processus requiert l’utilisation de la fonctionnalité intégrée de CSS personnalisé pour modifier la barre démo. Cette solution ajoute simplement une couche supplémentaire sur le thème existant; elle ne supprime aucun élément de la véritable page.

Pour connaître d’autres moyens de désactiver de façon temporaire ou permanente votre boutique eCom, cliquez ici.

Par défaut, la barre démo est une barre grise qui s’affiche dans le haut de votre page Web. Elle contient un message de maintenance et comprend un lien vers l’arrière-boutique eCom.

L’apparence par défaut de la barre démo.

Les directives ci-dessous permettent de modifier l’apparence de la barre démo pour qu’un message bleu pleine page s’affiche sur votre page Web. Elles vous indiquent aussi la marche à suivre pour traduire le message, qui ressemblera par défaut à l’image suivante :

La barre démo comme elle s’affiche après les modifications du CSS.

REMARQUE

Notre équipe d’assistance s’engage à vous aider avec votre boutique eCom. La modification du CSS de votre thème pourrait causer des problèmes d’apparence ou de fonctionnalité. Advenant une telle situation, il est possible que notre équipe d’assistance n’ait pas les connaissances nécessaires pour résoudre le problème dans le CSS de votre boutique eCom. Dans ce cas, elle pourrait vous recommander de :

  • communiquer avec un développeur tiers pour résoudre le problème ; 
  • supprimer les modifications apportées au CSS pour restaurer l’apparence par défaut du thème original.
  1. Ajout du code CSS personnalisé

    Vous pouvez modifier la façon dont votre barre démo s’affiche sur votre site Web. À l’aide du code CSS personnalisé, vous pouvez configurer votre barre démo pour qu’elle occupe toute la page plutôt que son emplacement par défaut dans la partie supérieure. Pour ce faire, suivez ces directives :

    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 Paramètres.
    3. Dans le coin supérieur droit de l’écran, cliquez sur CSS personnalisé.
    4. Copiez le code suivant :
      .wsa-demobar {
        font-size: 2em !important;
        color: #333 !important;
        padding-top: 200px;
        height: 100% !important;
        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.
  2. Traduction du message de la barre démo

    Voici le texte standard de la barre démo :

    Cette boutique est en construction. Toute commande passée ne sera ni traitée, ni complétée.

    Vous pouvez utiliser la fonctionnalité de traduction de votre boutique eCom pour modifier le message selon vos besoins. Si le message par défaut vous satisfait, ignorez ces directives.

    Deux phrases distinctes doivent être traduites : « Cette boutique est en construction » et « Toute commande passée ne sera ni traitée, ni complétée »

    Pour traduire ce message :

    1. À partir de l’arrière-boutique eCom, dans la barre latérale de gauche, cliquez sur Contenu > Traductions.
    2. Cliquez sur Override Translation (écraser la traduction).
    3. Dans Translation to override (traduction à écraser), commencez à taper Cette boutique est en construction et sélectionnez Cette boutique est en construction lorsqu’il s’affiche.
    4. Cliquez sur Create (créer).
    5. Sous Translation to X language (traduire vers la langue X), entrez le message souhaité allant jusqu’à 255 caractères pour remplacer Cette boutique est en construction.
    6. Cliquez sur Sauvegarder.
    7. Répétez les étapes 1 à 6 pour la seconde moitié du message : Toute commande passée ne sera ni traitée, ni complétée.
  3. Activer la barre démo

    Jusqu’à présent, aucun changement visuel n’a été appliqué à votre site Web Suivez ces directives pour rendre les modifications visibles en activant la barre démo :

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

    Comme pour toute modification de design, vous devriez toujours tester vos modifications pour voir si vous êtes satisfait du résultat final. Ouvrez une fenêtre de navigation privée, rendez-vous à la page d’accueil de votre boutique eCom et vérifiez que les modifications sont appropriées. Avec des connaissances en CSS, vous pouvez maintenant adapter l’apparence du message de maintenance.

Cet article vous a-t-il été utile ?

Utilisateurs qui ont trouvé cela utile : 0 sur 0