Click on "Apps" on the home page of the ModeMagic app

Select the "Bestseller Products" widget under "Apps"

Select the template from the left side of the screen & click on "Create"

On the right side of the screen, the "Bestseller Products" Data, is visible by default.

You can also read: What are Data Sources in Widgets?

From the top of the screen, you can view how the widget will be visible on different screen sizes.

On the bottom left corner of the screen, click on the drop-down menu & select each layer to make the corresponding changes.

Select the Data Connector to map each field to the corresponding Shopify Product parameter. Some defaults are already connected.

For eg: You can map the "Text" field with the "Product Title". This will auto-fill the titles of the selected products in the "Text" field of the widget.

Note: Linked fields appear in green.

From the right side of the screen, choose the store pages in which you want the widget to be visible.

a) Select "All products" if you want the widget to be visible on all product pages


b) Select "All collections" if you want the widget to be visible on all collection pages


c) Select "Home Page" if you want the widget to be visible on the home page

d) Select "Custom" & then add the regex in the "Add Regex" box. If you would like to add the widget in selective product pages only, you can add the regex as shown below-

For eg: If the regex has to be added for the product "oakley-factory-winter-trigger-mens-mitt-2015", then you must add it in the "Add Regex" box as follows:

Choose a "Custom" or "Floating" position for the widget

Set up the timing- when the widget should be visible on the screen

Click on "Save" to save the widget & click on "Add to Store" in the bottom right corner of the screen to apply the widget to your store.

Once the widget is active, it will be visible under "Active". You can pause an active widget by clicking on the "Pause icon" or remove the widget by clicking on "Remove".