The Product page layout
One widget for your whole catalogue: a strip on each product page showing the clips tagged with that product.
The Product page layout puts a swipeable strip of clips on your product pages. By default, it shows the widget's clips tagged with the product being viewed. One widget can serve every product page, from its own clips, up to 24.
How it picks clips
On each product page, the strip:
- Starts from the clips in this widget, up to 24. It doesn't pull from your whole library. Clips that are Draft in your library are left out.
- Keeps the clips whose tagged product is the product on the page. Only each clip's first tagged product counts, and it must be Active.
- If nothing matches, it either shows every clip in the widget or hides the strip. You choose which with Show every clip when none match.
- Then the minimum applies: with fewer clips than Show only with at least, or the shop-wide minimum if higher, the strip hides. It doesn't fall back to every clip in that case.
Collections aren't used. A clip tagged with a collection doesn't match the products in it.
Set it up
In Video library, tag a product on every clip you want to show on a product page.
In Widgets, click Add widget. Set Layout to Product page. Placement switches to Product pages and locks.
Click Choose clips and add the tagged clips for the products you want covered, up to 24.
On the Product page tab, check What the strip shows (below).
To show captions, open the Player tab and turn on Show captions (see Captions).
Click Save, then Add to theme. The theme editor opens on your default product template with a new UGC widget block.
Pick your widget in the block, drag it to where you want it, usually near the product description or under the buy buttons, and click Save.
If you haven't already, turn on the app embed. The block stays hidden until it's on.
Other product templates
Add to theme opens your default product template. If some products use a different template, open that template in the theme editor and add a UGC widget block to it as well.
What the strip shows
The Product page tab starts with the What the strip shows card:
| Setting | What it does | Default |
|---|---|---|
| Clips on screen | The most clips shown at once, 1–6. The next one peeks in to show there are more. In narrow product columns and on phones, fewer fit. Lower Strip width or Size on mobile to fit more. | 3 |
| Which clips | Only clips tagged with this product, or Every clip in this widget. | Only tagged clips |
| Show every clip when none match | For products with no tagged clip: on shows all the widget's clips, off hides the strip. Shown when Which clips is Only clips tagged with this product. | On |
Size, shape, and movement
The other cards on the Product page tab work like the other layouts. See Size and spacing and Shape, ring, and background. A few things are specific to this layout:
- Strip width sets the width of each clip, 220 px by default. The strip's overall width follows from the number of clips on screen.
- Shoppers swipe or scroll through the strip. There are no arrows.
- In the Movement card, Advance every moves the strip on by one clip every few seconds. Leave it at 0 to keep it still. Start over at the end returns to the first clip after the last. It pauses while a shopper's pointer or finger is on the strip.
- Preview videos defaults to Featured clip only: the clip in the middle plays silently.
- The strip doesn't show product chips, because shoppers are already on the product. The Product card option has no effect on this layout.
Captions
Captions sit over the bottom of each clip, in white. To show them:
Open the widget and click the Player tab.
Turn on Show captions and click Save.
New Product page widgets save with captions off, even though the preview shows them until you save.
The caption text is each file's alt text. See Where the captions shoppers see come from.
Good to know
- The strip only appears on product pages. Anywhere else it stays hidden, even if its block is there.
- Tagging or untagging a product on a clip in the library updates every widget that uses the clip, so the strip picks it up without you saving the widget. Changes to a clip's status or product reach shoppers within about a minute.
- The exception: if a product's strip is hidden because of what the widget saved, for example nothing matched with Show every clip when none match off, or fewer clips matched than your minimum, and the fix is made in Shopify, such as setting the product to Active, it stays hidden. Save the widget again.
- If you place this widget with embed code instead of a block, the app embed must be on. That's how the strip knows which product it's on.
- In an A/B test, either both versions use the Product page layout or neither does.