> ## 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 PageFly ? Wide Hello ! 😁 On va voir ensemble dans ce tutoriel comment ajouter WideReview sur vos pages PageFly. 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_hufzuj.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_8q60pm.png) --- ## Ajouter le grand carousel principal Voilà un aperçu : ![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_qkmy32.png) * Cliquez sur le petit **+** pour ajouter un élément ![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_meleqz.png) * Sélectionnez **HTML/Liquid** et déplacez le bloc "HTML5/Liquid" où vous souhaitez faire apparaître le grand carousel principal sur votre page ![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/may-25-2022-15-10-25_ljvboo.gif) * Cliquez sur le module que vous venez d'ajouter puis cliquez sur **Ouvrir l'éditeur de code** ![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1orrnwg.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 `
` * Collez le dans l'éditeur de code et cliquez sur **Sauvegarder** ![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_mjn1yl.png) ###### Sur une page d'accueil ou toute autre page (sauf page produit) : ** Copiez le code suivant `
`. || 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_o9840.png) --- ## Ajouter les étoiles sous le titre du produit Voilà un aperçu : ![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_u07on7.png) * Cliquez sur le petit **+** pour ajouter un élément ![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_meleqz.png) * Sélectionnez **HTML/Liquid** et déplacez le bloc "HTML5/Liquid" où vous souhaitez faire apparaître les étoiles sous votre titre ![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/may-25-2022-15-25-05_4am61o.gif) * Cliquez sur le module que vous venez d'ajouter puis cliquez sur **Ouvrir l'éditeur de code** ![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_l0d6q1.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 `
` * Collez le dans l'éditeur de code et cliquez sur **Sauvegarder** ![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1vc8taf.png) ###### Sur une page d'accueil ou toute autre page (sauf page produit) : * Copiez le code suivant `
` || 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_1xnjsua.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 le petit **+** pour ajouter un élément ![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_meleqz.png) * Sélectionnez **HTML/Liquid** et déplacez le bloc "HTML5/Liquid" où vous souhaitez faire apparaître les avis sous forme de grille sur votre page ![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/may-25-2022-15-10-25_ljvboo.gif) * Cliquez sur le module que vous venez d'ajouter puis cliquez sur **Ouvrir l'éditeur de code** ![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1orrnwg.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 `
` * Collez le dans l'éditeur de code et cliquez sur **Sauvegarder** ![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_fvev3x.png) ###### Sur une page d'accueil ou toute autre page (sauf page produit) : ** Copiez le code suivant `
`. || 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_4bvi75.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 le petit **+** pour ajouter un élément ![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_meleqz.png) * Sélectionnez **HTML/Liquid** et déplacez le bloc "HTML5/Liquid" où vous souhaitez faire apparaître le mini carousel (de préférence sous le bouton ajout au panier) ![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/may-25-2022-15-10-25_ljvboo.gif) * Cliquez sur le module que vous venez d'ajouter puis cliquez sur **Ouvrir l'éditeur de code** ![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1orrnwg.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 `
` * Collez le dans l'éditeur de code et cliquez sur **Sauvegarder** ![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1x5c1l7.png) ###### Sur une page d'accueil ou toute autre page (sauf page produit) : ** Copiez le code suivant `
`. || 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_fsbxfy.png) --- Voilà ! On a vu ensemble comment ajouter tous les éléments disponibles sur WideReview !