Quote Banner
File:
sections/quote-banner.liquidTemplates:
index.json

Description
Quote Banner
Full-width background image with an overlaid quote, attribution line, and optional source logo or text. Includes a configurable dark overlay for improved text readability.
Features:
- Full-bleed background image with object-fit cover
- Gradient placeholder when no image is set
- Adjustable dark overlay (0-80% opacity)
- Serif italic quote typography with text shadow
- Optional source logo (auto-inverted to white) or text fallback
- Text alignment: left, center, or right
- Fully responsive with mobile-centered layout
Settings:
- background_image (image_picker) — Hero background, recommended 2000px wide
- overlay_opacity (range) — Dark overlay percentage, default 0
- quote (textarea) — The quote text
- attribution (text) — Attribution line below the quote
- source_logo (image_picker) — Publication/source logo, displayed in white
- source_text (text) — Fallback text if no logo, default “The Wall Street Journal”
- text_alignment (select) — Left, center, or right, default “right”
Blocks: None
Snippets Used: None
Dependencies: None
Tailwind Status: None Styled entirely with scoped inline CSS and media queries.
Settings
| ID | Type | Label | Default | Info |
|---|---|---|---|---|
| “ | header | |||
background_image | image_picker | Background Image | Recommended: 2000px wide landscape image | |
overlay_opacity | range | Overlay Darkness | 0 | Add dark overlay to improve text readability |
| “ | header | |||
quote | textarea | Quote Text | Gateway participants can reach meditation states in one week that took me years of sitting | |
attribution | text | Attribution | 91-year-old head of a Buddhist temple, 1994 | |
| “ | header | |||
source_logo | image_picker | Source Logo | Logo will be displayed in white. If no logo, use Source Text instead. | |
source_text | text | Source Text (if no logo) | The Wall Street Journal | Displayed if no logo is provided |
| “ | header | |||
text_alignment | select | Text Alignment | right |
Presets
- Quote Banner
Usage
This section can be added via the Shopify theme editor.
{% section 'quote-banner' %}