How to Add Products to Pages in Shopify

Summary

Dans cette vidéo, l'auteur montre comment ajouter dynamiquement une collection de produits à une page sur Shopify. Il guide les utilisateurs à travers les étapes de création ou modification de pages, l'utilisation des handles de collection, et l'édition du code Liquid dans le fichier `page.liquid` pour afficher les produits d'une collection. Le processus inclut l'ajout de filtres pour séparer et nettoyer le contenu, l'intégration de produits dynamiques en fonction du handle de collection et la personnalisation de l'affichage des produits sur la page. Ce tutoriel aide les utilisateurs à personnaliser leurs pages en fonction des collections sans complexité excessive.

Takeaways

• 😀 Utiliser le handle d'une collection dans la page pour afficher des produits spécifiques.
• 😀 La méthode 'split' de Liquid permet de séparer le contenu de la page en fonction du mot-clé 'collection'.
• 😀 Le handle d'une collection dans Shopify est essentiel pour identifier et afficher des produits sur la page.
• 😀 Il est nécessaire de récupérer le contenu de la page et d'utiliser le handle de la collection pour intégrer dynamiquement les produits.
• 😀 L'utilisation de la méthode 'strip_html' permet d'éliminer les balises HTML superflues après le découpage du contenu.
• 😀 Pour chaque produit de la collection, une boucle 'for' est utilisée pour afficher des informations comme le titre et l'image du produit.
• 😀 Vous pouvez personnaliser le design de la page en ajoutant des balises HTML et en utilisant des classes CSS pour organiser les produits.
• 😀 Les produits affichés sur la page sont dynamiques, ce qui signifie que vous pouvez changer la collection simplement en modifiant le handle dans le contenu de la page.
• 😀 Le tutorial montre comment afficher différentes collections de produits sur des pages distinctes sans avoir à dupliquer le code.
• 😀 La possibilité de lier chaque titre de produit à sa propre page via l'attribut 'product.url' permet une navigation fluide et un accès direct aux pages des produits.
• 😀 Le processus est très flexible et permet une personnalisation poussée, offrant aux utilisateurs un moyen de modifier l'apparence et le contenu des pages selon leurs besoins.

Q & A

Comment puis-je ajouter une collection de produits à une page Shopify ?

Pour ajouter une collection de produits à une page Shopify, vous devez d'abord créer ou éditer une page, puis ajouter le nom de la collection dans le contenu de la page, en utilisant un mot-clé spécifique comme 'COLLECTION' suivi du handle de la collection, comme 'men's'. Ensuite, vous devrez éditer le fichier 'page.liquid' de votre thème pour afficher dynamiquement les produits de cette collection.

Où puis-je trouver le handle de ma collection sur Shopify ?

Le handle d'une collection peut être trouvé dans l'onglet SEO de la collection. Il s'agit de la partie de l'URL qui représente la collection, comme 'mens' ou 'womens-dress'.

Quel est le rôle du code Liquid dans ce processus ?

Le code Liquid est utilisé pour manipuler et afficher dynamiquement les données sur la page. Il permet de récupérer le contenu de la page, de diviser ce contenu selon des mots-clés spécifiques (comme 'collection'), puis de récupérer et afficher les produits associés à ce mot-clé.

Qu'est-ce que la méthode 'split' dans Liquid ?

La méthode 'split' dans Liquid permet de diviser une chaîne de caractères en un tableau basé sur un délimiteur spécifique. Par exemple, dans ce cas, le contenu de la page est divisé sur le mot 'collection', permettant de séparer le texte avant et après ce mot.

Pourquoi devons-nous utiliser les méthodes 'strip_html' et 'strip_newlines' ?

Les méthodes 'strip_html' et 'strip_newlines' sont utilisées pour supprimer les balises HTML et les sauts de ligne du contenu de la page, assurant ainsi que seules les informations pertinentes, comme le handle de la collection, soient extraites et affichées correctement.

Que se passe-t-il si je ne supprime pas les balises HTML ?

Si vous ne supprimez pas les balises HTML, le contenu récupéré pourrait inclure des balises telles que des paragraphes (p), ce qui perturberait l'affichage des données et rendrait l'intégration de la collection incorrecte.

Comment afficher les produits d'une collection dans le code Liquid ?

Pour afficher les produits d'une collection dans le code Liquid, vous devez utiliser un objet de collection comme 'collections[page_collection]' et itérer à travers les produits avec une boucle 'for', en accédant aux attributs des produits comme le titre et l'image en utilisant des variables comme 'product.title' et 'product.featured_image'.

Comment ajouter un lien vers la page d'un produit dans le code Liquid ?

Pour ajouter un lien vers la page d'un produit, vous pouvez entourer le titre du produit avec une balise <a>, en utilisant l'URL du produit avec la variable 'product.url'. Cela rendra le titre du produit cliquable et redirigera vers la page du produit.

Puis-je ajouter d'autres informations sur les produits, comme le prix, dans l'affichage ?

Oui, vous pouvez ajouter des informations supplémentaires sur les produits, comme le prix, en utilisant les objets Liquid associés. Par exemple, vous pouvez utiliser 'product.price' pour afficher le prix du produit, ou 'product.available' pour vérifier si le produit est en stock.

Est-ce que cette méthode fonctionne avec toutes les pages de mon site Shopify ?

Oui, cette méthode fonctionne avec toutes les pages où vous souhaitez afficher une collection. En ajustant le handle de la collection dans le contenu de chaque page, vous pouvez afficher dynamiquement des produits différents sur des pages différentes de votre site Shopify.