UGC (shoppable videos)
A feed of customer photos and videos, each able to show the products in it, so shoppers can buy straight from the photos.
At a glance: Add it to any page with Add section.
Good for
- Shoppable customer or creator videos on the homepage
- Social proof on a product or landing page
- Short product demos shown as vertical reels
Link products to each video
- Upload each video in its block's Video field. Short vertical clips, about 9:16 or 3:4 and under 30 seconds, work best.
- In the same block, use Linked products to pick up to five products that appear in the video.
- Turn on Show product card in the section settings to show the linked product under each reel. With several products, the card cycles through them at the Product slide duration you set.
- Shoppers who open a video full screen can see all its linked products in the side panel.
How to add the section
- From your Shopify admin, go to Online Store → Themes and click Customize on Sublime.
- Open the page you want to edit from the dropdown at the top of the editor.
- In the left sidebar, click Add section.
- Search for UGC and select it.
- Drag it into position, adjust the settings below, and click Save.
Section settings
Content
| Caption | Small label above the heading, used for eyebrow text like a category or a date. |
| Heading | The section title. Leave it empty to hide the heading row entirely and let the content start at the top. |
| Heading size | Picks one of the heading sizes defined in Theme settings → Typography, so headings stay consistent across sections instead of being sized one by one.
Choose Default (default), H1, H2, H3, H4, H5 or H6. |
| Description | Body copy shown under the heading. Supports bold, italic and links. |
| Text alignment | Aligns the heading and body text left, center or right.
Default: Left. |
| Button label | Text on the button. Leave it empty to hide the button. Two or three words reads best. |
| Button link | Where the button goes. A button with no link is not shown. |
| Open link in new tab | Opens the link in a new browser tab. Best kept for links that leave your store, so shoppers don't lose their place.
Off by default. |
| Button style | Picks one of the button styles defined in Theme settings → Buttons: primary, secondary or tertiary.
Choose Primary (default), Secondary or Tertiary. |
| Button icon | Optional icon shown after the button label.
Choose None (default), Arrow left, Arrow right, Arrow up, Arrow down, Chevron left, Chevron right, Chevron up, Chevron down, Arrow up right, Plus, Minus, Cross, Check, Play, Cart, Shopping cart, Search, Link, Download, Envelope, Home, Edit, User, Login, Heart, Chat, Filter, Trash, Share, Phone, Map pin or Eye. |
Feed
| Desktop columns | How many items sit side by side on desktop.
Choose 3 or 5 (default). |
| Style | Visual treatment of the section.
Choose Standard (default), Progressive or Immersive. |
| Show product card | Displays the linked product below each reel.
On by default. |
| Product slide duration | When a video is linked to more than one product, the product card under it cycles through them. This sets how long each product shows.
Adjustable from 1s to 10s (default 2s). Only appears when Show product card is on. |
| Image ratio | Crops images to a fixed shape so a row of mismatched uploads still lines up. Choose Adapt to image to keep each image at its own proportions.
Media is cropped to fit the feed size. The preview adapts to the media by default. Choose Portrait (3:4) (default), Portrait (9:16) or Square (1:1). |
| Enable video autoplay | Starts the video as soon as it is in view. Autoplaying video is always muted, because browsers block sound without a click.
Autoplay applies only to the video currently in focus. Off by default. |
| Enable video looping | Restarts the video when it reaches the end.
Off by default. |
Appearance
| Color scheme | Sets the background, text, border and button colors for the section. Schemes are defined once in Theme settings → Colors and reused everywhere, so changing a scheme updates every section using it. |
| Card color scheme | Color scheme for cards inside the section, so they can sit apart from the section background. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Blocks
Blocks are the individual pieces inside the section. In the sidebar, click Add block under the section to add one, and drag blocks to reorder them. The order in the sidebar is the order on the page.
Media block
Media
| Image | The image for this block.
2880 x 1280px (large) .jpg recommended. |
| Video | The customer video for this item, uploaded to Shopify. It plays muted. Portrait (vertical) phone footage suits the default portrait frame best. The image above, if set, is used as the cover before the video plays. |
| Linked products | Choose the products to show, and in what order.
Link one product for a spotlight card, or several to show a slideshow. |
Tips
- Pick the frame to match your footage. Choose Portrait (9:16) for phone video. Otherwise it's cropped to 3:4.
- Add a cover image. It shows before the video plays, and in place of the video's own first frame.
- Link only what's in the video. Shoppers trust the feed more when the products shown match the clip.
Troubleshooting
No product card appears under a video
The card needs Show product card on in the section settings, and at least one product in that video's Linked products.
All my videos play at once
Only the video in focus plays when Enable video autoplay is on. The others wait until shoppers swipe to them. With autoplay off, videos play when shoppers hover over them.