Page Header

File: sections/page-header.liquid

Templates: blog.json, page.chapters.json, page.dolphin-energy-request.json, page.dolphin-energy.json, page.general-information.json, page.locations.json, page.our-purpose.json, page.people.json, page.resources.json, page.stories-home.json, page.waitlist.json, search.json

Description

Page Header

Renders a hero-style page header with a title, subtitle, and up to two buttons. Supports an optional background image with dark overlay, fixed height mode, and textured borders.

Features:

• Configurable title and subtitle
• Up to two CTA buttons (primary and white styles)
• Optional background image with dark overlay
• Fixed-height mode (380px)
• Textured borders (top, bottom, or both)
• Special handling for search results template

Settings:

• title (text) — Main heading text
• subtitle (text) — Subheading text
• button1_text (text) — First button label
• button1_link (url) — First button URL
• button2_text (text) — Second button label
• button2_link (url) — Second button URL
• background_image (image_picker) — Optional background image
• full_height (checkbox) — Enable fixed 380px height
• textured_borders (select) — Textured border position (none/top/bottom/both)

Blocks: None

Snippets Used:

• button — Renders styled CTA buttons

Dependencies:

• Tailwind CSS (application.css) for layout and styling
• Legacy CSS classes ‘has-texture-border-top’, ‘has-texture-border-bottom’, ‘has-texture-border’, ‘bg-texture-medium’ from theme.css

Tailwind Status: Partial Uses Tailwind for most layout (py-12, text-5xl, flex, etc.) but relies on legacy texture classes for border and background effects.

Settings

ID	Type	Label	Default	Info
title	text	Title
subtitle	text	Subtitle
button1_text	text	Button 1 Text
button1_link	url	Button 1 Link
button2_text	text	Button 2 Text
button2_link	url	Button 2 Link
background_image	image_picker	Background Image
full_height	checkbox	Full Height (380px)
textured_borders	select	Textured Borders

Presets

• Page Header

Usage

This section can be added via the Shopify theme editor.

{% section 'page-header' %}