.png)
The editor has a top bar with 4 tabs to customize different widget elements and a Preview switch (Desktop/Mobile view). Below the bar is a side panel with the settings that vary depending on the selected tab, and a Preview area to see what the widget will look like in your theme.
<aside> 💡 Adjust your preview width to test the widget’s content adaptivity on different screen sizes.
</aside>
<aside> ⚠️ When you first open the app, you’ll see a notification asking you to activate the app. You need to do this to use the timer bar in your theme. Once you activate the app, the notification disappears. Learn more about app embed activation.
</aside>
The 4 tabs in the top bar are as follows:
In this tab, you adjust the type of bar and its position on the page, choose the fonts to further use in the widget’s components, and adjust the mobile breakpoint, i.e. the screen size where the widget’s design changes from desktop to mobile layout.
Note that if you decide to use the theme fonts in the widget, you won’t see them in the preview - only in the theme editor of the published theme.
Here, you can also choose a default preset for your timer widget. Presets define the overall appearance of the widget (components, background, typography, colors, etc.). Use presets as they are, or customize them to your taste.
In this tab, you adjust the layout, background, borders, corners, close button, and spacing of the widget. You also turn on and off, and rearrange the widget’s components (Text, Timer, Coupon, and Button) and adjust their appearance (fonts, colors, extra elements).
Note that you can edit, duplicate, and delete the added components as well as rearrange them by dragging them up and down in the list.