Add the widget to your theme
Place the UGC widget block where you want your videos, pick your widget in it, and save.
A widget appears wherever you put a UGC widget block in your theme, as long as its placement allows that kind of page. You can have as many blocks as you like, on as many pages as you like, and each one shows the widget you pick in it.
Before you start
- Save your widget in the app. Add to theme only appears on saved widgets.
- Turn on the app embed. Without it, the block stays hidden.
- You need an Online Store 2.0 theme. On a vintage theme, use embed code instead.
1. Open the theme editor with a new block
Pick whichever route suits you. The first two open your live theme's editor with a new UGC widget block already added in a new Apps section. With the third, you add the block yourself:
In the app, click Widgets and open your saved widget.
Click Add to theme in the top bar. The theme editor opens on the page type that matches the widget's Placement:
| Placement | Opens |
|---|---|
| Global / any page or Home page | Your home page |
| Product pages (and the Product page layout) | Your default product template |
| Collection pages | Your default collection template |
| Pages | Your default page template |
Add to theme opens in the same browser tab, so save any changes to the widget first. If you change Placement in the editor, the button follows it straight away, even before you save.
2. Pick your widget
In the left sidebar, click the new UGC widget block.
In the block settings, under Widget, click Select and choose your widget. Widgets are listed by the Widget name you gave them.
Drag the section to where you want it on the page.
Click Save at the top right.
The block has no other settings. Size, layout, colours, and clips are all set in the app. When you save a widget in the app later, every block that uses it updates. You don't need to touch the theme again.
Don't leave a block empty
With the app embed on, a block with no widget selected, or whose widget was deleted in the app, shows shoppers the text Select a widget in the theme editor to display shoppable videos. (in your shoppers' language when a translation exists). Pick a widget in every UGC widget block, or remove the block.
Each click adds another block
Add to theme and Add to home page add a new block every time you use them. If you end up with extras, click the extra block and choose Remove block. To open the theme editor without adding anything, use Open theme editor on Home, or go to Online Store → Themes → Customize.
Product page widgets
A widget with the Product page layout needs its block on a product page. The block tells the widget which product the shopper is looking at. Use Add to theme, which opens your default product template, or open a product page in the theme editor and add the block there.
3. Check it's live
Open your storefront on the page where you added the block. Your widget should be there. A Pop up waits a few seconds before it appears.
Back in the app, go to Home and click Recheck in step 3 of the Setup guide. When the block, widget, and app embed are all in place, the step shows Live.
Nothing showing? Work through Widget not showing on your storefront.
Showing a widget on every page
A block only appears on the page type you add it to. To show a widget everywhere, which is typical for a Pop up, set its placement to Global / any page and add the block to an area your theme shows on every page, such as the footer. In most Online Store 2.0 themes, you can click Add section in the footer area of the theme editor and choose UGC widget under Apps.
Move or remove a widget
- Move it: drag its section in the theme editor's sidebar, then click Save.
- Remove it from a page: click the block, choose Remove block, then click Save. The widget itself stays in the app.
- Show a different widget in the same spot: click the block and pick another widget under Widget.