Quote Banner

File: sections/quote-banner.liquid

Templates: 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' %}