brand-lws-red brand-lws-white
Tutoriels

PrestaShop
time_read40mn de lecture

Comment configurer le menu horizontal Prestashop ?

11 mai 2022

Comment configurer le menu horizontal Prestashop ?

Sur une boutique PrestaShop, l’ajout d’un menu horizontal peut permettre à vos clients de trouver facilement les produits qu’ils cherchent. La configuration du menu est une des étapes de personnalisation qu’il ne faut pas prendre à la légère.

Prestashop : configurer le menu horizontalmenu horizontal

Il existe des modules qui vous permettent de créer un menu horizontal. Pour découvrir comment vous pouvez procéder, lisez cet article jusqu’à la fin !

Lors de l’installation de PrestaShop, l’application embarque avec elle un module pour ajouter un menu à votre boutique.

Objectif

configurer menu prestashopL’objectif de ce tutoriel est de vous donner les connaissances nécessaires pour créer un menu sur votre boutique PrestaShop. Vous serez guidé pas à pas sur cette procédure, qu’il s’agisse de la création du menu horizontal via l’espace d’administration ou via un module personnalisable. Vous allez également découvrir comment configurer les couleurs de votre menu PrestaShop.

Prérequis

Pour créer un menu horizontal PrestaShop, vous devez respecter quelques conditions :

  • Avoir installé la plateforme e-commerce PrestaShop sur votre hébergement web et créé une boutique
  • Avoir tous les accès de votre espace d’administration PrestaShop

Si vous souhaitez vous lancer pour la première fois avec PrestaShop et commencer à vendre dès aujourd’hui, LWS vous simplifie la tâche avec des offres d’hébergement tout inclus qui vous permettront de créer une boutique en ligne PrestaShop facilement et à moindre coût.

👍 Maintenant que vous avez rempli toutes ces conditions, continuez la lecture de ce tutoriel pour découvrir comment créer votre premier menu PrestaShop et le configurer☺️.

Choisir les éléments à afficher dans le menu

menu horizontalTout comme pour un site WordPress ou tout autre site web en ligne, un menu peut contenir plusieurs éléments. L’objectif d’un menu horizontal est en effet de faciliter la navigation aux visiteurs. C’est dans cette logique qu’un menu peut contenir des pages, des liens, des catégories…

Pour faciliter, la navigation à vos clients sur votre boutique PrestaShop, votre menu peut intégrer des éléments suivants :

  • Des catégories de vos produits : ce qui permettra à vos clients de s’orienter rapidement et trouver les produits qu’ils recherchent. Répertorier vos produits dans des catégories distinctes et les lister dans un menu horizontal peut vous permettre de croître vos ventes. Ne l’oubliez pas toujours, vos clients ne vont pas s’éterniser, à chercher un produit qu’ils ne trouvent pas rapidement.
  • Des liens personnalisés : ceux-ci peuvent mener à différentes destinations telles qu’une nouvelle offre, un produit, un service ou un page de conditions générales de vente ou celle contenant des informations sur votre entreprise.
  • Un lien de blog : ajouter un blog à sa boutique est une des pratiques de marketing qui a montré des résultats encourageants. Les articles qui y sont publiés peuvent rapidement ramener du trafic sur votre boutique ou des nouveaux clients sur votre site depuis les moteurs de recherche.

Ainsi, pour choisir les éléments à afficher dans le menu horizontal, connectez-vous à votre espace d’administration. Ensuite, rendez-vous dans la section « Personnaliser » puis dans la sous-section « Modules ».personnaliser/modules Continuez et cliquez sur l’option « Gestionnaire de modules ».gestionnaire de modules En cliquant sur cette option, vous serez automatiquement redirigé vers une nouvelle interface. Cette dernière liste tous les modules que vous avez installés actuellement sur votre boutique. Vous devez rechercher le module menu principal.

Pour cela, vous pouvez soit défiler avec cette page pour le trouver, soit utiliser la zone de recherche pour le trouver rapidement. Tout ce que vous aurez à faire est d’indiquer dans la zone de recherche, le terme « menu » et attendre les résultats qui s’affichent au bout de quelques secondes.rechercher le module menuCe module étant intégré dans PrestaShop lors de son installation, vous le trouverez facilement. Une fois trouvé, cliquez sur le bouton « Configurer ».configurer menu PrestaShopVous serez alors redirigé vers une nouvelle interface.interface de configuration de menu PrestaShopDans la nouvelle page, vous avez tous les éléments qui vous permettent de configurer votre menu. Comme vous pouvez le voir dans la zone encadrée ci-dessus, vous avez deux tableaux :

  • Éléments disponibles : ce sont tous les éléments qui sont présents et que vous pouvez ajouter à votre menu horizontal. Parmi la liste, vous allez trouver les pages de votre site, les catégories de produits, les liens personnalisés, etc.
  • Éléments sélectionnés : ce sont des éléments qui sont déjà présents dans votre menu. Dans l’image d’illustration ci-dessus👆, la zone est vide, car aucun élément n’a été ajouté jusqu’ici.

Placer des catégories dans le menu

Ainsi, pour placer les catégories dans votre menu horizontal, rendez-vous dans le tableau des éléments disponibles. Ensuite, défilez avec la liste et trouvez les catégories.ajouter des catégories au menuVoici comment vous devez procéder en deux étapes :

  1. Sélectionner les catégories : pour sélectionner les catégories, vous devez simplement faire un clic droit sur une catégorie et maintenir le bouton droit enfoncé. Ensuite, survolez toutes les autres catégories concernées avec votre souris, ce qui fera en sorte qu’elles soient toutes sélectionnées.
  2. Ajouter : une fois la sélection terminée, cliquez sur le bouton « Ajouter ». Cette action fera en sorte que toutes les catégories concernées soient ajoutées dans la zone des éléments sélectionnés.👇

ajouter des catégories au menuUne fois terminé, cliquez sur le bouton « Enregister ».previsualiser les catégories sur la boutiqueLes catégories sélectionnées ont été ajoutées au menu, vous pouvez vous rendre sur votre boutique pour voir vos modifications.👆

Placer des liens dans le menu

Les liens du menu PrestaShop peuvent mener vers différentes destinations telles que les pages externes ou encore des pages internes à votre boutique.

Pour ajouter des liens à votre menu PrestaShop, vous devez suivre les mêmes étapes que pour ajouter les catégories.

Placer des liens internes dans le menu

Pour placer des liens internes, vous devez sélectionner tous les liens concernés et suivre les étapes nécessaires.ajouter des liens au menu PrestaShop Et comme toujours, vous devez terminer vos modifications en cliquant sur le bouton « Enregistrer » afin qu’elles soient publiées.

Placer des liens personnalisés dans le menu

Si vous souhaitez ajouter un lien personnalisé, vous devez défiler avec la même interface jusqu’à la section « Ajouter un nouveau lien ».

ajouter un lien personnalisé au menuVous devez ajouter votre lien en trois étapes :

  1. Libellé : saisissez dans cette zone, le texte que vous souhaitez voir représenter votre lien sur la boutique et sur d’autres emplacements de votre site.
  2. Lien : renseigner dans cette zone votre lien
  3. Nouvelle fenêtre : si activée, cette option permettra à ce que ce lien soit ouvert dans un nouvel onglet après avoir été cliqué. Il est conseillé d’activer cette option pour améliorer l’expérience de navigation de vos visiteurs ou vos clients.

information

Une fois terminé, cliquez sur le bouton « Ajouter ».👆 Ce qui ajoute automatiquement ce lien dans la liste des éléments disponibles. Pour l’ajouter à votre menu horizontal, rendez-vous dans la zone des éléments disponibles. Ensuite, défilez avec la liste jusqu’à trouver le lien concerné.lien du menuUne fois trouvé et sélectionné, cliquez sur le bouton « Ajouter ».lien ajouté au menu horizontalUne fois ajouté, cliquez sur le bouton « Enregistrer » pour publier vos changements.

🙏Excellent ! Votre lien a été publié avec succès sur votre boutique.lien information

Par ailleurs, PrestaShop enregistre tous les liens personnalisés que vous créez. Dans le but de trouver ces derniers ou les configurer à nouveau, défilez juste en bas de la section « Ajouter un nouveau lien ».

voir les liens créesDans la liste de liens, cliquez sur le bouton « Modifier » du lien que vous souhaitez configurer et suivez les étapes nécessaires. C’est aussi à partir de cette section que vous pouvez supprimer un lien créé. Pour ce dernier cas de personnalisation, il suffit de cliquer sur la flèche pointant vers le bas se trouvant à l’extrême droite du lien puis cliquer sur le bouton « Supprimer ». Et comme toujours, vous devez enregistrer vos changements afin de les publier.

Modifier la position des éléments dans le menu horizontal PrestaShop

Après avoir ajouté des éléments à votre menu horizontal, vous pouvez avoir le souhait de modifier leurs positions respectives. Comment faire ? Lisez la partie suivante.

PrestaShop vous donne la possibilité de revoir la position de vos éléments classés dans le menu après sa création. Ainsi, tout ce que vous avez à faire est de vous rendre dans le tableau des éléments sélectionnés. Ensuite, sélectionnez l’élément dont vous souhaitez changer la position.

Si vous souhaitez faire descendre un élément en position⬇️, cliquez simplement sur la flèche pointant vers le bas après l’avoir sélectionné au préalable.

configurer menu horizontal PrestaShop : descendre un élémentEn revanche, si vous souhaitez faire monter un élément en position⬆️, par rapport aux autres, commencez par le sélectionner, puis cliquez sur la flèche pointant vers le haut.configurer menu horizonatal PrestaShop : monter un element en positionUne fois terminé, vous devez enregistrer vos modifications pour les publier.

Et dans le cas où vous souhaitez supprimer ❌ un élément ajouté au menu, c’est très simple. Rendez-vous dans le panneau des éléments sélectionnés (ceux se trouvant dans votre menu). Ensuite, faites la sélection d’un ou de tous éléments à supprimer. Une fois terminé, cliquez sur le bouton « Retirer » et enfin sur le bouton « Enregistrer ».rétirer un élément du menuOutre la création et la configuration du menu horizontal depuis l’espace d’administration, vous pouvez aussi utiliser un module.

Utiliser un module pour gérer le menu d’une boutique PrestShop

Dans le catalogue de modules de PrestaShop, plusieurs modules du genre existent. Les modules payants de création de menu offrent plusieurs avantages quant à la création et la personnalisation de votre menu horizontal PrestaShop.modules de création de menu horizontalTout ce que vous avez à faire est de choisir un module dans la liste et en commander chez un fournisseur. Suivez ensuite les étapes nécessaires à l’installation d’un module PrestaShop.

Une fois installé, vous pouvez passer directement à la configuration de votre menu PrestaShop. Notez aussi que certains thèmes gratuits intègrent leurs propres modules de création et configuration d’un menu horizontal. Le plus connu de la catégorie est sans doute le thème Waterthemes.

Ce thème est gratuit et embarque avec PrestaShop lors de son installation. Tout ce que vous avez à faire est de l’activer et passer à la configuration. configurer un menu avec le théme WaterthemesEn cliquant sur le bouton « Configurer », vous serez redirigé vers une nouvelle interface. Choisissez un élément à modifier et suivez les étapes nécessaires.

modifier les éléments du menu WaterthemesUne fois terminé, vous devez enregistrer vos modifications.

Modifier les couleurs du menu Prestashop

Il peut arriver aussi que vous ayez le besoin de changer les couleurs d’affichage de votre menu. Cette étape de personnalisation ne se fait pas depuis votre espace d’administration PrestaShop. Vous devez plutôt modifier le fichier CSS de votre thème.

Pour accéder aux fichiers de votre thème, vous pouvez soit utiliser un logiciel client FTP ou alors le gestionnaire de fichiers intégré dans votre compte d’hébergement.

Si vous disposez d’un hébergement web LWS, alors utilisez le File Manager accessible dans votre espace client LWS Panel. Si vous utilisez un hébergement cPanel, alors utilisez le gestionnaire intégré à cPanel. Sinon, vous pouvez utiliser un logiciel client FTP de type FileZilla via les paramètres reçus à la commande de votre hébergement mutualisé ou serveur dédié.

gestionnaire de fichiersDans tous les cas, vous devez accéder aux fichiers de votre thème via le chemin « htdocs/thèmes/thème – actif/ ». Une fois ouvert, vous devez continuer vers le fichier css/modules/blocktopmenu/css/superfish-modified ».

Pour faire cette édition, vous avez besoin d’un éditeur de textes tel que Notepad++. Une fois ouvert dans un éditeur de texte, ajoutez ces lignes de codes.

element {
}
.sf-menu > li > a {
    font: bold 16px/24px "Ubuntu", sans-serif;
    text-transform: uppercase;
    color: #888888;
    display: block;
    padding: 5px 23px 17px;
    position: relative;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}
.sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}

Sur la ligne color : ≠888888, vous pouvez changer cette couleur par celle de votre choix. Vous pouvez vous referez aux valeurs hexadécimales des couleurs pour trouver la couleur que vous recherchez.

👏 Toutes nos félicitations, vous savez maintenant comment créer et personnaliser le menu horizontal PrestaShop !

Vous n’avez pas encore de boutique PrestaShop ? Découvrez vite les offres LWS de création de boutique en ligne PrestaShop ! Bénéficiez d’une offre tout inclus, avec le nom de domaine, l’installation de PrestaShop en un clic…

Vous avez des questions vis à ce vis de la création d’une boutique PrestaShop, la configuration du menu PrestaShop ou autre ? N’hésitez pas à nous contacter en commentaires !

Avatar de l'auteur

Auteur de l'article

Joseph

Joseph est rédacteur web depuis quatre ans. Ses thématiques préférées sont le digital et le web marketing et l’e-commerce. La persévérance, l’assiduité et le courage font partie de sa méthode de travail. C'est ce qui lui permet d'affronter n’importe quel sujet.

Avis client de l'hébergeur LWS

Nos avis Trustpilot Nos avis Hostadvice Nos avis sur avis.lws.fr
Avis trustpilot 30/04/2022

LWS l'hébergeur par excellence !

LWS est pour moi l'hébergeur par excellence, que cela soit au niveau de l'hébergement qui est très performant, les mails qui sont d'une qualité professionnelle et de la gestion du domaine facile à comprendre.

PauseGreen

Avis hostadvice 27/04/2022

Super, au top !

Au top, prix attractif. Service très rapide et réactif. Je l'ai même personnellement recommandé à des proches. La vie est bien plus facile avec LWS

Masset Eliot

Avis avislws 26/04/2022

Support

Clair, efficace, rapide et à tarif abordable. J'ai maintenant un site superbe à mon image, puisque je le fais moi-même. L'équipe technique est au top, j'ai une réponse en 20 minutes, cela change d'autres hébergeurs pourtant plus connu.

Lady Whip

Avis hostadvice 24/04/2022

Bravo et merci

Bravo et merci aux équipes techniques pour leur réactivité et leur professionnalisme depuis plus de 10 ans chez eux et de nombreux sites !!! Merci

Olivier Delmas

Avis trustpilot 23/04/2022

Je suis très satisfait.

J'ai commandé un hébergement pour le site d'une association. Tout s'est passé très rapidement et sans la moindre embuche. La tarification est attractive et me parait très claire. Le panneau d'administration de l'hébergement est facile à utiliser et à comprendre. Je n'ai pas encore installé Wordpress car le contenu n'est pas prêt mais ce sera la prochaine étape et je suis très confiant. Merci !

Pierre-André Liné

Avis avislws 20/04/2022

Un service technique excellent

Je suis client chez LWS depuis 2011 avec une boutique OSCommerce qui tourne comme une horloge depuis cette date sur un hébergement mutualisé. La disponibilité de la boutique est très proche de 100%. Concernant les rares problèmes rencontrés en huit ans, j’ai eu à chaque fois un technicien compétent qui a résolu le problème très rapidement et efficacement. Je suis en train de migrer sur une plateforme Pretashop sur un VPS, avec l’offre LWS Debian 9 et Prestashop. Un technicien m’a grandement aidé pour finaliser l’installation de la boutique lors de la mise à jour vers la dernière version de Prestashop 1.7 qui posait problème. Je suis très satisfait de LWS, et ce sur la durée : réponses et réactions rapides et efficaces. Je recommande cet hébergeur et encore merci.

Alain

Avis trustpilot 16/04/2022

Une expérience jamais égalée !

Étant Développeur Web & Mobile Full-Stack depuis plus de 5 ans déjà, j'ai rarement eu un service client aussi rapide et efficace. Sans compter la qualité du service en ligne. Je recommande VIVEMENT LWS !

Chris KOUAKAM

Avis hostadvice 12/04/2022

Très bon hébergeur

J'ai un serveur VPS chez eux et je n'ai aucun problème, dès qu'il y a un problème le service technique est la pour vous aider et répond assez rapidement à votre demande. Je recommande vivement cet hébergeur.

Vanden Cruyce

Avis avislws 09/04/2022

Je suis ravie

Je suis ravie d'être avec LWS sur tous les plans, je remercie les Techniciens (Fabrice, Omar, Sandy-Mahitsison) depuis plus de 8 ans j'ai évolué avec LWS et toujours soutenue. Une véritable relation humaine même si les questions ou nos inquiétudes ne correspondent pas à leurs missions, ils sont là pour nous répondent et nous rassurent. Mon site c'est mon travail ma source de revenue donc il sont mes partenaires ! les travailleurs de l'ombre merci à eux ! Merci LWS

L'atelier-and-Co

Commentaires (0)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.