Media Banner
Overview
Displays video or image-based banner content with responsive media, overlay gradients, customizable text, layout, and spacing controls.
| Setting |
Description |
| Section Video |
Select a Shopify-hosted video. |
| Embedded Video |
Add a YouTube or Vimeo video URL. |
| Desktop Image |
Select the desktop banner image. |
| Desktop Gradient |
Add a gradient overlay to the desktop image. |
| Mobile Image |
Select the mobile banner image. |
| Mobile Gradient |
Add a gradient overlay to the mobile image. |
| Video Alt Text |
Add alternative text for the video. |
| Enable Video Autoplay |
Enable or disable video autoplay. |
| Setting |
Description |
| Tagline |
Add a short label above the heading. |
| Tagline Size |
Choose Large, Medium, or Small. |
| Tagline Weight |
Set the tagline weight from Thin to Black. |
| Tagline Case |
Choose None, Uppercase, Capitalize, or Lowercase. |
| Tagline Family |
Use the Default or Heading font family. |
| Tagline Background |
Set the tagline background color. |
| Tagline Color |
Set the tagline text color. |
| Heading |
Add the main banner heading. |
| Heading Size |
Choose H1–H6, Large, Medium, or Small. |
| Heading Weight |
Set the heading weight from Thin to Black. |
| Heading Case |
Choose None, Uppercase, Capitalize, or Lowercase. |
| Heading Level |
Set the semantic heading level from H1 to H6. |
| Heading Family |
Use the Default or Body font family. |
| Heading Color Style |
Apply the Default or Body color style. |
| Heading Link Style |
Apply the Default or Link style. |
| Description |
Add supporting rich text. |
| Text Size |
Choose Large, Medium, or Small. |
| Text Weight |
Set the text weight from Thin to Black. |
| Text Case |
Choose None, Uppercase, Capitalize, or Lowercase. |
| Text Family |
Use the Default or Heading font family. |
| Text Color Style |
Apply the Default or Headings color style. |
| Header Container Size |
Set the header content width from 50% to 100%. |
| Header Margin – Desktop |
Set the top margin on desktop. |
| Header Margin – Mobile |
Set the top margin on mobile. |
Layout Settings
| Setting |
Description |
| Desktop Height |
Choose Adapt, 50vh, 64vh, 80vh, or 100vh. |
| Mobile Height |
Choose Adapt, 38vh, 48vh, 60vh, or 100vh. |
| Container Layout |
Choose Container, Contained Content, or Container Fluid. |
| Container Size |
Set the container width from 50% to 100%. |
| Desktop Text Alignment |
Set the text alignment on desktop. |
| Mobile Text Alignment |
Set the text alignment on mobile. |
| Color Scheme |
Select the color scheme for the section. |
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 |