CTA Banner
File:
sections/cta-banner.liquid
Description
CTA Banner Section
Full-width banner with a background image, dark overlay, headline, description, feature pills with icons, and a call-to-action button. Designed as a closing/conversion section on landing pages.
Layout:
- Desktop (lg+): Title left, description right; pills + CTA in a row below
- Mobile (<lg): Stacked — title, description, pills, CTA
Settings:
- background_image (image_picker) — Full-width background photo
- overlay_opacity (range) — Dark overlay strength (0–100, default 50)
- title (text) — Large headline (white, uppercase)
- description (richtext) — Supporting copy (white)
- button_text (text) — CTA button label (default “Enroll Now”)
- button_url (url) — CTA destination
Blocks:
- feature_pill: icon (select from icon snippet) + text (text) Rendered as white pills with icon and text in a horizontal row.
Snippets Used:
- icon: SVG icon rendering by name
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 | |
button_url | url | Button Link |
Blocks
Feature Pill
- Type:
feature_pill
| ID | Type | Label | Default |
|---|---|---|---|
icon | select | Icon | check |
text | text | Text | Feature |
Presets
- CTA Banner
Usage
This section can be added via the Shopify theme editor.
{% section 'cta-banner' %}