Video Reels
Overview
Displays video reels in a responsive grid or slideshow with customizable video content, icons, typography, navigation, layout, color schemes, and spacing.
| Setting |
Description |
| Tagline |
Adds a section tagline. |
| Tagline Size |
Sets the tagline size: Large, Medium, or Small. |
| Tagline Weight |
Sets the tagline font weight from 100 to 900. |
| Tagline Case |
Sets text case: None, Uppercase, Capitalize, or Lowercase. |
| Tagline Family |
Uses the Default or Heading font family. |
| Tagline Background |
Sets the tagline background color. |
| Tagline Color |
Sets the tagline text color. |
| Heading |
Adds the main section heading. |
| Heading Size |
Sets the heading size from H1–H6 or Large, Medium, Small. |
| Heading Weight |
Sets the heading font weight from 100 to 900. |
| Heading Case |
Sets text case: None, Uppercase, Capitalize, or Lowercase. |
| Heading Level |
Sets the semantic heading level from H1–H6. |
| Heading Family |
Uses the Default or Body font family. |
| Heading Color Style |
Applies the Default or Body color style. |
| Heading Link Style |
Applies the Default or Link style to heading links. |
| Description |
Adds rich text below the heading. |
| Text Size |
Sets description text size: Large, Medium, or Small. |
| Text Weight |
Sets text weight from 100 to 900. |
| Text Case |
Sets text case: None, Uppercase, Capitalize, or Lowercase. |
| Text Family |
Uses the Default or Heading font family. |
| Text Color Style |
Applies the Default or Headings color style. |
| Desktop Header Margin |
Sets the bottom margin on desktop. |
| Mobile Header Margin |
Sets the bottom margin on mobile. |
Icon Settings
First Icon:
| Setting |
Description |
| Image |
Adds the first icon image. |
| Text |
Adds text for the first icon. |
| Link |
Adds a link to the first icon. |
| Open in New Tab |
Opens the first icon link in a new tab. |
Second Icon:
| Setting |
Description |
| Image |
Adds the second icon image. |
| Text |
Adds text for the second icon. |
| Link |
Adds a link to the second icon. |
| Open in New Tab |
Opens the second icon link in a new tab. |
Third Icon:
| Setting |
Description |
| Image |
Adds the third icon image. |
| Text |
Adds text for the third icon. |
| Link |
Adds a link to the third icon. |
| Open in New Tab |
Opens the third icon link in a new tab. |
Video Settings
| Setting |
Description |
| Video Heading Size |
Sets video heading size: H5, H6, Large, Medium, or Small. |
| Video Heading Weight |
Sets video heading weight from 100 to 900. |
| Video Heading Case |
Sets video heading text case. |
| Video Heading Level |
Sets the semantic heading level from H1–H6. |
| Video Heading Family |
Uses the Default or Body font family. |
| Video Heading Color Style |
Applies the Default or Body color style. |
| Video Text Position |
Positions video text at Top or Bottom. |
| Enable Video Autoplay |
Enables automatic video playback. |
| Play Video on Popup |
Enables video playback in a popup when autoplay is disabled. |
| Desktop Text Alignment |
Sets video text alignment on desktop. |
| Mobile Text Alignment |
Sets video text alignment on mobile. |
Grid Settings
| Setting |
Description |
| Desktop Card Width |
Sets video card width from 200–500px. |
| Mobile Card Width |
Sets video card width from 140–360px. |
| Desktop Grid Spacing |
Controls spacing between video cards on desktop. |
| Mobile Grid Spacing |
Controls spacing between video cards on mobile. |
Slideshow Settings
| Setting |
Description |
| Slideshow Arrows |
Shows or hides slideshow navigation arrows. |
| Slideshow Button Type |
Sets the arrow style: Primary, Secondary, or Link. |
| Slideshow Pagination |
Shows or hides pagination indicators. |
| Slideshow Auto Play |
Enables automatic slideshow playback. |
| Slideshow Interval |
Sets the autoplay interval from 2000–9000ms. |
Layout Settings
| Setting |
Description |
| Layout Style |
Displays reels as a Grid or Slideshow. |
| Desktop Image Height |
Sets desktop video height: Adapt, 50vh, 60vh, 80vh, or 100vh. |
| Mobile Image Height |
Sets mobile video height: Adapt, 38vh, 48vh, 60vh, or 100vh. |
| Container Layout |
Sets the container style: Container, Contained Content, or Container Fluid. |
| Container Size |
Sets the container width from 50–100%. |
| Desktop Text Alignment |
Sets section text alignment on desktop. |
| Mobile Text Alignment |
Sets section text alignment on mobile. |
| Color Scheme |
Selects the section color scheme. |
Inner Spacing
| Setting |
Desktop |
Mobile |
| Top |
70px |
35px |
| Bottom |
70px |
35px |
| Left |
50px |
15px |
| Right |
50px |
15px |
Outer Spacing
| Setting |
Desktop |
Mobile |
| Top |
0px |
0px |
| Bottom |
0px |
0px |
| Left |
0px |
0px |
| Right |
0px |
0px |
Block Configuration
| Setting |
Description |
| Shopify Video |
Adds a Shopify-hosted video. |
| Desktop Cover Image |
Adds a desktop video cover image. |
| Desktop Gradient |
Adds a desktop background overlay. |
| Mobile Cover Image |
Adds a mobile video cover image. |
| Mobile Gradient |
Adds a mobile background overlay. |
| Embedded Video |
Adds a YouTube or Vimeo video URL. |
| Alt Text |
Adds alternative text for the video. |
| Heading |
Adds the video reel heading. |
| Color Scheme |
Selects the video card color scheme. |