Ajout d’un guide des tailles pop-up à vos pages de produit

Les champs méta vous aident à personnaliser la fonctionnalité et l’apparence de votre boutique Shopify en vous permettant d’enregistrer des informations spécialisées qui ne sont généralement pas saisies dans l’interface administrateur Shopify. Les champs méta peuvent être utilisés en interne dans votre interface administrateur Shopify, et vous pouvez également choisir de les afficher dans votre boutique en ligne.

Avec les champs méta, vous pouvez ajouter une référence de page à un bloc de pop-up qui affiche un lien sur vos pages de produit. Au clic, le lien ouvre une fenêtre pop-up qui affiche le contenu de votre page. Vous pouvez ajouter des images et d’autres supports multimédias à l’aide de l’éditeur de texte enrichi pour vos pages.

Voici quelques exemples d’informations que vous pourriez ajouter à vos pages de produit sous forme de fenêtre pop-up :

  • Guides des tailles
  • Instructions d’entretien
  • Instructions de montage
  • Spécifications du produit
  • Foires aux questions

Ce tutoriel en 4 étapes présente les champs méta de référence de page, la création d’un champ méta de produit pour une référence de page, la création d’un modèle de page de produit pour votre boutique en ligne, l’ajout d’une nouvelle page, le référencement de la page dans des produits spécifiques et l’application du modèle de page de produit à des produits spécifiques. Vous pouvez utiliser ce tutoriel pour créer le contenu de votre choix dans la fenêtre pop-up. Ce tutoriel utilise l’exemple du guide des tailles.

Ce tutoriel nécessite un thème qui prend en charge les sources dynamiques. Si vous utilisez un thème vintage ou si vous souhaitez ajouter des types de champs méta que votre thème ne prend pas en charge, vous pouvez modifier le code de votre thème ou recruter un Partenaire Shopify.

Étape 1 : créer un champ méta de produit pour une page

Pour commencer, vous devez créer une définition de champ méta de référence de page pour vos pages de produit. Le champ méta de produit renvoie à une page spécifique et peut être personnalisé pour chaque produit. Si vous n’ajoutez pas de référence de page à un produit qui utilise le même modèle, le texte du lien de votre pop-up s’affichera toujours comme s’il y avait du contenu. Pour n’afficher le lien de la fenêtre pop-up que sur des produits spécifiques, vous pouvez créer un modèle de produit et ne l’appliquer qu’aux produits pertinents.

Avec les champs méta de référence de page, vous pouvez afficher différentes informations sur les produits en créant différentes pages pour différents types de produits. Par exemple, vous pouvez créer deux pages de guides des tailles différentes pour deux tranches d’âge distinctes, comme un guide des tailles pour tout-petits et un guide des tailles pour bébés, puis ajouter la référence de page pour les tailles pour tout-petits uniquement aux produits destinés aux tout-petits.

Vous devez créer une définition de champ méta pour une référence de page afin de la connecter au bloc de pop-up dans votre éditeur de thème. L’option Accès à la boutique en ligne est sélectionnée par défaut lorsque vous créez votre définition de champ méta.

Étapes :

Bureau
  1. Depuis votre interface administrateur Shopify, accédez à Paramètres > Champs méta et métaobjets.

  2. Dans la section Définitions de champ méta, cliquez sur Produits.

  3. Cliquez sur Ajouter une définition.

  4. Dans le champ Nom, saisissez Guide des tailles.

  5. Cliquez sur ⊕ Sélectionner le type.

  6. Sélectionnez Page dans le menu déroulant. L’option Une seule page est sélectionnée par défaut.

  7. Cliquez sur Enregistrer.

Mobile
  1. Depuis Shopify app, appuyez sur Menu, puis sur Paramètres Paramètres.

  2. Dans la section Paramètres de la boutique, appuyez sur Champs méta et objets méta.

  3. Dans la section Définitions de champ méta, appuyez sur Produits.

  4. Appuyez sur +.

  5. Dans le champ Nom, saisissez Guide des tailles.

  6. Appuyez sur + Sélectionner le type.

  7. Appuyez pour sélectionner Page dans le menu déroulant. L’option Une seule page est sélectionnée par défaut.

  8. Appuyez sur Enregistrer ou .

Étape 2 : créer votre modèle de page de produit

Ce tutoriel nécessite un thème qui prend en charge les sources dynamiques. Si vous utilisez un thème vintage ou si vous souhaitez ajouter des types de champs méta que votre thème ne prend pas en charge, vous pouvez modifier le code de votre thème ou recruter un Partenaire Shopify.

Après avoir ajouté une section ou un bloc, vous pouvez sélectionner un champ méta en cliquant sur l’icône de source dynamique :

Icône de source dynamique

Si vous ne souhaitez pas ajouter le lien de la pop-up du guide des tailles à tous vos produits, vous devez créer un nouveau modèle de page de produit. Dans les étapes suivantes, vous créez un nouveau modèle de page de produit, mais vous pouvez également choisir de personnaliser un modèle de page de produit existant.

Étapes :

Bureau
  1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
  2. Cliquez sur Personnaliser à côté du thème que vous souhaitez personnaliser.
  3. Dans le menu déroulant Page d’accueil en haut de l’éditeur, cliquez sur Produits, puis sur ⊕ Créer un modèle pour créer et personnaliser un nouveau modèle.
  4. Dans la barre latérale des sections, accédez aux blocs Modèle > Informations sur le produit, puis cliquez sur ⊕ Ajouter un bloc.
  5. Cliquez sur Pop-up.
  6. Dans le champ Intitulé du lien, saisissez Guide des tailles. Il s’agit du texte sur lequel un client clique pour afficher le contenu de la page pop-up.
  7. À côté de Page, cliquez sur l’icône de source dynamique, puis cliquez pour sélectionner le champ méta de référence de page que vous avez créé.
  8. Cliquez sur Enregistrer.
Mobile
  1. Depuis Shopify app, appuyez sur l’icône Menu.

  2. Dans la section Canaux de vente, appuyez sur Boutique en ligne > Gérer tous les thèmes.

  3. Pour le thème que vous souhaitez personnaliser, appuyez sur Personnaliser.

  4. Dans le menu déroulant Page d’accueil en haut de l’éditeur, appuyez sur Produits, puis sur ⊕ Créer un modèle pour créer et personnaliser un nouveau modèle.

  5. Dans la barre latérale des sections, accédez aux blocs Modèle > Informations sur le produit, puis appuyez sur ⊕ Ajouter un bloc.

  6. Appuyez sur Pop-up.

  7. Dans le champ Intitulé du lien, saisissez Guide des tailles. Il s’agit du texte sur lequel un client clique pour afficher le contenu de la page pop-up.

  8. À côté de Page, appuyez sur l’icône de source dynamique, puis sur pour sélectionner le champ méta de référence de page que vous avez créé.

  9. Appuyez sur Enregistrer ou .

Étape 3 : Ajouter une page avec votre guide des tailles

Vous devez créer une page contenant le contenu du guide des tailles auquel le champ méta fait référence. Si vous avez déjà créé une page, vous pouvez passer à l’étape 4.

Étapes :

Bureau
  1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Pages.
  2. Cliquez sur Ajouter une page.
  3. Dans le champ Titre, saisissez Guide des tailles, puis ajoutez les informations du guide des tailles dans la section Contenu.
  4. Dans la section Visibilité, définissez la page comme Visible.
  5. Cliquez sur Enregistrer.
Mobile
  1. Depuis Shopify app, appuyez sur l’icône Menu.

  2. Dans la section Canaux de vente, appuyez sur Boutique en ligne > Pages.

  3. Appuyez sur Ajouter une page.

  4. Dans le champ Titre, saisissez Guide des tailles, puis ajoutez les informations du guide des tailles dans la section Contenu.

  5. Dans la section Visibilité, définissez la page comme Visible.

  6. Appuyez sur Enregistrer ou .

Vous pouvez créer autant de pages de guide des tailles que nécessaire pour y faire référence dans le champ méta. Cependant, vous ne pouvez associer qu’une seule page dans le champ méta de produit.

Étape 4 : Référencer la page et appliquer le modèle de produit à des produits spécifiques

Lorsque vous ajoutez une référence de page à un produit spécifique, les informations de cette page s’affichent uniquement avec ce produit. Si vous laissez la référence de page vide pour un produit qui utilise ce modèle de produit, le texte du lien s’affiche toujours en tant que lien. Cependant, la pop-up est vide, sans référence de page, ce qui pourrait prêter à confusion pour vos clients. Vous pouvez utiliser un modèle de page de produit différent pour des types de produits spécifiques qui ont des guides des tailles, comme les vêtements ou les chaussures, et un modèle de produit pour d’autres types de produits, comme les jouets pour enfants ou les bijoux et autres accessoires.

En savoir plus sur les modèles.

Étapes :

Bureau
  1. Depuis votre interface administrateur Shopify, accédez à Produits.
  2. Cliquez sur le produit auquel vous souhaitez ajouter une référence de page.
  3. Dans la section Champs méta de produit, cliquez sur la référence de page Guide des tailles, puis sur Sélectionner des pages et sélectionnez la page Guide des tailles.
  4. Dans la section Modèle de thème, sélectionnez le modèle de page de produit Guide des tailles que vous avez créé à l’étape 2.
  5. Cliquez sur Enregistrer.
Mobile
  1. Depuis l’application Shopify, appuyez sur l’icône Produits .
  2. Appuyez sur le produit auquel vous souhaitez ajouter une référence de page.
  3. Dans la section Champs méta de produit, appuyez sur la référence de page Guide des tailles, puis sur Sélectionner des pages et sélectionnez la page Guide des tailles.
  4. Dans la section Modèle de thème, sélectionnez le modèle de page de produit Guide des tailles que vous avez créé à l’étape 2.
  5. Appuyez sur Enregistrer ou .

Vous pouvez répéter ces étapes pour autant de produits que nécessaire.