Ajout d’une fenêtre pop-up à vos pages de produits avec des champs méta
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 à l’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 page de référence à un bloc de fenêtre pop-up qui affiche un lien sur vos pages de produits. Lorsque vous cliquez sur le lien, celui-ci 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 pop-up que vous pouvez ajouter à vos pages de produits :
- Tableaux des tailles
- Consignes d’entretien
- Instructions d’assemblage
- Caractéristiques techniques des produits
- Questions fréquemment posées
Il s’agit d’un tutoriel en 4 étapes, qui introduit des champs méta de référence de page, crée un champ méta de produit pour une page de référence, crée un modèle de page de produit pour votre boutique en ligne, ajoute une nouvelle page, référence la page dans des produits spécifiques et applique le modèle de page de produit à des produits spécifiques.
Si vous avez un thème Online Store 2.0, vous pouvez connecter la plupart des champs méta à votre thème en utilisant l’éditeur de thème. Si vous utilisez un thème vintage ou si vous souhaitez ajouter des types de champs méta non pris en charge par votre thème, vous pouvez modifier le code de votre thème ou engager un(e) Partenaire Shopify.
Sur cette page
Étape 1 : créer un champ méta de produit pour une page
Pour commencer, vous devez créer une définition du champ méta de référence de page pour vos pages de produits. Le champ méta de produit est lié à une page spécifique et peut être personnalisé pour chaque produit. Si vous n’ajoutez pas de référence de page à un produit utilisant le même modèle, le texte de votre lien pop-up s’affiche toujours comme s’il y avait du contenu. Afin d’afficher uniquement le lien pop-up sur des produits spécifiques, vous pouvez créer un modèle de produit et l’appliquer uniquement 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 tableaux de tailles différentes pour deux tranches d'âge différentes, par exemple un tableau de tailles pour les tout-petits et un tableau de tailles pour les bébés, puis ajouter la référence à la page des tailles pour les tout-petits uniquement aux produits qui leur sont destinés.
Vous devez créer une définition du champ méta pour une référence de page afin de la connecter au bloc pop-up de votre éditeur de thème. L’accès à la boutique en ligne est sélectionné par défaut lorsque vous créez la définition de votre champ méta.
Étapes :
- Dans votre interface administrateur Shopify, accédez à Paramètres > Données personnalisées.
- Dans la section Définitions du champ méta, cliquez sur Produits.
- Cliquez sur Ajouter une définition.
- Dans le champ Nom, donnez un nom à la définition du champ méta. Par exemple, si vous créez un tableau des tailles, vous voudrez peut-être nommer la définition Tableau des tailles.
- Cliquez sur ⊕ Sélectionner le type.
- Sélectionnez Page dans le menu déroulant. Une page est sélectionnée par défaut.
- Cliquez sur Enregistrer.
- Depuis l’application Shopify, appuyez sur … > Paramètres.
- Appuyez sur Données personnalisées.
- Dans la section Définitions du champ méta, appuyez sur Produits.
- Appuyez sur +.
- Nommez la définition. Par exemple, si vous créez un tableau des tailles, vous voudrez peut-être nommer la définition Tableau des tailles.
- Appuyez sur + Type de sélection.
- Appuyez pour sélectionner Page dans le menu déroulant. Une page est sélectionnée par défaut.
- Appuyez sur Enregistrer.
- Depuis l’application Shopify, appuyez sur ☰ > Paramètres.
- Appuyez sur Données personnalisées.
- Dans la section Définitions du champ méta, appuyez sur Produits.
- Appuyez sur +.
- Nommez la définition. Par exemple, si vous créez un tableau des tailles, vous voudrez peut-être nommer la définition Tableau des tailles.
- Appuyez sur + Type de sélection.
- Appuyez pour sélectionner Page dans le menu déroulant. Une page est sélectionnée par défaut.
- Appuyez sur ✓ pour enregistrer.
Étape 2 : créer votre modèle de page de produit
Si vous avez un thème Online Store 2.0, vous pouvez connecter la référence de page à votre thème en utilisant l’éditeur de thème. Si vous utilisez un thème vintage ou si vous souhaitez ajouter des types de champs méta non pris en charge par votre thème, vous pouvez modifier le code de votre thème ou engager un(e) 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 :
Si vous ne souhaitez pas ajouter le bloc pop-up à tous vos produits, vous devez créer un nouveau modèle de page de produit. Dans les étapes, vous créez un nouveau modèle de page de produit, mais vous pouvez également choisir un modèle de page de produit existant à personnaliser à la place.
Étapes :
- Dans l’interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Cliquez sur Personnaliser à côté du thème que vous souhaitez personnaliser.
- 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.
- Dans la barre de navigation latérale intitulée « Sections », accédez aux blocs Modèle > Informations produit, puis cliquez sur ⊕ Ajouter un bloc.
- Cliquez sur Pop-up.
- Saisissez une Étiquette de lien. Il s’agit du texte qui affiche les clics d’un client pour le contenu de la page pop-up. Par exemple, si la page pop-up est un tableau des tailles, vous voudrez peut-être que l’Étiquette de lien soit le Tableau des tailles.
- À 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 la page que vous avez créé.
- Cliquez sur Enregistrer.
- Depuis l’application Shopify, appuyez sur … > Boutique en ligne.
- Appuyez sur Gérer tous les thèmes.
- Appuyez sur Personnaliser à côté du thème que vous souhaitez personnaliser.
- Dans le menu déroulant de la Page d’accueil en haut de l’éditeur, appuyez sur Produits, puis appuyez sur ⊕ Créer un modèle pour créer et personnaliser un nouveau modèle.
- Dans la barre de navigation latérale intitulée « Sections », accédez aux blocs Modèle > Informations produit, puis appuyez sur ⊕ Ajouter un bloc.
- Appuyez sur Pop-up.
- Saisissez une Étiquette de lien. Il s’agit du texte qui affiche les clics d’un client pour le contenu de la page pop-up. Par exemple, si la page pop-up est un tableau des tailles, vous voudrez peut-être que l’Étiquette de lien soit le Tableau des tailles.
- À côté de Page, appuyez sur l’icône de source dynamique, puis appuyez pour sélectionner le champ méta de référence de page que vous avez créé.
- Appuyez sur Enregistrer.
- Depuis l’application Shopify, appuyez sur ☰ > Boutique en ligne.
- Appuyez sur Gérer tous les thèmes.
- Appuyez sur Personnaliser à côté du thème que vous souhaitez personnaliser.
- Dans le menu déroulant de la Page d’accueil en haut de l’éditeur, appuyez sur Produits, puis appuyez sur ⊕ Créer un modèle pour créer et personnaliser un nouveau modèle.
- Dans la barre de navigation latérale intitulée « Sections », accédez aux blocs Modèle > Informations produit, puis appuyez sur ⊕ Ajouter un bloc.
- Appuyez sur Pop-up.
- Saisissez une Étiquette de lien. Il s’agit du texte qui affiche les clics d’un client pour le contenu de la page pop-up. Par exemple, si la page pop-up est un tableau des tailles, vous voudrez peut-être que l’Étiquette de lien soit le Tableau des tailles.
- À côté de Page, appuyez sur l’icône de source dynamique, puis appuyez pour sélectionner le champ méta de référence de page que vous avez créé.
- Appuyez sur ✓ pour enregistrer votre thème.
Étape 3 : ajouter une page avec les informations de vos produits
Vous devez créer une page avec le contenu auquel le champ méta fait référence. Si vous avez déjà créé une page, vous pouvez passer à l’étape 4.
Étapes :
- Dans votre interface administrateur Shopify, allez à Boutique en ligne > Pages.
- Cliquez sur Ajouter une page.
- Nommez votre page et créez le contenu que vous souhaitez afficher dans une fenêtre pop-up de votre page de produit.
- Dans la section Visibilité, définissez la page sur Visible.
- Cliquez sur Enregistrer.
- Depuis l’application Shopify, appuyez sur … > Boutique en ligne.
- Appuyez sur Pages.
- Appuyez sur Ajouter une page.
- Nommez votre page et créez le contenu que vous souhaitez afficher dans une fenêtre pop-up de votre page de produit.
- Dans la section Visibilité, définissez la page sur Visible.
- Appuyez sur Enregistrer.
- Depuis l’application Shopify, appuyez sur ☰ > Boutique en ligne.
- Appuyez sur Pages.
- Appuyez sur Ajouter une page.
- Nommez votre page et créez le contenu que vous souhaitez afficher dans une fenêtre pop-up de votre page de produit.
- Dans la section Visibilité, définissez la page sur Visible.
- Appuyez sur ✓ pour enregistrer.
Vous pouvez créer autant de pages à référencer dans le champ méta que nécessaire. Toutefois, vous ne pouvez lier qu’une seule page dans le champ méta du produit.
Étape 4 : référez-vous à la page et appliquez le modèle de produit à des produits spécifiques
Lorsque vous ajoutez une page de référence à un produit spécifique, les informations de cette page s’affichent uniquement avec ce produit. Si vous laissez la référence de la page vide pour un produit utilisant ce modèle de produit, le texte du lien s’affiche toujours en tant que lien. Toutefois, la fenêtre pop-up est vide, sans référence de page, ce qui peut créer une certaine confusion chez vos clients. Dans ce cas, vous pouvez utiliser un modèle de page de produit différent pour des types de produits spécifiques. Par exemple, vous pouvez créer un modèle de produit pour les vêtements avec la page du tableau des tailles de votre bloc pop-up, puis vous pouvez créer un modèle de produit pour les sacs où vous n’avez pas besoin d’ajouter le bloc de fenêtre pop-up.
En savoir plus sur les modèles.
Étapes :
- Depuis votre interface administrateur Shopify, allez à Produits.
- Cliquez sur le produit auquel vous souhaitez ajouter une référence de page.
- Dans la section Champs méta de produit, cliquez sur le champ méta de référence de page que vous avez créé, puis sur Sélectionner les pages.
- Sélectionnez la page que vous avez créée dans le menu déroulant.
- Dans la section Modèles de thèmes, sélectionnez le modèle de page de produit que vous avez créé à l’étape 2.
- Cliquez sur Enregistrer.
- Dans l'application Shopify, accédez à Produits > Tous les produits.
- Appuyez sur le produit auquel vous souhaitez ajouter une référence de page.
- Dans la section Champs méta, appuyez sur Tout afficher.
- Appuyez sur le champ méta de référence de la page que vous avez créé, puis appuyez pour sélectionner la page que vous avez créée.
- Dans la section Modèles de thèmes, sélectionnez le modèle de page de produit que vous avez créé à l’étape 2.
- Appuyez sur Enregistrer.
- Dans l'application Shopify, accédez à Produits > Tous les produits.
- Appuyez sur le produit auquel vous souhaitez ajouter une référence de page.
- Dans la section Champs méta, appuyez sur Tout afficher.
- Appuyez sur le champ méta de référence de la page que vous avez créé, puis appuyez pour sélectionner la page que vous avez créée.
- Dans la section Modèles de thèmes, sélectionnez le modèle de page de produit que vous avez créé à l’étape 2.
- Appuyez sur ✓ pour enregistrer.
Vous pouvez répéter ces étapes pour autant de produits que nécessaire.