Shape, ring, and background
Choose each clip's shape and corners, the ring around thumbnails, and what sits behind the widget.
Where to find it: open a widget and click the tab named after its layout. These cards are on the Stories, Carousel, Grid, and Product page tabs.
Shape
| Setting | Options | Default |
|---|---|---|
| Clip shape | Vertical 9:16 — reels and TikTok, Square 1:1 — feed posts, Horizontal 16:9 — landscape video | Vertical 9:16 |
| Corners | Square corners, Slightly rounded, Rounded, Very rounded, and on Stories only Circle | Stories: Circle. Carousel and Grid: Very rounded. Product page: Rounded. |
Stories has no Clip shape setting.
Match Clip shape to how your videos were filmed. Clips are cropped to fill the shape, so a landscape video in a vertical card loses its sides. Stories thumbnails are always square crops, shown as circles or rounded squares depending on Corners.
Clip shape only changes the thumbnails. The player is always a tall 9:16 frame, so landscape videos are cropped there too, unless you turn off Crop to fit vertical aspect ratio in Settings → Fullscreen player.
Change the shape
Open the widget and click the tab named after its layout.
In the Shape card, pick a Clip shape. On Stories, skip this step.
Pick Corners. The preview updates as you go.
Click Save.
Ring
The outline around each thumbnail. On Stories it's the familiar cue that says "these are stories".
| Setting | Options | Default |
|---|---|---|
| Thickness | 0–8 px. Set to 0 for no ring. | 2 px |
| Style | Gradient — two colors or One solid color | Gradient |
| Fades from, Fades to | The two gradient colours, when Style is Gradient — two colors | Purple to orange |
| Ring color | Any colour, when Style is One solid color | Red |
When Thickness is 0, the other ring settings are hidden. Gradient draws the classic purple-to-orange story ring.
Use One solid color for a brand colour
The gradient's Fades from and Fades to colours aren't saved yet. The preview shows the colours you pick, but they reset to the default when you save, and the storefront always shows the purple-to-orange gradient. For a ring in your own colour, choose One solid color and set Ring color.
Set a ring colour
Open the widget and click the tab named after its layout.
In the Ring card, set Style to One solid color.
Click Ring color and pick your colour.
If the ring looks too thin or too thick, change Thickness. Set it to 0 to remove the ring.
Click Save.
Background
| Setting | What it does | Default |
|---|---|---|
| Use the page background | Leaves the widget transparent, so it blends into the section it's in. | On |
| Background color | When the switch above is off, fills the whole widget area, including the space above and below. | White |
Add a background colour
In the Background card, turn off Use the page background. Background color appears.
Click Background color and pick your colour.
Click Save.
Stories: thicken the ring if you set a background
On Stories, a background colour also draws a thin band of that colour between the ring and the image, which covers 2 px of the ring. At the default 2 px thickness, the ring disappears. If you set a background colour on a Stories widget, raise Ring → Thickness to 4 px or more.
With Use the page background on, the Stories preview still draws a white band, so a 2 px ring looks missing in the preview. Your storefront shows it.