Comment ajouter un Menu Rapide sur Shopify

Nous allons voir dans ce tutoriel comment ajouter un menu rapide sur shopify. Ce type de menu est idéal lorsque vous avez besoin de mettre 2 ou 3 liens maximum afin que le menu soit visible sur PC et sur Mobile. Ainsi le client n’aura pas besoin de cliquer sur le Burger pour afficher le menu ! et oui un clic en moins = meilleur expérience utilisateur 😀

Vous pouvez voir ce que ça donne sur le site de démo : https://dgeodev.myshopify.com/

Quand utiliser ce type de menu ?

Lorsque vous avez 2 catégories du genre un accès pour femme et un accès pour homme mais encore lorsque vous avez besoin de rajouter vos liens vers vos réseaux sociaux. Et pour finir si vous avez envie de rajouter un menu à un endroit stratégique de votre page pour par exemple booster votre SEO 😉

Comment installer ce menu sur Shopify ?

C’est très simple ! vous allez commencer par trouver un emplacement idéal et ensuite mettre en forme cet élément.

Partie Shopify

Rendez-vous dans l’administration de votre boutique shopify et cliquez sur Boutique en ligne – Navigation – Créer un menu. Appelez-le « quick access » et créer vos liens.

Partie HTML

On part du principe que nous allons ajouter un menu au niveau du header. Par contre vous pouvez adapter son emplacement selon vos besoins 😉

Rendez-vous dans Boutique en ligne -> Actions – Modifier le code. A ce stade trouvez le dossier Sections et le fichier header.liquid (logiquement tous les thèmes auront ce fichier). Maintenant essayez de trouver un bon endroit en plaçant dans le fichier des : toto1, toto2, toto3 afin de déterminer l’emplacement idéal pour vous.

Désormais il ne vous reste plus qu’à copier/coller le code suivant:

{% assign dg_menu = "quick-access" %}
<div class="dg-quick-access">   
    {% for link in linklists[dg_menu].links %}
    <a href="{{ link.url }}">{{ link.title }}</a>
    {% endfor %}
</div>

Partie CSS

Rendez-vous dans Boutique en ligne -> Actions – Modifier le code.
Trouvez le dossier Ressources (Assets) et ouvrez le ! Vous allez devoir trouver un fichier base.css, theme.css, style.css ou autre fichier .css que votre thème utilise.

Mettez-vous tout en bas du fichier et copiez/collez le code ci-dessous:

.dg-quick-access {
  //background:#000;
  text-align:center; 
  padding:10px 15px;
}
.dg-quick-access a, .dg-quick-access a:hover {
  //color:#FFF;
}
.dg-quick-access a:after {
 content:" - ";
 display:"table";
}
.dg-quick-access a:last-child:after {
 display:none; 
}

Code à rajouter pour ne l’afficher que sur Mobile

@media screen and (min-width: 768px) {
	.dg-quick-access {
		display:none;
	}
}

Besoin de mettre d’autres menus ?

Vous pouvez reproduire la procédure en changeant le nom du menu et de changer également la variable "quick-access" avec ce nouveau nom 😉

Si vous souhaitez modifier le fond du menu, la couleur et le placement des liens je vous invite à regarder la vidéo 😉

Ce tutoriel existe aussi en vidéo

Bon tuto à tous

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 4 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 5 commentaires

  1. max harder'z

    28 Juin 2020 Répondre

    Super tuto bien pratique encore une fois 🙂

  2. Gary Bramnik

    1 Oct 2020 Répondre

    Merci pour ce tuto, vous c’est vraiment cool. Petite question, comment affiche ce menu uniquement sur mobile ? Merci pour ce que vous faites.

    1. Dgeo Dev

      2 Oct 2020 Répondre

      Hello, y a un code plus bas dans le tuto qui propose cela.

  3. Spitals

    17 Déc 2020 Répondre

    Bonjour,
    Super tuto ! Est-ce possible de mettre le menu simplement dans une section de la page d’accueil, et non dans header ou footer ?

    Merci !

    1. Dgeo Dev

      17 Déc 2020 Répondre

      Hello, oui c’est possible, il faut juste trouver le bon fichier 🙂

Laisser un commentaire

Fermer le menu
×
×

Panier