Comment créer un méga menu à onglets

Aperçu

Le thème Tabbed Mega Menu dans le thème Concept est un système de navigation hautement personnalisable qui améliore l'expérience utilisateur en affichant les catégories de produits avec des onglets interactifs, des produits en vedette et du contenu promotionnel. Ce guide vous guide dans sa configuration et sa personnalisation pour répondre aux besoins de votre magasin.

💡 Remarque : le méga menu à onglets est disponible uniquement à partir de Concept v4.0.0 . Si vous utilisez une ancienne version du thème, consultez cet article pour une version simplifiée du méga menu.

Comment configurer le méga menu à onglets

1. Ajout d'un méga menu à onglets

1. Accédez à votre panneau d'administration Shopify.
2. Accédez à Boutique en ligne > Thèmes .
3. Cliquez sur Personnaliser sur le thème Concept.
4. Dans la barre latérale gauche, recherchez et sélectionnez la section En-tête .

5. Sous la section, cliquez pour ajouter un bloc, puis sélectionnez Méga menu à onglets .

   

2. Configuration des paramètres principaux

1. Sous Élément de menu , entrez le nom de l'élément de menu (par exemple, « Boutique ») qui déclenchera le méga menu.
2. Saisissez le libellé du bouton (par exemple, « Afficher tous les produits »). Laissez vide pour masquer le bouton.
3. Définissez le lien Bouton comme vous le souhaitez, par exemple pour rediriger les utilisateurs vers une collection ou une catégorie.
4. Définissez le titre 1 (par exemple, « Collections ») et le titre 2 (par exemple, « Les plus populaires ») pour étiqueter les sections.
5. Activez/désactivez les options de mise en page mobile , telles que l'affichage du fournisseur ou du prix du produit.

3. Ajout d'onglets au Mega Menu

Le Mega Menu à onglets prend en charge 5 onglets dans une disposition verticale, comme le montre la première capture d'écran. Chaque onglet est configuré de la même manière en procédant comme suit :

Ajouter une catégorie de produits

1. Sous l' onglet 1 :
   • Définissez la Target , qui est l'étiquette affichée pour l'onglet (par exemple, "Casque").
   • Sélectionnez le lien cible , qui doit être lié à une collection, pour garantir que l'onglet navigue correctement.
   • Choisissez Produits à afficher sous cet onglet. Sur les ordinateurs de bureau, en fonction de la taille de l'écran, le nombre de produits affichés peut être ajusté automatiquement de 2 à 4. L'ajout de plus de 4 produits ici entraînera la suppression des éléments supplémentaires.
2. Téléchargez une icône personnalisée pour l'onglet.
   • Taille recommandée : format SVG ou PNG .
   • Ajustez la largeur de l'icône (par exemple, 42 px).

Ajout d'une bannière promotionnelle

1. Localisez la section Promotion 1 .
2. Téléchargez une image de promotion .
3. Ajustez le rapport d'image mobile .
4. Définissez un titre (par exemple, « Créez votre offre groupée »).
5. Ajoutez un sous-texte (par exemple, « Achetez-en 3 et économisez 30 % »).
6. Activer/désactiver le texte de superposition sur l'image . L'activation de cette option déplacera la superposition de texte sur l'image, vous permettant de créer un design plus intégré visuellement.
7. Définissez un lien pour la promotion.
8. Vous pouvez éventuellement définir un Tag , qui ajoute une superposition d'étiquette en forme de balise sur l'image, comme indiqué dans la capture d'écran.
9. Personnalisez la couleur du texte , la couleur de la superposition et l'opacité de la superposition à votre guise.

Si vous le souhaitez, répétez ces étapes pour les 4 autres onglets.

6. Finalisation et tests

1. Prévisualisez le menu sur ordinateur et mobile .
2. Assurez des interactions fluides en survol et en clic.
3. Ajustez les paramètres si nécessaire pour une meilleure expérience utilisateur.
4. Enregistrez les modifications et publiez lorsque vous êtes prêt.

Conclusion

Le Mega Menu à onglets est un outil puissant pour améliorer la navigation et présenter efficacement les produits clés. En suivant ce guide, vous pouvez créer un menu visuellement attrayant et convivial qui stimule l'engagement et les ventes.

Besoin d'une aide supplémentaire

Si vous rencontrez des problèmes ou avez besoin d'aide supplémentaire avec votre thème Concept, veuillez contacter nos services d'assistance via notre système de tickets pour obtenir de l'aide dans les 8 heures.

Scannez le code QR ci-dessous pour rejoindre notre communauté WhatsApp pour les mises à jour, les actualités et les annonces.