Programs

File: sections/programs.liquid

Description

Programs Slider

Displays a series of program collections in a slider format. Each slide features a program title, description, a right-aligned image, and buttons to learn more or view all programs. Auto-slides every 5 seconds with manual dot navigation.

Features:

• Dynamically loads program collections via blocks
• Right-aligned image with left-aligned content per slide
• Clickable pagination dots for manual navigation
• Auto-adjusts container height based on tallest slide
• Auto-cycles through slides every 5 seconds

Settings:

• category_label (text) — Label shown above each collection title, default “Programs”
• learn_more_text (text) — Text for the learn more button, default “Learn more”
• all_programs_text (text) — Text for the all programs button, default “All programs”
• all_programs_url (url) — URL for the all programs button

Blocks:

• program (limit: 6) — A program collection slide
  • collection (collection) — Program collection to display
  • description (textarea) — Program description
  • benefit_1..8 (checkbox) — Benefit toggles

Snippets Used: None

Dependencies:

• Tailwind CSS (application.css) for layout and styling
• Inline <script> for slider functionality

Tailwind Status: Full

Settings

ID	Type	Label	Default	Info
“	header
category_label	text	Category label	Programs
learn_more_text	text	Learn more button text	Learn more
all_programs_text	text	All programs button text	All programs
all_programs_url	url	All programs URL

Blocks

program

• Type: program
• Limit: 6

ID	Type	Label	Default
collection	collection	program Collection
description	textarea	Description
“	header
benefit_1	checkbox	Benefit 1
benefit_2	checkbox	Benefit 2
benefit_3	checkbox	Benefit 3
benefit_4	checkbox	Benefit 4
benefit_5	checkbox	Benefit 5
benefit_6	checkbox	Benefit 6
benefit_7	checkbox	Benefit 7
benefit_8	checkbox	Benefit 8

Presets

• Programs

Usage

This section can be added via the Shopify theme editor.

{% section 'programs' %}