Notre article de blog précédent traitait de la création de collections de produits dans Shopify pour faciliter la navigation pour vos clients. En créant des collections et en attribuant des balises, vous pouvez regrouper des éléments en fonction des critères que vous jugez appropriés. Vous pouvez regrouper les produits par prix, taille, couleur, fabricant, etc. Dans cet article, nous vous expliquerons comment ajouter des menus déroulants à vos pages de collection.
La raison de ce tutoriel est simple : certains thèmes utilisent des liens de catégories au lieu de menus déroulants ou de boutons radio. La première étape consiste donc à activer la fonctionnalité de collecte dans votre thème en suivant les instructions comprises dans l’article précédent. Ouvrez ensuite votre navigateur et accédez à l’une de vos pages de collection. Si un menu déroulant ou un bouton radio est activé par défaut, tout est prêt. Si vous avez des liens à la place, vous devrez apporter quelques modifications au code.
Comme les instructions de notre précédent article, vous allez copier et coller le code. Vous pouvez trouver le code en visitant le site Shopify, en naviguant vers la page de documentation et en recherchant les « filtrer les collections par balises de produits ». Vous pouvez également suivre le lien des sources au bas de cet article pour obtenir le code. Le code que vous recherchez est à mi-chemin de la page.
Modifier le fichier
Le fichier à modifier est nommé « collection-template.liquid » si vous utilisez les thèmes Brooklyn ou Jumpstart. Si vous utilisez un autre thème, le fichier que vous recherchez est nommé « collection.liquid ». Le fichier se trouve dans les répertoires suivants:
- Brooklyn – Répertoire Snippets
- Jumpstart – Répertoire Sections
- Autres thèmes – Répertoire Templates
Pour éditer le fichier Brooklyn, ouvrez-le et faites défiler la liste jusqu’à ce que la balise </ header> apparaisse. Placez votre curseur sur la ligne ci-dessus, puis ouvrez une nouvelle fenêtre de navigateur et récupérez le code de la documentation Shopify. Copiez ce code et collez-le dans cet espace au-dessus de la balise </ header>.
Pour éditer le fichier Jumpstart, ouvrez-le et faites défiler jusqu’à trouver la balise <div class = « wrapper wrapper-margins »>. Créez une nouvelle ligne en dessous et collez le code dans cette ligne. Il est important que vous obteniez ce droit. Si vous collez le code au-dessus de cette balise, vous risquez non seulement de ne pas produire des menus déroulants, mais les pages de vos catégories ne s’affichera pas correctement.
Enfin, ouvrez le fichier collection.liquid à partir du répertoire Modèles si vous utilisez un autre thème. Vous recherchez la balise {% section ‘collection-template’%} dans ce document. Vous allez créer une nouvelle ligne au-dessus de cette balise pour coller le code.
Dans les trois cas, vous devez cliquer sur « Enregistrer » pour que vos modifications soient permanentes. Vous devriez maintenant pouvoir accéder à n’importe quelle page de votre produit et trouver des menus déroulants pour le tri.
Une dernière chose à noter est que la page de documentation de Shopify contenant le code des menus déroulants propose également du code pour les boutons radio. Si vous préférez les boutons radio au lieu des menus déroulants, suivez simplement les instructions sur cette page. C’est assez simple.
