To create the widget in the app admin, follow the steps below:
The editor has a top bar with 5 tabs to customize different widget elements. 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.
The 5 tabs in the top bar are as follows:
In this tab, you fill in the title of the widget, align it over the buttons, and adjust its font style and spacing.
Note that by default, the title of the widget takes the font style and spacing from the theme it is installed in, to ensure smooth integration with the overall style of your online store.
In this tab, you add buttons (new or preset), fill in their label and source URL, adjust their overall look (font style, borders, paddings, and colors), and add an icon, if needed.
In the Pro plan, the widget allows for using product metafields to display buttons with dynamic content.
<aside> ↗️ Learn how to use metafields with buttons
</aside>