Shoppable video
Shoppable video shows a row of videos with a heading above them. Each video has its own source, poster and playback options.
How to add it
- In the Theme Editor, open the template where you want the section.
- Select Add section, then choose Shoppable video.
The package uses this section on the Home page template.
Settings
View the section guide .
General
Horizontal puts the heading beside the videos on large screens, and Header width sets how wide that heading area is, as a percentage of the section. Vertical puts the heading above the videos.
| Setting | Options | Description |
|---|---|---|
| Layout | • Horizontal | Horizontal places the heading area beside the videos on large screens. Vertical places it above the videos. |
| Header width | Width of the heading area as a percentage of the section. Shown when Layout is Horizontal. | |
| Button style | • Primary | Style of the View all button: Primary, Outline or Link. Shown when Show View all button is on. |
Heading content
| Setting | Options | Description |
|---|---|---|
| Subheading | Short text shown above the heading. | |
| Heading | Main title of the section. | |
| Description | Text shown under the heading. | |
| Heading size | • Large | Size of the section heading. Large uses the biggest heading style and Small the smallest. |
| Heading alignment | • Left | Aligns the heading area to the left, center or right. With Center, the View all button moves below the videos. |
| Show View all button | Shows a View all button. With Left or Right it sits beside the heading. With Center it sits below the videos. | |
| View all button label | Text of the View all button. Shown when Show View all button is on. | |
| View all button link | Page the View all button links to when Heading alignment is Left or Right. Without a link the button is not clickable. With Center, this link is not used, and the button links to the current collection page if there is one. |
Video settings
Sticky video keeps a video fixed on screen while the shopper scrolls. Desktop only applies this on desktop screens, and All screens applies it on every screen size.
| Setting | Options | Description |
|---|---|---|
| Video ratio | • Adapt to video | Shape of each video card. Adapt to video follows each video's own proportions, and the other options set a fixed ratio. |
| Enable video autoplay | Videos are muted automatically to allow autoplay. | |
| Sticky video | • Disable | Shows a small floating video at the bottom of the screen once the shopper scrolls away from the section. It plays the middle video of the row set by Columns on desktop, or the first video when that number is even. Choose Desktop only or All screens; the shopper can close it. |
Layout
| Setting | Options | Description |
|---|---|---|
| Columns on desktop | Number of videos visible per row on desktop. | |
| Column gap | • No gap | Space between the videos: no gap, small, medium or large. |
| Columns on mobile | Number of videos visible at once on mobile. A decimal such as 1.5 shows part of the next video. |
Carousel
Enable autoplay moves to the next video after each autoplay interval, from 2 to 10 seconds.
| Setting | Options | Description |
|---|---|---|
| Show arrows | Shows previous and next arrows on the carousel. | |
| Arrow position | • Default | Default places the arrows on the sides of the videos, shown on hover. Section header places them in the heading area. Shown when Show arrows is on. |
| Show pagination | Shows pagination dots under the videos. | |
| Enable autoplay | Moves the carousel to the next video card on its own. | |
| Autoplay interval | Seconds between automatic moves. It applies when Enable autoplay is on. |
Appearance
| Setting | Options | Description |
|---|---|---|
| Color scheme | Edit color schemes in Theme settings. |
Section layout
| Setting | Options | Description |
|---|---|---|
| Section width | • Page width | Width of the section content: standard page width, a wider container, or the full screen width. |
| Top padding | Space above the section in pixels. | |
| Bottom padding | Space below the section in pixels. | |
| Show top border | Draws a thin line along the top edge of the section. |
Blocks
Video (video)
One video card with a linked product, a poster, a video file and alt text.
| Setting | Options | Description |
|---|---|---|
| Product | Product linked to this video. Its card appears over the video on hover on desktop and in the video popup. | |
| Video poster | Use the same dimensions as the video. | |
| Video | Video file for this card. 684px x 500px recommended. | |
| Video alt text | Text read aloud by screen readers to describe this video. Learn more ( https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#video-block ) |
No comments yet