Personnalisations avancées de l’affichage des produits et des collections pour le plug-in Shopify

Ces paramètres avancés vous aident à personnaliser votre boutique en ligne sur WordPress, à personnaliser la marque de votre entreprise et à améliorer l’expérience d’achat de vos clients.

Plug-in Shopify et composants de la boutique en ligne Shopify

Le plug-in Shopify est conçu avec les Shopify Storefront Web Components. Les composants suivants sont utilisés comme éléments de base de votre boutique en ligne Shopify :

• Composant de carte de produit : ce composant affiche des informations sur un produit individuel, généralement affichées sur les fiches de produits ou les pages de collection. Il inclut souvent des éléments tels que l’image du produit, le titre, le prix et un bouton Ajouter au panier.
• Composant de la fenêtre modale d’aperçu rapide du produit : ce composant affiche une fenêtre modale par-dessus le contenu existant avec les détails du produit, un bouton Ajouter au panier et un lien permettant de voir tous les détails du produit.
• Composant de la page de détails du produit : ce composant affiche un seul produit, avec tous les détails du produit. Chaque composant de la page de détails du produit possède une URL unique.
• Composant de collection : ce composant affiche les collections de produits que vous avez créées.

Personnalisation de l’affichage des produits et des collections Shopify

Les composants de la boutique en ligne Shopify par défaut sur votre plug-in disposent d’outils pour vous aider à créer une expérience d’achat fluide. Vous avez également la possibilité de personnaliser l’affichage de ces composants pour l’harmoniser avec votre identité de marque et vos exigences de design spécifiques.

Pour effectuer de telles personnalisations, vous devez avoir accès à la modification des fichiers et des répertoires de votre thème WordPress. Le processus consiste à créer un dossier dédié dans le répertoire de votre thème WordPress actif.

Étapes :

1. Créer le dossier Shopify : commencez par créer un nouveau dossier nommé Shopify directement dans le répertoire de votre thème actif. Ce dossier sert d’emplacement central pour vos remplacements de composants personnalisés.
2. Remplacer des composants individuels: pour modifier un composant spécifique, ajoutez un fichier PHP portant un nom désigné à l’intérieur du dossier Shopify . La convention de dénomination de ces fichiers de remplacement est essentielle pour que le plug-in reconnaisse et applique vos versions personnalisées :
   • Pour remplacer le composant de carte de produit, créez un fichier PHP nommé product-card.php dans le dossier Shopify.
   • Pour remplacer le composant de la fenêtre modale d’aperçu rapide du produit, créez un fichier PHP nommé modal.php dans le dossier Shopify.
   • Pour remplacer le composant de la page des détails du produit, créez un fichier PHP nommé pdp.php dans le dossier Shopify.
   • Pour remplacer le composant de collection, créez un fichier PHP nommé component.php dans le dossier Shopify.

Une fois votre fichier PHP personnalisé créé, le plug-in ignore son fichier de composant par défaut pour cet élément spécifique. Vous pouvez implémenter n’importe quel code dans ces fichiers de remplacement, qu’il s’agisse de blocs HTML statiques ou d’une logique PHP complexe.

Bien qu’il soit fortement recommandé d’utiliser les composants web de la boutique en ligne Shopify (tels qu’utilisés dans la structure par défaut du plug-in) pour garantir la cohérence et l’accès aux fonctionnalités Shopify intégrées, vous n’êtes pas limité à ces derniers. Vous pouvez intégrer d’autres méthodes pour récupérer et afficher les données des produits et des collections, ce qui permet des personnalisations avancées.

Pour plus d’informations et pour connaître les bonnes pratiques, consultez la documentation pour les développeurs de plug-ins WordPress.

Réécritures des produits et collections Shopify

Lorsque vous publiez un produit ou une collection sur Shopify, chaque produit et chaque collection possède une URL unique. Par défaut, ces URL sont créées avec votre domaine Shopify. Avec la fonction de réécriture, vous pouvez accéder à ces URL uniques avec votre domaine public WordPress.

Étapes :

1. Depuis le plug-in Shopify, allez dans Paramètres.
2. Dans l’onglet Avancé, assurez-vous que les deux cases à cocher de la section Réécritures des liens Shopify sont activées.
3. Allez dans Permaliens.
4. Cliquez sur Enregistrer pour appliquer cette nouvelle règle.
5. Allez dans votre interface administrateur Shopify, puis accédez à la page des détails du produit ou de la collection pour laquelle vous souhaitez créer un lien WordPress.
6. Dans la fiche d’aperçu du référencement, une URL s’affiche, qui dirige les clients directement vers votre produit ou votre collection. Par exemple : https://johns-apparel.myshopify.com › products › huskee-reusable-cup.
7. Ajoutez products/huskee-reusable-cup à la fin de l’URL de votre site WordPress. Par exemple : https://johns-apparel-wordpress.com/products/huskee-reusable-cup.

Personnalisation du comportement de la fiche produit

Avec les composants de la boutique en ligne Shopify, il existe deux types de fiches de détails de produit :

1. Aperçu rapide : lorsque le client passe le curseur sur la fiche produit, il a la possibilité d’Acheter rapidement. Lorsqu’il clique sur cette option, les détails du produit s’affichent dans une fenêtre pop-up ou modale par-dessus le contenu existant en arrière-plan.
2. Page de produit détaillée : lorsqu’un client clique sur la fiche produit, par exemple sur l’image ou le nom du produit, les détails du produit s’affichent en mode pleine page avec une URL unique.

Vous pouvez modifier ce paramètre pour afficher uniquement un aperçu rapide, uniquement une page de produit détaillée, ou les deux.

Étapes :

1. Depuis le plug-in Shopify dans WordPress, allez dans Paramètres.
2. À partir de l’onglet Avancé, allez à la section Affichage du produit.
3. Choisissez l’option qui convient le mieux à votre boutique.
4. Cliquez sur Enregistrer.