Comment configurer la bannière de titre de votre boutique ?

Comment configurer le logo et  le titre de votre app?

Bonjour et bienvenue dans votre backoffice GoodBarber !

Aujourd'hui nous allons paramétrer le header ou Logo et Titre de votre application.

Il s'agit de la partie supérieure de l'application qui est toujours visible et accessible sur toutes les sections.

Le header a 4 objectifs :

- Afficher l'identité de votre app

- Donner un titre à une section

- Afficher les raccourcis

- Naviguer dans l'application

Allons tout de suite le paramétrer dans le menu Contenu & Design > Design > Design Général.

Je clique sur Logo et Titre.

Ici je peux soit entrer le nom de mon application au format texte, soit ajouter un logo.

J'ai envie de quelque chose de très "brandé" donc je vais ajouter un logo plutôt.

Je l'ai déjà préparée ;)

Voilà !

Maintenant je choisis l'alignement du logo a droite, ou centré.

Facile non?

Vous en voulez plus? J'en étais sûre !

On peut aller plus loin dans la personnalisation du header en activant le menu Avancé ici.

Voilà, j'ai bien plus d'options maintenant.

Je peux changer la couleur de fond, de la barre de séparation, ajouter des images de fond.

Je peux aussi ajouter des liens à mon Header.

Je vais ajouter un lien vers le Panier ici. Je clique sur Ajouter une action, je choisis l'icône, je paramètre les couleurs de mon raccourci. Parfait.

Pour la version PWA, on peut choisir d'afficher le titre du raccourci sur tablette et desktop.

Ensuite la couleur de la bullette du panier et c'est terminé.

Dernier paramètre, les autres éléments du header.

Ici il s'agit des icônes de retour qui s'afficheront dans le header pendant que le clients navigue dans votre catalogue.

Selon le mode de navigation choisi, vous pourrez avoir d'autres options. Avec un Swipe par exemple, vous pourrez aussi choisir l'icône pour ouvrir le menu.

je vous mets la vidéo sur les modes de navigation dans la barre d'info ;)

Je prévisualise.

C'est terminé !

Je vous montre le résultat final.

Voilà vous savez maintenant comment personnaliser le Header de votre boutique.

A bientôt pour un nouveau tutoriel !