Program Overview

File: sections/program-overview.liquid

Templates: product.gateway-voyage.json

Description

Program Overview Section

Two-column layout with a highlights card on the left and rich content (title, quote, description) on the right. Designed for program/course landing pages but reusable for any product or service overview.

Layout:

• Desktop (lg+): Side-by-side — highlights card left, content right
• Mobile (<lg): Stacked — content on top, highlights card below

Theme Presets (color_theme setting):

• white: #FFFFFF bg, mi-green titles, mi-black quote, mi-grey description
• light-gray: gray-100 bg, same text colors
• beige: mi-beige bg, same text colors
• dark: mi-green bg, white titles/text, translucent card

Settings:

• color_theme (select) — “white” | “light-gray” | “beige” | “dark”
• title (text) — Main heading, displayed uppercase
• quote (text) — Pull quote, rendered in serif italic
• quote_author (text) — Attribution line (prefixed with em dash)
• description (richtext) — Body copy, supports multiple paragraphs
• highlights_label (text) — Card heading (default “Highlights”)
• button_text (text) — CTA button label (default “Book Now”)
• button_url (url) — CTA destination (product page, cart link, etc.)

Blocks:

• highlight: icon (select from 12 built-in SVG icons) + text (text)

Built-in Icons: monitor, layers, clock, calendar, people, microphone, dollar, star, check, globe, heart, book

Settings

ID	Type	Label	Default	Info
“	header
color_theme	select	Color Theme	white
“	header
title	text	Title	Begin The Journey Within That Changes Everything
quote	text	Quote
quote_author	text	Quote Author
description	richtext	Description
“	header
highlights_label	text	Highlights Label	Highlights
button_text	text	Button Text	Book Now
button_url	url	Button Link

Blocks

Highlight

• Type: highlight

ID	Type	Label	Default
icon	select	Icon	check
text	text	Text	Highlight item

Presets

• Program Overview

Usage

This section can be added via the Shopify theme editor.

{% section 'program-overview' %}