The editor features a top bar with 3 tabs for customizing different widget elements. Below the bar is a side panel with the settings that change based on the selected tab. The Preview area features a device switch (Desktop/Mobile view) to show how the widget will appear in your store across different screen sizes and devices.
<aside> ⚠️ When you first open the editor, you’ll see a notification asking you to activate the app. You need to do this to ensure the widget displays in your theme. Once you activate the app, the notification disappears.
</aside>
The 3 tabs in the top bar are as follows:
In this tab, you 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 choose to use theme fonts in the widget, the actual fonts won’t appear in the widget preview. They will only be visible in the theme editor.
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, and spacing of the widget. You can also hide and rearrange the widget’s components (Text, Timer, Coupon, and Button) and adjust their appearance (fonts, colors, extra elements).
In this tab, you choose the timer mode (Fixed date or Evergreen), set the starting time, and choose what to do when the time runs out.
<aside> 💡 Learn more about the difference between timer modes
</aside>