> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.widereviewapp.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_23uw86.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_13wie5h.png)

---

## Ajouter le grand carrousel principal

Voilà un aperçu :

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_qkmy32.png)

* Dans la barre de recherche à gauche cherchez "Liquid"

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1nui342.png)

* Déplacez le module "Liquid" où vous souhaitez faire apparaître le grand carrousel principal

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/jun-02-2022-00-08-39_bclzvf.gif)

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

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_18g6bwd.png)

* 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**

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1dh0wo3.png)

###### 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?](https://help.widereviewapp.com/fr/article/trouver-le-handle-ou-id-de-mon-produit-1ouutgb/)).
|| 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**

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1bkah58.png)

---

## Ajouter les étoiles sous le titre du produit

Voilà un aperçu :

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_16vxbrm.png)

* Dans la barre de recherche à gauche cherchez "Liquid"

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1nui342.png)

* Déplacez le module "Liquid" où vous souhaitez faire apparaître les étoiles

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/jun-02-2022-00-08-39_bclzvf.gif)

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

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_18g6bwd.png)

* 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**

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1i9dqx1.png)

###### 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?](https://help.widereviewapp.com/fr/article/trouver-le-handle-ou-id-de-mon-produit-1ouutgb/)).

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

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1h912ag.png)

---

## Ajouter les avis sous forme de grille

Voilà un aperçu :

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1wquztq.png)

* Dans la barre de recherche à gauche cherchez "Liquid"

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1nui342.png)

* Déplacez le module "Liquid" où vous souhaitez faire apparaître les avis sous forme de grille

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/jun-02-2022-00-08-39_bclzvf.gif)

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

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_18g6bwd.png)

* 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**

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_cprglr.png)

###### 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?](https://help.widereviewapp.com/fr/article/trouver-le-handle-ou-id-de-mon-produit-1ouutgb/)).
|| 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**

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_g8c5sb.png)

--- 

## Ajouter le mini carrousel sous le bouton ajout au panier

Voilà un aperçu :

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_xsqm6k.png)

* Dans la barre de recherche à gauche cherchez "Liquid"

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1nui342.png)

* Déplacez le module "Liquid" où vous souhaitez faire apparaître le mini carrousel (de préférence sous votre bouton ajout au panier)

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/jun-02-2022-00-08-39_bclzvf.gif)

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

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_18g6bwd.png)

* 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**

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1lll2ll.png)

###### 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?](https://help.widereviewapp.com/fr/article/trouver-le-handle-ou-id-de-mon-produit-1ouutgb/)).

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

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1n21l07.png)

---

Voilà ! On a vu ensemble comment ajouter tous les éléments disponibles sur WideReview !