The Widget Editor is the central hub for all your React widgets. It is designed for professionals and beginners alike, so you don't need to have prior knowledge in CSS.
You can find it under Shop Configuration > Website Integration > Widget Editor.
1. Overview
Once you open the Widget Editor, you will see two main sections.
- Your Widgets - creating and configuring your widgets
- Design Settings - change your widgets' appearance
2. Creating and customizing Your Widgets
In Your Widgets, you can configure and manage all the widgets you created in the Widget Editor. They are sorted by Widget type.
2.1 Widget Type
You can select between four widget types:
- Catalog Widget: Overview of multiple products.
- Product Widget: Detail page of one of your selected products.
- Booking Widget: Booking module with calendar.
- Button Widget: Button with Calendar. For more details, check the following article: How does the integration with the button widget work?
2.2 Widget Settings
The settings depend on the widget type you have just chosen.
- For the Catalog Widget, you can select the product language, category filter, location filter and create a Sub-ID.
- The categories are the ones you created and arranged yourself. If you want to have more information on how to organize your categories, read this article.
- In addition or as a standalone, you can use the location filter. The location will be determined by the City you enter. To increase or reduce the amount of products shown in the Catalog Widget, you may enter a Radius in which the Product must be included to be displayed.
- Here, you can also create a Sub-ID: add the Sub-Id under Settings / Sub ID: small letters and numbers.
Note: You can not see the Sub-Id in your code, because it is hidden.
- For the Product Widget and Booking Widget, you can select the product language, select the product and create a Sub-ID
- For the Button Widget, you can select the language, link button to one of the widget types, select product, create a Sub-ID, add button text and choose if you prefer a floating button.
2.3 Selecting a design
In this step, you can select the theme the widget should be portrayed in. To change individual colors, take a look at the Design Settings section below.
Tip
The theme selection can come in handy when you regularly update your design.
Say you change the look of your website per season. You can easily adapt the widget to the new design without having to change anything in the backend.
2.4 Defining the visible content
Here also, it depends on the pre-selected widget type.
You can customize the product box, define after which attributes the customer can filter, and also decide how detailed the product page should be.
- Catalog Widget: Product box, Filter panel, Product details, Booking details, Catalog list
- Product Widget: Product box, Product details, Booking details
- Booking Widget and Button Widget: Booking details
2.5 Saving and publishing
In the last step, you give your widget a name and description. Both will be visible in the overview.
Once you click on Save, an HTML-Code is generated. You can embed this code into your website.
Tip
You have to integrate the code into your website just once! Every change you make in the Widget Editor will affect the widget on your website as well.
3. Creating a design
Design Settings allows you to create themes and thereby change the look of your widgets. Themes consist out of colors and fonts.
3.1 Colors
In regard to color, you currently have access to the accent color, which affects the primary buttons ("Book here" and "Add to shopping cart").
3.2 Font
You can choose between 8 different fonts and 5 font sizes.
3.3 Corner Radius
Here, you can adjust the border Radius for all widgets
More customization coming soon!
This area will be improved extensively in the future so that you can access not just the accent color but also secondary color, background color, font color etc.
3.4 Save & publish
After you finished editing your global design, you give it a name and a description. When you save, all the widgets with the design will automatically refresh.
If you haven't selected the design for any of your widgets yet, see chapter 2.3 on how to proceed.
Tip
If you forgot to save the latest changes, your progress will not be reset, and you will receive a notification about unsaved changes in the Widget Editor overview.