- File:
sections/image-reveal-header.liquid - Add section category: Image
Section settings
| Setting | Type | Options | Default | Notes |
|---|---|---|---|---|
| Image | image_picker | 2600px wide recommended. The focal point keeps the subject in view. | ||
| Mobile image | image_picker | Optional, for a different crop on phones. | ||
| Image credit | text | Shown from a small i button in the corner. |
Content
| Setting | Type | Options | Default | Notes |
|---|---|---|---|---|
| Heading | text | Image reveal header | ||
| Heading size | select | Small, Medium, Large | Large | |
| Text | richtext | <p>Introduce a page or a collection. As visitors scroll, the image lifts to reveal this text.</p> | ||
| Button label | text | |||
| Button link | url | |||
| Content alignment | select | Left, Center | Left |
Callout
| Setting | Type | Options | Default | Notes |
|---|---|---|---|---|
| Show callout | checkbox | Off | ||
| Callout heading | text | Free images | Shown when section.settings.show_callout. |
|
| Callout text | richtext | <p>Highlight a short message beside the heading.</p> | Shown when section.settings.show_callout. |
|
| Callout link label | text | Shown when section.settings.show_callout. |
||
| Callout link | url | Shown when section.settings.show_callout. |
Layout and motion
| Setting | Type | Options | Default | Notes |
|---|---|---|---|---|
| Height | select | Medium, Large, Full screen | Large | |
| Overlay darkness | range | 0 to 80 %, step 5 | 40 % | Keeps the light text readable over the image. |
| Lift the image to reveal the heading | checkbox | On | As visitors scroll, the image edge rises over the content, which then shows in the color scheme. Off for visitors who prefer reduced motion. | |
| Picture drifts as you scroll | checkbox | On | ||
| Color scheme | color_scheme | scheme-1 | Used for the revealed content and the page below. |
Custom colors
| Setting | Type | Options | Default | Notes |
|---|---|---|---|---|
| Use custom colors | checkbox | Off | Overrides the color scheme for this section only. | |
| Background | color | #faf6f0 | Shown when section.settings.use_custom_colors. |
|
| Text | color | #2e241b | Shown when section.settings.use_custom_colors. |
|
| Button | color | #2e241b | Shown when section.settings.use_custom_colors. |
|
| Button label | color | #ffffff | Shown when section.settings.use_custom_colors. |
|
| Accent and links | color | #546633 | Keep text and background at a contrast of 4.5 to 1. Shown when section.settings.use_custom_colors. |
|
| Bottom padding | range | 0 to 120 px, step 4 | 0 px |