Articles sur : Pour d√©buter ūüĒ•

Afficher les widgets de WideReview sur ta boutique

Wide Hello !

Cet article vous montrera comment ajouter les différents widgets WideReview lorsque vous utilisez un nouveau thème Shopify 2.0. Comment savoir si j'ai un thème 2.0 ?


Dans cet article :

Ajouter le carrousel principal
Ajouter les avis en grille
Ajouter les étoiles
Ajouter le mini carrousel sous le bouton ajouter au panier


Carrousel Principal





Pages produits


Dans le dashboard de votre boutique Shopify, cliquez sur Boutique en ligne > Thèmes > Personnaliser, pour ouvrir l'éditeur de votre thème



Allez sur la page produit



Ajoutez une section à gauche



Cliquez sur "Applications"



Choisissez "WideReview Carousel"



Placez la section o√Ļ vous le souhaitez



Cliquez sur Enregistrer

Page d'Accueil


Dans le dashboard de votre boutique Shopify, cliquez sur Boutique en ligne > Thèmes > Personnaliser, pour ouvrir l'éditeur de votre thème



Allez sur la page d'accueil



Ajoutez une section à gauche



Cliquez sur "Applications"



Choisissez "WideReview Carousel"



Placez la section o√Ļ vous le souhaitez



Cliquez sur la section et sélectionnez le produit dont vous voulez montrer les avis.

Vous pouvez ensuite cocher "Afficher les avis de tous les produits", mais le carrousel doit être lié à un produit spécifique d'abord.



Cliquez sur Enregistrer


Avis en Grille





Pages Produits


Dans le dashboard de votre boutique Shopify, cliquez sur Boutique en ligne > Thèmes > Personnaliser, pour ouvrir l'éditeur de votre thème



Allez sur la page produit



Ajoutez une section à gauche



Cliquez sur "Applications"



Choisissez "WideReview Grid"



Placez la section o√Ļ vous voulez que les avis sous forme de grille apparaissent



Cliquez sur Enregistrer

Page d'Accueil


Dans le dashboard de votre boutique Shopify, cliquez sur Boutique en ligne > Thèmes > Personnaliser, pour ouvrir l'éditeur de votre thème



Allez sur la page d'accueil



Ajoutez une section à gauche



Cliquez sur "Applications"



Choisissez "WideReview Grid"



Placez la section o√Ļ vous voulez que les avis sous forme de grille apparaissent



Cliquez sur la section et sélectionnez le produit dont vous voulez montrer les avis.

Vous pouvez ensuite cocher "Afficher les avis de tous les produits", mais le carrousel doit être lié à un produit spécifique d'abord.



Cliquez sur Enregistrer


Etoiles





Pages Produits


Dans le dashboard de votre boutique Shopify, cliquez sur Boutique en ligne > Thèmes > Personnaliser, pour ouvrir l'éditeur de votre thème



Allez sur la page produit



Cliquez sur Ajouter un bloc



Choisissez "WideReview Stars"



Placez le bloc o√Ļ vous voulez que les √©toiles apparaissent



Cliquez sur Enregistrer

Page d'Accueil


Dans le dashboard de votre boutique Shopify, cliquez sur Boutique en ligne > Thèmes > Personnaliser, pour ouvrir l'éditeur de votre thème



Allez sur la page d'accueil



Cliquez sur Ajouter un bloc



Choisissez "WideReview Stars"



Placez le bloc o√Ļ vous voulez que les √©toiles apparaissent



Cliquez sur le block et choisissez le produit pour lequel vous souhaitez afficher la note.

Vous pouvez ensuite cocher "Afficher la note pour tous les produits" mais la note doit être liée à un produit.



Cliquez sur Enregistrer*

Produit en Vedette sur la Page d'Accueil


Dans le dashboard de votre boutique Shopify, cliquez sur Boutique en ligne > Thèmes > Personnaliser, pour ouvrir l'éditeur de votre thème



Allez sur la page produit



Cliquez sur Ajouter un bloc



Choisissez "WideReview Stars"



Placez le bloc o√Ļ vous voulez que les √©toiles apparaissent



Cliquez sur la section et sélectionnez le produit dont vous voulez voir la note.

Vous pouvez ensuite cocher "Afficher la note de tous les produits", mais les étoiles doivent être liés à un produit spécifique d'abord.



Cliquez sur Enregistrer

Pages Collections


Pour les pages de collection, c'est un peu plus compliqué car nous ne pouvons pas y ajouter un bloc d'application. Nous devrons le faire avec du code.

Afin d'ajouter les étoiles aux collections, vous devez copier le code suivant :

<div data-widereview-rate="{{ product.metafields.widereview.rating }}"
           	data-widereview-amount="{{ product.metafields.widereview.amount }}"
          	class="widereview-rate"
          	data-widereview-rate>
</div>


Dans le dashboard de votre boutique Shopify, cliquez sur Boutique en ligne > Thèmes > "..." > Modifier le code, pour ouvrir le code de votre thème



Ouvrez le fichier que vous utilisez pour vos collections. Généralement dans le dossier Extraits

Les fichiers sont généralement appelés: product-card-grid.liquid, product-grid-item.liquid, product-info.liquid, card-product.liquid



Collez le code o√Ļ vous souhaitez que les √©toiles apparaissent.

Généralement vous devez le mettre sous le titre donc cherchez le titre du produit (vous pouvez chercher avec le mot "**title**". Ca devrait être un tag <h1>, <h2> ou encore <h3>



Cliquez sur Enregistrer



Si vous avez besoin d'aide vous pouvez contacter notre support par chat directement dans le dashboard de l'application WideReview


Mini Carrousel sous le Bouton Ajout au Panier





Pages Produits


Dans le dashboard de votre boutique Shopify, cliquez sur Boutique en ligne > Thèmes > Personnaliser, pour ouvrir l'éditeur de votre thème



Allez sur la page produit



Cliquez sur Ajouter un bloc



Choisissez "WideReview Mini"



Placez le bloc o√Ļ vous voulez que le mini carrousel apparaisse



Cliquez sur Enregistrer

Produit en Vedette sur la Page d'Accueil


Dans le dashboard de votre boutique Shopify, cliquez sur Boutique en ligne > Thèmes > Personnaliser, pour ouvrir l'éditeur de votre thème



Allez sur la page produit



Cliquez sur Ajouter un bloc



Choisissez "WideReview Mini"



Placez le bloc o√Ļ vous voulez que le mini carrousel apparaisse



Cliquez sur la section et sélectionnez le produit dont vous voulez voir les avis

Vous pouvez ensuite cocher "Afficher les avis de tous les produits", mais les étoiles doivent être liés à un produit spécifique d'abord.



Cliquez sur Enregistrer

Mis à jour le : 15/01/2024

Cet article a-t-il répondu à vos questions ?

Partagez vos commentaires

Annuler

Merci !