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

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

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

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

• 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