UGC Spotlight

A social-style band for customer and creator videos. Copy sits on the left — eyebrow, heading, paragraph and a star-rating line — and a carousel of tall vertical videos runs across the right, sized like phone footage rather than landscape video.

The carousel deliberately runs off the right edge of the screen with the next video part-visible, which signals there’s more to scroll. On desktop it shows three at a time with arrow controls; below that it shows two, then one, and is swipeable.

Settings

Setting	What it does
Section ID	Optional anchor, so you can link to this section with #your-id.
Padding (mobile) — Top / Bottom	0–10 rem, 0.5 steps. Default 2.5 / 2.5.
Padding (tablet) — Top / Bottom	0–10 rem, 0.5 steps. Default 4.5 / 4.5.
Padding (Desktop) — Top / Bottom	0–10 rem, 0.5 steps. Default 7 / 7.

That’s the whole section schema. Everything visible — the eyebrow, heading, body copy and rating line — lives on fixed blocks, and the videos are repeatable blocks. There is no background setting; the section inherits the page behind it.

Blocks

Four fixed blocks make up the left-hand copy column. They always appear in this order and can’t be removed:

• Title (eyebrow) — the small label above the heading.
• Title (heading) — the main heading.
• Rich text — the paragraph under the heading.
• Customer Ratings — the star row with a short message beside it, e.g. “Happy customers”. Star colour and alignment are set on the block.

Then the carousel:

• UGC Spotlight Video — repeatable. The preset ships with two; add as many as you want.

UGC Spotlight Video block settings

Covered in full on the UGC Spotlight Video page; the essentials:

Setting	What it does
Video	An uploaded Shopify video. Takes priority over the YouTube URL — if this is filled, the YouTube setting is ignored entirely.
Video poster	The still frame shown before playback. Leave empty and Shopify’s own auto-generated preview frame is used.
Video title	Not shown on the page. Used for SEO and structured data only.
Video description	Not shown on the page. Used for SEO and structured data only.
Video URL	A YouTube video, used only when Video is empty. Renders a lightweight YouTube embed instead of a native player.
Video thumbnail	The still image for the YouTube path. Only applies when Video URL is used, not when a Video is uploaded.

Uploaded video and YouTube are either/or, not both

The block checks Video first. If an uploaded video is present, the YouTube URL and Video thumbnail are ignored — and the two paths use different poster settings. Uploaded video uses Video poster; YouTube uses Video thumbnail. Filling the wrong one is the most common reason a slide shows the wrong (or no) still frame.

If both Video and Video URL are empty, the block renders nothing and the slide simply won’t appear.

The slides are tall, not wide

Each slide is a fixed 351×626 portrait frame — roughly 9:16. Landscape footage gets cropped hard down the sides. Upload vertical video shot for phones, or the subject ends up out of frame.

How playback works

• Slides start as a poster image with a play button. No video file is downloaded until someone presses play, so a carousel of eight videos costs nothing on page load.
• Pressing play starts the video with sound, looping.
• Clicking the video again pauses it; the poster fades back in when it ends.
• Videos don’t autoplay and they don’t pause each other — starting a second video while the first plays leaves both running.

Tips

• Three to eight videos is the sweet spot. Fewer than three and the desktop carousel has nothing to scroll; many more and people never reach the end.
• Fill in Video title and description on every slide even though they’re invisible. They’re what search engines read from the video markup — a slide without them is an untitled video as far as Google is concerned.
• Always upload a poster. Shopify’s auto-generated frame is grabbed at an arbitrary point and is frequently a blur or a blink.
• Keep the left-hand copy short. It’s vertically centred against the carousel; a long paragraph pushes the column taller than the videos and breaks the alignment.
• Check it at tablet width. Two videos show side by side there, which is a different crop rhythm from either the desktop three-up or the mobile single.