Le Widget Editor est le centre de tous vos widgets React . Il est conçu pour les professionnels comme pour les débutants. Il n'est donc pas nécessaire d'avoir des connaissances préalables en CSS.
Vous le trouvez sous Configurer votre boutique > Intégrer votre boutique > Widget Editor.
Le développement est en cours!
Vous pouvez d'ores et déjà utiliser le Widget Editor, mais avec des fonctionnalités réduites. Les possibilités d'utilisation augmenteront à l'avenir.
Les fonctionnalités manquantes sont mises en évidence dans cet article.
Les fonctionnalités manquantes sont mises en évidence dans cet article.
1. Vue d'ensemble
En ouvrant le Widget Editor, vous verrez deux sections principales.
Votre Widget Editor est consacré à la création et à la configuration de vos widgets.
Rendez-vous dans Modifier pour changer l'apparence de vos widgets.
Commençons par Your Widgets !
2. Créer et personnaliser vos propres widgets
Dans Your Widgets, vous pouvez configurer et gérer tous les widgets que vous avez créés dans le Widget Editor. Ils sont triés par type de widget.
2.1 Choisir un type de widget
Actuellement, vous pouvez choisir entre trois types de widgets :
- Widget catalogue : Vue d'ensemble de plusieurs produits.
- Widget produit : Page de détail d'un de vos produits sélectionnés.
- Widget de réservation : Module de réservation avec calendrier.
Types de widgets à venir
D'autres types de widgets suivront bientôt, dès qu'ils auront été mis à niveau avec la nouvelle infrastructure React. L'objectif est d'inclure tous les widgets que nous proposons.
2.2 Configurer les paramètres du widget
Les paramètres dépendent du type de widget que vous venez de choisir.
Si c'était le Widget catalogue ou le Widget de réservation vous pouvez sélectionner une langue et le produit que vous souhaitez afficher.
Si vous avez choisi le Widget produit, vous pouvez sélectionner la langue du produit et filtrer les produits à l'aide d'un filtre de catégorie et de lieu.
Les catégories sont celles que vous avez créées et organisées. Pour plus d'informations sur la façon d'organiser vos catégories, lisez cet article.
Vous pouvez utiliser le filtre de localisation en complément ou de manière autonome. Le lieu sera déterminé par le paramètre Ville que vous avez saisi. Pour augmenter ou réduire le nombre de produits affichés dans le Widget catalogue, vous pouvez saisir un rayon dans lequel le produit doit être inclus pour être affiché.
2.3 Choisir un design
Dans cette étape, vous pouvez sélectionner le thème dans lequel le widget doit être représenté. Pour modifier les couleurs individuellement, allez à Modifier!
Conseil
La sélection du thème peut s'avérer utile si vous mettez à jour votre conception régulièrement.
Supposons que vous changiez l'apparence de votre site Web à chaque saison. Vous pouvez facilement adapter le widget au nouveau design sans devoir modifier quoi que ce soit dans le backend.
2.4 Définir le contenu visible
Si vous avez sélectionné le Widget produit ou catalogue,vous pouvez décider quelles informations le client voit dans le widget.
Vous pouvez personnaliser le champ du produit, ensuite définir quels attributs le client peut filtrer et également décider du niveau de détail de la page du produit.
2.5 Sauvegarder et publier
Dans la dernière étape, vous donnez un nom et une description à votre widget. Ces deux éléments seront visibles dans l'aperçu.
Lorsque vous cliquez sur Enregistrer, un code HTML est généré. Vous pouvez intégrer ce code dans votre site web.
Conseil
Vous ne devez intégrer le code dans votre site web qu'une seule fois! Chaque modification apportée dans le Widget Editor affectera également le widget sur votre site web.
3. Créer un design
"Modifier" vous permet de créer des thèmes et de modifier ainsi l'apparence de vos widgets. Les thèmes se composent de couleurs et de polices.
3.1 Couleurs et polices de caractères
En ce qui concerne la couleur, vous avez actuellement accès à la couleur d'accentuation qui affecte les boutons primaires ("Réserver ici" et "Ajouter au panier").
Vous avez le choix entre 8 polices de caractères et 5 tailles de police.
Plus de personnalisation à venir
Cette zone sera largement améliorée à l'avenir afin que vous puissiez accéder non seulement à la couleur d'accentuation mais aussi à la couleur secondaire, à la couleur d'arrière-plan, à la couleur de la police, etc.
3.2 Sauvegarder et publier
Une fois que vous avez terminé la modification de votre design global, vous lui donnez un nom et une description. Lorsque vous cliquez sur "Enregistrer les dernières modifications", tous les widgets avec ce design seront automatiquement actualisés.
Si vous n'avez pas encore sélectionné le design de l'un de vos widgets, consultez le chapitre 2.3 pour savoir comment procéder.
Conseil
Si vous avez oublié de sauvegarder les dernières modifications, vous recevrez une notification concernant les modifications non sauvegardées dans la vue d'ensemble du Widget Editor.