Product showcase
Overview
Renders a single video reel card for use in the Product Showcase section. Each card displays a deferred video (native or embedded) over a poster image, with a floating product caption strip at the bottom showing the product image, title, price, and a cart-link icon. The caption overlay supports custom background and foreground colors. Video playback can be triggered by click or hover.
Parameters
| Parameter |
Description |
| Cover image |
Poster image shown before the video loads. Falls back to the product's featured media if blank. |
| Media |
Native Shopify video object to render. |
| Embed video |
Embedded video object (YouTube / Vimeo) used when media is blank. |
| Media width |
Maximum render width of the video/poster in pixels. |
| Media Ratio |
Aspect ratio mode: adapt (natural ratio) or fit (fixed height). |
| Desktop hight |
Fixed card height on desktop. Applied when media_ratio is fit . |
| Mobile highr |
Fixed card height on mobile. Applied when media_ratio is fit . |
| Loading |
Image loading attribute passed to the poster (lazy or eager ). |
| Autoplay |
Autoplay the video once loaded. |
| Loop |
Loop the video. |
| Control |
Show native video controls. Only applied when on_hover and loop are both false. |
| On hover |
Play the video on hover instead of on click. |
| Placeholder index |
Loop index used to select the placeholder SVG when no image is available. |
| Index |
Unique card index used to generate the deferred-media element ID. |
Product Caption
| Parameter |
Description |
| Product |
Shopify product displayed in the caption strip (image, title, price, cart link). |
| Show unit pricing |
Show the unit price below the main price. |
| Caption Background |
CSS color value for the caption overlay background. |
| Caption foreground |
CSS color value for the caption overlay text and icon color. |
| Background |
Source setting value passed in as caption_background . |
| foreground |
Source setting value passed in as caption_foreground . |
Product Title Typography
| Parameter |
Description |
| Heading tag |
Semantic HTML heading level for the product title (e.g. h3 ). |
| Heading size |
CSS size class applied to the title element. |
| Heading Weight |
Font weight for the product title. |
| Heading case |
Letter case for the product title. |
| Heading Family |
CSS custom property reference for the title font family. |
| Heading color style |
Color style applied to the title; when not none , mixes foreground and heading colors. |
Caption Description Typography
| Parameter |
Description |
| Caption case |
Letter case applied to the caption description text. |
| Caption weight |
Font weight applied to the caption description text. |
| Caption Family |
Font family applied to the caption description text. |
Layout
| Parameter |
Description |
| Section card content alignment |
Vertical alignment of the caption content stack within the overlay. |
| is loop |
Internal loop flag; when true, disables hover-triggered deferred loading and suppresses native controls regardless of the controls parameter. |
