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.
Development still ongoing!
You can already use the Widget Editor but with reduced functionality. The amount of things you can do will increase in the future.
Missing functionalities are highlighted in this article.
Missing functionalities are highlighted in this article.
1. Overview
Once you open the Widget editor you will see two main sections.
Your Widgets is all about creating and configuring your widgets.
Design Settings is the place to go when you want to change your widgets' appearance.
Let's start with Your Widgets first!
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 Choosing a widget type
Currently you can select between three widget types:
- Catalog Widget: Overview of multiple products.
- Product Widget: Detail page of one of your selected products.
- Booking Widget: Booking module with calendar.
Outlook on widget types
Other widget types will follow soon, once they have been upgraded to the new React infrastructure. The goal is to include all our offered widgets.
2.2 Configuring the widget settings
The settings depend on the widget type you have just chosen.
If it was the Catalog or Booking Widget, you can select a product language and the product you want to display.
If you have chosen the Product Widget, you can select the product language as well as filter the products with a category & location filter.
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.
2.3 Selecting a design
In this step you can select the theme the widget should be portrayed in. To change individual colors, have a look at the Design Settings!
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
If you have selected the Product or Catalog Widget, you can decide which information the customer sees in the the widget.
You can customize the product box, define after which attributes the customer can filter and also decide how detailed the product page should be.
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, a 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 and Fonts
In regard to color, you currently have access to the accent color which affects the primary buttons ("Book here" and "Add to shopping cart").
Additionally, you can choose between 8 different typefaces and 5 font sizes.
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.2 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 theme 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.