Articles sur : Page Builders ­čĹĘÔÇŹ­čöž

Comment ajouter WideReview sur GemPages ?

Wide Hello ! ­čśü

On va voir ensemble dans ce tutoriel comment ajouter WideReview sur vos pages GemPages.

Le processus est vraiment suuuper simple !

C'est parti ­čĹç

Pr├ę-requis



Cliquez sur Product Pages ou sur Home Pages sur la gauche dans la section "Pages" en fonction de l'endroit où vous souhaitez faire apparaître WideReview.



Ouvrez la page qui vous int├ęresse (page produit, page d'accueil ou une autre page)




Ajouter le grand carrousel principal



Voil├á un aper├žu :



Dans la barre de recherche à gauche cherchez "Liquid"



D├ęplacez le module "Liquid" o├╣ vous souhaitez faire appara├«tre le grand carrousel principal



Cliquez sur le module que vous venez d'ajouter puis cliquez sur l'icone repr├ęsentant un crayon



Ensuite vous allez copier le code pour afficher le carousel. Ce code d├ępendra de la page sur laquelle vous ├¬tes en train de l'ajouter :

Sur une page produit :


Copiez le code suivant <div id="widereview-module"></div>

Collez le dans l'├ęditeur de code (en retirant le texte qui s'y trouve de base) et cliquez sur Sauvegarder



Sur une page d'accueil ou toute autre page (sauf page produit) :


Copiez le code suivant <div id="widereview-module" product-id="ID_DE_VOTRE_PRODUIT" form-product-id="ID_DE_VOTRE_PRODUIT"></div>.

Remplacez ensuite les deux "ID_DE_VOTRE_PRODUIT" par l'ID du produit auquel est rattach├ę le carrousel en gardant les guillemets (Comment trouver l'ID de mon produit?).
Si vous souhaitez afficher tous les avis de votre boutique remplacez uniquement le premier "ID_DE_VOTRE_PRODUIT" par le mot "[all]"

Collez le dans l'├ęditeur de code (en retirant le texte qui s'y trouve de base) et cliquez sur Sauvegarder




Ajouter les ├ętoiles sous le titre du produit



Voil├á un aper├žu :



Dans la barre de recherche à gauche cherchez "Liquid"



D├ęplacez le module "Liquid" o├╣ vous souhaitez faire appara├«tre les ├ętoiles



Cliquez sur le module que vous venez d'ajouter puis cliquez sur l'icone repr├ęsentant un crayon



Ensuite vous allez copier le code pour afficher les ├ętoiles. Ce code d├ępendra de la page sur laquelle vous ├¬tes en train de l'ajouter :

Sur une page produit :


Copiez le code suivant <div class="widereview-rate"></div>

Collez le dans l'├ęditeur de code (en retirant le texte qui s'y trouve de base) et cliquez sur Sauvegarder



Sur une page d'accueil ou toute autre page (sauf page produit) :


Copiez le code suivant <div class="widereview-rate" product-id="ID_DE_VOTRE_PRODUIT"></div>

Remplacez ensuite "ID_DE_VOTRE_PRODUIT" par l'ID du produit dont vous souhaitez afficher les ├ętoiles en gardant les guillemets (Comment trouver l'ID de mon produit?).

Collez le dans l'├ęditeur de code (en retirant le texte qui s'y trouve de base) et cliquez sur Sauvegarder




Ajouter les avis sous forme de grille



Voil├á un aper├žu :



Dans la barre de recherche à gauche cherchez "Liquid"



D├ęplacez le module "Liquid" o├╣ vous souhaitez faire appara├«tre les avis sous forme de grille



Cliquez sur le module que vous venez d'ajouter puis cliquez sur l'icone repr├ęsentant un crayon



Ensuite vous allez copier le code pour afficher les avis sous forme de grille. Ce code d├ępendra de la page sur laquelle vous ├¬tes en train de l'ajouter :

Sur une page produit :


Copiez le code suivant <div id="widereview-grid"></div>

Collez le dans l'├ęditeur de code (en retirant le texte qui s'y trouve de base) et cliquez sur Sauvegarder



Sur une page d'accueil ou toute autre page (sauf page produit) :


Copiez le code suivant <div id="widereview-grid" product-id="ID_DE_VOTRE_PRODUIT" form-product-id="ID_DE_VOTRE_PRODUIT"></div>.

Remplacez ensuite les deux "ID_DE_VOTRE_PRODUIT" par l'ID du produit auquel est rattach├ę le carrousel en gardant les guillemets (Comment trouver l'ID de mon produit?).
Si vous souhaitez afficher tous les avis de votre boutique remplacez uniquement le premier "ID_DE_VOTRE_PRODUIT" par le mot "[all]"

Collez le dans l'├ęditeur de code (en retirant le texte qui s'y trouve de base) et cliquez sur Sauvegarder




Ajouter le mini carrousel sous le bouton ajout au panier



Voil├á un aper├žu :



Dans la barre de recherche à gauche cherchez "Liquid"



D├ęplacez le module "Liquid" o├╣ vous souhaitez faire appara├«tre le mini carrousel (de pr├ęf├ęrence sous votre bouton ajout au panier)



Cliquez sur le module que vous venez d'ajouter puis cliquez sur l'icone repr├ęsentant un crayon



Ensuite vous allez copier le code pour afficher le mini carousel. Ce code d├ępendra de la page sur laquelle vous ├¬tes en train de l'ajouter :

Sur une page produit :


Copiez le code suivant <div class="widereview-mini"></div>

Collez le dans l'├ęditeur de code (en retirant le texte qui s'y trouve de base) et cliquez sur Sauvegarder



Sur une page d'accueil ou toute autre page (sauf page produit) :


Copiez le code suivant <div class="widereview-mini" product-id="ID_DE_VOTRE_PRODUIT"></div>.

Remplacez ensuite "ID_DE_VOTRE_PRODUIT" par l'ID du produit auquel est rattach├ę le carrousel en gardant les guillemets (Comment trouver l'ID de mon produit?).

Collez le dans l'├ęditeur de code (en retirant le texte qui s'y trouve de base) et cliquez sur Sauvegarder




Voil├á ! On a vu ensemble comment ajouter tous les ├ęl├ęments disponibles sur WideReview !

Mis à jour le : 01/09/2022

Cet article a-t-il r├ępondu ├á vos questions ?

Partagez vos commentaires

Annuler

Merci !