> ## 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 EcomSolid ?

Wide Hello ! 😁

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

Le processus est vraiment suuuper simple !

C'est parti 👇

## Pré-requis

* Cliquez sur **Pages** sur la gauche puis sur **Pages produit** ou bien **Pages d'accueil** (ou autre)

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_ai54da.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_1yh2x8h.png)

---

## Ajouter le grand carrousel principal

Voilà un aperçu :

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

* Cliquez sur **Add-Ons** puis sur **Add Add-on**

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

* Cherchez le mot "custom" puis cliquez sur **Custom Code**

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

* Déplacez l'élément où vous souhaitez faire apparaître le grand carrousel principal

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/jun-01-2022-23-45-39_1x0fbch.gif)

* Cliquez sur le module que vous venez d'ajouter puis affichez l'espace "Code HTML"

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1mzmr1r.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 et cliquez sur **Sauvegarder**

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1jhqdyp.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 et cliquez sur **Sauvegarder**

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

---

## Ajouter les étoiles sous le titre du produit

Voilà un aperçu :

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

* Cliquez sur **Add-Ons** puis sur **Add Add-on**

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

* Cherchez le mot "custom" puis cliquez sur **Custom Code**

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

* Déplacez l'élément où vous souhaitez faire apparaître les étoiles

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/jun-01-2022-23-45-39_1x0fbch.gif)

* Cliquez sur le module que vous venez d'ajouter puis affichez l'espace "Code HTML"

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1mzmr1r.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 et cliquez sur **Sauvegarder**

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1139u9n.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 et cliquez sur **Sauvegarder**

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

---

## Ajouter les avis sous forme de grille

Voilà un aperçu :

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

* Cliquez sur **Add-Ons** puis sur **Add Add-on**

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

* Cherchez le mot "custom" puis cliquez sur **Custom Code**

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

* Déplacez l'élément où vous souhaitez faire apparaître les avis sous forme de grille

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/jun-01-2022-23-45-39_1x0fbch.gif)

* Cliquez sur le module que vous venez d'ajouter puis affichez l'espace "Code HTML"

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1mzmr1r.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 et cliquez sur **Sauvegarder**

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1t0x4eu.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 et cliquez sur **Sauvegarder**

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1ffeldd.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)

* Cliquez sur **Add-Ons** puis sur **Add Add-on**

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

* Cherchez le mot "custom" puis cliquez sur **Custom Code**

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

* Déplacez l'élément où vous souhaitez faire apparaître le mini carrousel sous le bouton ajout au panier

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/jun-01-2022-23-45-39_1x0fbch.gif)

* Cliquez sur le module que vous venez d'ajouter puis affichez l'espace "Code HTML"

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1mzmr1r.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 et cliquez sur **Sauvegarder**

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_12wc2tn.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 et cliquez sur **Sauvegarder**

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

---

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