Comment Changer le Codage Menu Shopify

Shopify est aujourd'hui l'une des plateformes d'e-commerce les plus populaires au monde. Les propriétaires de boutiques en ligne peuvent créer rapidement et facilement leur magasin et commencer à vendre des produits en ligne. L'une des caractéristiques les plus importantes de Shopify est le menu du site, qui permet aux visiteurs de naviguer facilement dans le magasin et de trouver les produits qu'ils cherchent. Cependant, pour que le menu fonctionne correctement, il est crucial que le codage soit correctement configuré. Dans cet article, nous allons expliquer comment changer le codage menu Shopify de manière simple et rapide.

Comprendre les bases du codage Shopify

Avant de plonger dans le processus de changement de codage du menu Shopify, il est important de comprendre les bases du codage Shopify. Shopify utilise un langage de balisage appelé Liquid, qui est une version du langage Ruby. Liquid est utilisé pour créer des modèles de pages, des modèles de courriel et bien sûr, des pages HTML dans Shopify. Les fichiers de modèle sont des fichiers .liquid contenant du code Liquid. Tout au long de l'article, nous utiliserons le terme "fichier .liquid" pour décrire le type de fichier qui sera modifié.

Étapes pour changer le codage du menu Shopify

1. Accédez aux fichiers de modèle

La première étape consiste à accéder aux fichiers de modèle. Pour ce faire, allez dans votre tableau de bord Shopify et cliquez sur "Online Store". Dans le menu déroulant, choisissez "Actions" puis cliquez sur "Editer le code". Vous serez dirigé vers la page de l'éditeur de code où vous pourrez accéder aux fichiers de modèle pour votre thème. Les fichiers que nous allons modifier sont les suivants: header.liquid et navigation.liquid.

2. Modifiez le fichier de modèle header.liquid

Dans le fichier de modèle header.liquid, vous trouverez la structure du haut de la page de votre boutique. À l'intérieur de ce fichier, il y aura une référence à votre fichier de modèle de navigation.liquide et une structure de bloc qui ressemblera à ceci:

{% section 'header' %}

{% if settings.search_enable %}

{% render 'search-bar' %}

{% endif %}

{% if settings.cart_enable %}

{% render 'mini-cart' %}

{% endif %}

{% if settings.language_enable %}

{% render 'languages' %}

{% endif %}

C'est cette section que nous allons modifier. Pour ajouter un lien à votre menu, cherchez la section suivante:

{% render 'primary-menu' %}

Vous pouvez ajouter un élément de menu avant ou après cette section. Pour ajouter un élément de menu avant, ajoutez le code suivant juste avant le code ci-dessus:

{ { 'Votre lien' | link_to: '/page' }}

Le code suivant crée un nouveau lien vers votre nouvelle page. Changez simplement "Votre lien" et "/page" pour correspondre à votre nouveau lien. Pour ajouter un élément de menu après, ajoutez simplement le code suivant après la section primary-menu:

{ { 'Offres spéciales' | link_to: '/specials' }}

Encore une fois, changez "Offres spéciales" et "/spéciales" pour correspondre à votre nouveau lien.

3. Modifiez le fichier de modèle navigation.liquid

Dans le fichier de modèle navigation.liquid, vous trouverez la structure de votre menu de navigation. C'est ici que vous pouvez modifier l'ordre et les éléments du menu. La première chose à faire est de trouver le code suivant :

{ % for link in linklists[settings.main_menu].links % }

Ce code initialise une boucle de liens dans le menu principal. Vous pouvez ajouter des éléments de menu avant ou après cette boucle. Pour ajouter un élément de menu avant, ajoutez simplement le code suivant juste avant cette boucle:

{ % link "Nouvelle page", '/new-page' % }

Ce code crée un nouvel élément de menu nommé "Nouvelle page" avec un lien vers "/new-page". Pour ajouter un élément après la boucle, ajoutez simplement le code suivant après la fin de la boucle:

{ % link "Offres spéciales", '/specials' % }

Encore une fois, changez les noms de page et les liens pour correspondre à votre nouveau lien.

4. Enregistrer les modifications

Une fois que vous avez apporté tous les changements nécessaires, cliquez simplement sur "Enregistrer" pour enregistrer vos modifications. Shopify mettra automatiquement à jour le menu sur votre site.

Conclusion

Modifier le codage du menu Shopify peut sembler intimidant, mais c'est en réalité un processus simple qui ne prend que quelques minutes. En comprenant les bases du codage Shopify, vous pouvez facilement ajouter des éléments au menu de votre site. Grâce à cet article, vous devriez maintenant être en mesure de changer le codage du menu Shopify de manière simple et rapide.