Skip to content

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

IDTypeLabelDefaultInfo
header
background_imageimage_pickerBackground Image
overlay_opacityrangeOverlay Opacity50
header
titletextTitleJoin The Gateway Voyage Online
descriptionrichtextDescription
header
button_texttextButton TextEnroll Now
header
coming_sooncheckboxEnable Coming Soon ModefalseWhen 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_titletextComing Soon HeadingLaunching March 10th
coming_soon_datetextLaunch Date LabelMarch 10, 2026Displayed below the heading in green text.
coming_soon_descriptionrichtextComing Soon Description

Blocks

Feature Pill

  • Type: feature_pill
IDTypeLabelDefault
iconselectIconcheck
texttextTextFeature

Presets

  • Product GV CTA Banner

Usage

This section can be added via the Shopify theme editor.

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