Cette fonctionnalité est disponible sur tous les forfaits Goodshuffle Pro.
1. Prérequis
Avant de commencer :
Achetez l’intégration de site web depuis l’onglet Intégrations dans Goodshuffle Pro.
Copiez votre clé publique de navigateur depuis le même onglet — vous en aurez besoin dans votre code Webflow.
Vous pouvez trouver les extraits de code ici.
Configuration Webflow
Étape 1 : Ouvrir les paramètres du projet Webflow
Cliquez sur le symbole “W” en haut à gauche de votre page Webflow puis cliquez sur "Paramètres du projet".
Légende : Ouvrez les paramètres du projet Webflow depuis le tableau de bord de votre site.
Étape 2 : Ouvrir la section Code personnalisé
Ensuite, cliquez sur Code personnalisé dans les paramètres du projet.
Légende : Sélectionnez l’onglet Code personnalisé pour ajouter les scripts d’intégration.
3. Ajouter les scripts Goodshuffle Pro
Dans la section Header du Code personnalisé, collez ce qui suit :
<script type="module" src="https://unpkg.com/@goodshuffle/[email protected]/dist/gspro-wc/gspro-wc.esm.js"></script> <script nomodule="" src="https://unpkg.com/@goodshuffle/[email protected]/dist/gspro-wc/gspro-wc.js"></script> <gspro-wishlist-config data-url="https://data.goodshuffle.com/vendor/YOUR-PUBLIC-WEBSITE-KEY" ></gspro-wishlist-config>
⚠️ Remplacez YOUR-PUBLIC-WEBSITE-KEY par la clé publique de navigateur récupérée précédemment.
Une fois ajouté, cliquez sur Enregistrer les modifications.
Étape 4 : Publier votre site
Après avoir enregistré le code personnalisé :
Cliquez sur Publier en haut à droite de Webflow.
Choisissez le ou les domaines sur lesquels vous souhaitez publier.
Légende : Publiez votre site après avoir ajouté le code personnalisé.
💡 Si vous avez plusieurs domaines, testez d’abord sur un domaine de préproduction ou de démonstration.
Aperçu de votre site web
Cliquez sur la flèche de sortie à côté de votre domaine pour voir un aperçu de votre site Wishlist.
Légende : Utilisez l’option d’aperçu pour vérifier que votre intégration Wishlist est bien en ligne.
Retirer le badge “Made in Webflow” (optionnel)
Si vous souhaitez retirer le badge de marque Webflow :
Allez dans Paramètres du projet → Général.
Descendez et désactivez la marque Webflow.
Cliquez sur Enregistrer les modifications.
Légende : Désactivez le badge de marque Webflow dans les paramètres généraux.
⚠️ N’oubliez pas de publier après avoir effectué des modifications.
Affichage et galeries d’articles
Étape 1 : Ouvrir votre projet dans Designer
Accédez à votre Designer Webflow pour le site publié.
Légende : Ouvrez le Designer Webflow pour ajouter des éléments embarqués.
Étape 2 : Ouvrir le navigateur
Cliquez sur le panneau Navigator et trouvez la section où vous souhaitez insérer la galerie.
Légende : Utilisez le Navigator pour trouver la bonne section de page.
Étape 3 : Ajouter un élément embarqué
Cliquez sur Ajouter → faites défiler jusqu’à Embed.
Ensuite, cliquez sur 'Ajouter' en haut à droite et sélectionnez pour ajouter un nouvel élément 'Embed'.
Remarque : il se peut que vous deviez faire défiler vers le bas pour voir l’option Embed.
Légende : Ajoutez un élément Embed à l’endroit où vous souhaitez afficher la galerie d’articles.
Étape 4 : Insérer la balise de galerie d’articles
Pour ajouter une galerie d’articles (plus d’infos ici), collez l’extrait suivant :
<gspro-item-gallery></gspro-item-gallery>
Puis cliquez sur Enregistrer et fermer.
💡 Vous pouvez déplacer la section embarquée pour ajuster les marges et l’alignement selon votre design.
Légende : Exemple de galerie d’articles affichant des articles de démonstration.
Vous pouvez en savoir plus sur la façon dont un client utilise la Wishlist ici.
Définir des filtres d’inventaire par défaut
Pour afficher par défaut un inventaire spécifique :
Cliquez sur l’icône d’engrenage à côté de votre élément Embed.
Ajoutez des instructions de recherche (ex : articles avec “Mariage” dans le titre/la description/le tag).
Enregistrez et publiez.
Légende : Utilisez l’icône d’engrenage pour définir les filtres par défaut de votre galerie d’articles.
Vous pouvez en savoir plus sur la recherche d’articles ici.
C’est terminé !
Une fois publié, votre site Webflow affichera :
Section de recherche et de filtres
Listes de catégories
Galeries d’articles intégrées là où vous les avez placées
🎉 Bravo ! Votre intégration Goodshuffle Pro est en ligne.
Besoin d’aide supplémentaire ?
Besoin d’aide supplémentaire ? Cliquez sur la bulle de chat bleue en bas à droite de votre écran pour contacter notre équipe support — nous sommes là pour vous aider !
Clause de non-responsabilité : Cet article a été traduit à l’aide de l’IA. Pour toute question ou clarification, contactez-nous via la bulle de chat en bas à droite de votre écran.