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 Assets et ouvrez le ! Vous allez devoir trouver un fichier xxx.scss.liquid, généralement theme.scss.liquid, style.scss.liquid ou timber.scss.liquid.

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 😉

La vidéo arrive Lundi !

Bon tuto à tous

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

Cet article a 1 commentaire

  1. Super tuto bien pratique encore une fois 🙂

Laisser un commentaire

Fermer le menu

meilleure chaine youtube dropshipping shopify

Envie de tout savoir sur le Dropshipping & Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine