Featured Videos

File: sections/featured-videos.liquid

Templates: page.resources.json

Description

Featured Videos

Displays a section header and a responsive grid of embedded video cards, each with a title, description, and duration label. Videos are embedded as iframes in a 16:9 aspect ratio.

Features:

• Configurable section heading with optional link
• Responsive 3-column grid (1 column mobile, 2 on md, 3 on lg)
• Each video card includes an iframe embed, title, description, and time
• Selectable background color (white or gray)

Settings:

• heading (text) — Section heading text
• link_text (text) — Optional header link text
• link_url (url) — Optional header link URL
• background_color (select) — Background color class, default “bg-white”

Blocks:

• videos: A video card with the following settings:
  • video_url (url) — Video embed URL (e.g., YouTube embed link)
  • video_text (text) — Video title
  • video_description (textarea) — Brief video description
  • video_time (text) — Video duration label

Snippets Used:

• section-title — Renders the section heading with optional link

Dependencies:

• Tailwind CSS for utility classes

Tailwind Status: Full All styling uses Tailwind utility classes for grid layout, cards, aspect ratio, spacing, and typography.

Settings

ID	Type	Label	Default	Info
heading	text	Heading
link_text	text	Link Text
link_url	url	Link URL
background_color	select	Background Color	bg-white

Blocks

Videos

• Type: videos

ID	Type	Label	Default
video_url	url	Video URL
video_text	text	Video Title
video_description	textarea	Video Description
video_time	text	Video Time

Presets

• Featured Videos (Category: Custom Sections)

Usage

This section can be added via the Shopify theme editor.

{% section 'featured-videos' %}