Product GV CTA Banner

File: sections/product-gateway-voyage-cta.liquid

Templates: product.gateway-voyage.json

Screenshot not yet added.
Save as docs/src/assets/screenshots/section-product-gateway-voyage-cta.png

Description

Product Gateway Voyage CTA Section

Full-width CTA banner for the Gateway Voyage product landing page. Visually matches the standard CTA Banner section but includes a “Book Now” modal with quantity selector that feeds into the standard program booking flow (session storage → /pages/book-program).

This section is designed for a product template where the product has one or a few variants and does NOT need a variant listing table. Instead, the first available variant is automatically selected when the user clicks the CTA button.

Features:

• Background image with dark overlay
• Feature pills with icons
• “Enroll Now” button triggers Book Now modal (or Coming Soon modal)
• Quantity selector in Book Now modal
• Session storage integration for booking data
• Redirects to /pages/book-program after booking
• Intercepts other on-page links to product URL so they also trigger the modal
• Section-scoped IDs to support multiple instances
• Accessible modal (role=dialog, aria attributes, Escape/focus handling)
• HTML-escaped dynamic content to prevent XSS
• Coming Soon mode: replaces booking flow with a HubSpot email signup modal

Dependencies:

• product (Object) — from product template context
• Variant metafields: start_date, end_date, trainers, location, country, time_zone, program_type
• Product metafields: open_enrollment
• Session storage key: bookingData
• snippets/icon.liquid

Tailwind Status: Full

Settings

ID	Type	Label	Default	Info
“	header
background_image	image_picker	Background Image
overlay_opacity	range	Overlay Opacity	50
“	header
title	text	Title	Join The Gateway Voyage Online
description	richtext	Description
“	header
button_text	text	Button Text	Enroll Now
“	header
coming_soon	checkbox	Enable Coming Soon Mode	false	When enabled, the CTA button and all on-page links to this product open a Coming Soon signup form instead of the booking flow.
coming_soon_title	text	Coming Soon Heading	Launching March 10th
coming_soon_date	text	Launch Date Label	March 10, 2026	Displayed below the heading in green text.
coming_soon_description	richtext	Coming Soon Description

Blocks

Feature Pill

• Type: feature_pill

ID	Type	Label	Default
icon	select	Icon	check
text	text	Text	Feature

Presets

• Product GV CTA Banner

Usage

This section can be added via the Shopify theme editor.

{% section 'product-gateway-voyage-cta' %}