Articles sur : Page Builders 👹‍🔧

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)



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






Voilà un aperçu :



Cliquez sur le petit + pour ajouter un élément



SĂ©lectionnez HTML/Liquid et dĂ©placez le bloc "HTML5/Liquid" oĂč vous souhaitez faire apparaĂźtre le grand carousel principal sur votre page



Cliquez sur le module que vous venez d'ajouter puis cliquez sur Ouvrir l'Ă©diteur de code



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 le petit + pour ajouter un élément



SĂ©lectionnez HTML/Liquid et dĂ©placez le bloc "HTML5/Liquid" oĂč vous souhaitez faire apparaĂźtre les Ă©toiles sous votre titre



Cliquez sur le module que vous venez d'ajouter puis cliquez sur Ouvrir l'Ă©diteur de code



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 le petit + pour ajouter un élément



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



Cliquez sur le module que vous venez d'ajouter puis cliquez sur Ouvrir l'Ă©diteur de code



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 le petit + pour ajouter un élément



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)



Cliquez sur le module que vous venez d'ajouter puis cliquez sur Ouvrir l'Ă©diteur de code



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

Cet article a-t-il répondu à vos questions ?

Partagez vos commentaires

Annuler

Merci !