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)



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 :



Cliquez sur Add-Ons puis sur Add Add-on



Cherchez le mot "custom" puis cliquez sur Custom Code



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



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



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

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 et cliquez sur Sauvegarder

Ajouter les étoiles sous le titre du produit

Voilà un aperçu :



Cliquez sur Add-Ons puis sur Add Add-on



Cherchez le mot "custom" puis cliquez sur Custom Code



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



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



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

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 et cliquez sur Sauvegarder

Ajouter les avis sous forme de grille

Voilà un aperçu :



Cliquez sur Add-Ons puis sur Add Add-on



Cherchez le mot "custom" puis cliquez sur Custom Code



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



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



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

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 et cliquez sur Sauvegarder

Ajouter le mini carrousel sous le bouton ajout au panier

Voilà un aperçu :



Cliquez sur Add-Ons puis sur Add Add-on



Cherchez le mot "custom" puis cliquez sur Custom Code



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



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



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

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 et cliquez sur Sauvegarder




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

Mis à jour le : 01/09/2022