Guides en français pour créer un site Wordpress, Prestashop – Tutoriels LWS

Comment configurer le menu horizontal Prestashop ?

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 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

L’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 :

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

Tout 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 :

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 ». Continuez et cliquez sur l’option « 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.Ce module étant intégré dans PrestaShop lors de son installation, vous le trouverez facilement. Une fois trouvé, cliquez sur le bouton « Configurer ».Vous serez alors redirigé vers une nouvelle interface.Dans 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 :

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.Voici 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.👇

Une fois terminé, cliquez sur le bouton « Enregister ».Les 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. 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 ».

Vous 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.

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é.Une fois trouvé et sélectionné, cliquez sur le bouton « Ajouter ».Une fois ajouté, cliquez sur le bouton « Enregistrer » pour publier vos changements.

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

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 ».

Dans 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.

En 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.Une 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 ».Outre 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.Tout 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. En cliquant sur le bouton « Configurer », vous serez redirigé vers une nouvelle interface. Choisissez un élément à modifier et suivez les étapes nécessaires.

Une 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é.

Dans 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 !

Quitter la version mobile