Create your first widget
Where it appears, what shape it takes, how products are chosen, and how it looks.
A widget is four decisions: where it appears, what shape it takes, how its products are chosen, and how it looks. The editor is laid out in that order, with a live preview beside it drawing your real products.
Create it
- From the app’s home page, press Create widget.
- Under Placement, give it an internal name, which only you see, and choose Where it appears and a Layout.
- Under Recommendations, choose How products are chosen. See How products are chosen.
- Under Appearance and Text, set colours and the heading shoppers will read.
- Press Save. The widget publishes to your storefront as part of the same save.
About the preview
The preview on the right renders your own products, not placeholders, so what you see is close to what the page will show. It is not a screenshot of your theme, though. Your theme’s fonts and spacing apply on the storefront, not in the editor. Check the real page once before you call it done.
More than one widget on a page
If several widgets share a placement, Display order decides which renders first: higher numbers come first. You will need the block placed once for each widget you want visible.
Check it on the storefront
Open any product page on your store. The widget should render where you placed the block. If it does not, work down If the widget does not appear . The causes are listed most likely first, and the first two account for most of it.
One thing that catches people out: a widget with nothing to recommend hides itself rather than leaving an empty box on the page. On a nearly empty development store that can look identical to the app being broken. Try a product that shares a collection with several others, or switch the source to Best sellers while you test.
Something here wrong or missing? Tell us. We would rather fix the page than answer the same question twice.