Split Image Section

File: sections/tmi-split-image-banner.liquid

Templates: page.dolphin-energy.json, page.donate-thank-you.json, page.locations.json, page.our-purpose.json, page.people.json, page.waitlist.json

Description

Split Image Banner Section

This section displays a responsive split-screen banner with two side-by-side images. Each image area is clickable and includes centered text overlay.

Features:

• Two equal-width image areas that stack vertically on mobile
• Each image area is a clickable link to a customizable URL
• Text overlay centered on each image
• Responsive design (full width on mobile, split on desktop)
• Default fallback images and URLs if not specified in settings

Customization:

• Left and right image selection via image_picker
• Custom text for each side
• Custom URL destinations for each side

CSS Classes:

• Uses flexbox for layout
• Bootstrap-style column classes for responsive behavior
• Background positioning and sizing controls

Settings

ID	Type	Label	Default	Info
left_url	url	Left URL
left_text	text	Left Text	Learn More About <br/> Our People
left_image	image_picker	Left Image
right_url	url	Right URL
right_text	text	Right Text	Learn More About <br/> Our Locations
right_image	image_picker	Right Image

Presets

• Split Image Banner (Category: Image)

Usage

This section can be added via the Shopify theme editor.

{% section 'tmi-split-image-banner' %}