Benefits Section
File:
sections/benefits.liquid
Description
Benefits Section
Displays a configurable grid of benefit items, each featuring an icon image, a title, and a description. The section includes a centered heading and body copy above the benefits grid. Designed for highlighting product or program advantages in a visually scannable layout.
Features:
- Centered section heading styled in the brand green (text-mi-green)
- Optional body copy below the heading for context
- Responsive 3-column grid (single column on mobile, 3 columns on md+)
- Each benefit block displays an icon image (max 88px), title, and description
- Supports up to 6 benefit blocks (enforced by schema limit)
- All images are rendered at master resolution with lazy loading via img_url
Settings:
- heading (text) — Section heading displayed above the benefits grid
- copy (textarea) — Supporting body copy displayed below the heading
Blocks:
- benefit: An individual benefit item with the following settings:
- image (image_picker) — Icon or illustration image for the benefit
- title (text) — Benefit title text
- description (textarea) — Benefit description text Limit: 6 blocks maximum
Snippets Used: None
Dependencies:
- Tailwind CSS (uses text-mi-green custom color from tailwind.config.js)
Tailwind Status: Full All styling uses Tailwind utility classes including grid layout, spacing, typography, and the custom brand color (text-mi-green).
Settings
| ID | Type | Label | Default | Info |
|---|---|---|---|---|
heading | text | Heading | ||
copy | textarea | Copy |
Blocks
Benefit
- Type:
benefit - Limit: 6
| ID | Type | Label | Default |
|---|---|---|---|
image | image_picker | Icon Image | |
title | text | Title | |
description | textarea | Description |
Presets
- Benefits
Usage
This section can be added via the Shopify theme editor.
{% section 'benefits' %}