Heading
Section title beside the accordion (for example A Scent-perfect pairing.). Leave blank to hide the heading.
Usage
- Use a short headline that introduces the accordion topics.
- Keep it to one line for a clean split layout.
Collapsible image content
Collapsible image content pairs a large product or lifestyle image with an accordion list beside it. Add up to eight collapsible items, each with a question-style heading and rich-text answer, plus section-level colors for the background, heading, and accordion rows.
Storefront preview
Storefront preview
Where to find this section
Where to find this
Themes → Customize → Add section → Collapsible image content
Find it under Images and media in the section picker. After adding the section, use Add Collapsible item for each accordion row (up to 8).
Theme editor section list
Content
Heading color
Color of the section heading. Default color: #1D1D1D.
Usage
- Match your primary text color from theme settings.
- Ensure enough contrast against the section background.
Image
Image
Photo shown in the left column on desktop (stacks above the accordion on mobile). Recommended size: 750 px wide; use 1500 px for retina quality.
Usage
- Use a product or lifestyle shot that complements the accordion copy.
- One image applies to the whole section.
Image alt text
Describes the image for accessibility and SEO. Falls back to the image file alt text or section heading when left blank.
Usage
- Write a short, accurate description of what appears in the photo.
Image ratio
Sets the crop shape of the section image. Default: Auto – Original.
Usage
- Use Auto – Original to respect the uploaded image proportions.
- Pick a fixed ratio for a consistent portrait or square frame.
Image corner radius
Rounds the image corners using presets from Theme settings → Border radius. Default: Extra large radius.
Usage
- Pick a preset that matches rounded corners used elsewhere on your store.
Colors
Background color
Fill color behind the image and accordion area. Default color: #FFFFFF.
Usage
- Use white or a soft brand tint to separate this section from neighbors.
Collapsible question color
Color of each accordion row heading. Default color: #000000.
Usage
- Match your body text color for readable question labels.
Collapsible border color
Color of the divider lines between accordion rows. Default color: #EDEDED.
Usage
- Use a light gray for subtle separation between items.
- Darken slightly if rows are hard to distinguish on your background color.
Collapsible item block
Heading
Question or label shown on the accordion row (for example Lasts from morning to midnight.). Required for the row to appear on the storefront.
Usage
- Phrase each row as a short benefit or question shoppers might ask.
- Each Collapsible item block adds one row.
Content
Rich-text answer revealed when the row is expanded. Supports bold, italic, links, and lists.
Usage
- Add one or two sentences that expand on the heading.
- Leave blank to show a heading-only row with no expanded body.
Open by default
Expands this accordion row when the page first loads. Default: Off.
Usage
- Turn on for the most important answer you want visible immediately.
- Keep off so all rows start collapsed for a compact layout.
Section spacing
Section spacing
Adds empty space above and below this section on desktop and mobile.
Usage
- Top padding (desktop) — Default: 40 px · 0–100 px
- Bottom padding (desktop) — Default: 40 px · 0–100 px
- Top padding (mobile) — Default: 40 px · 0–100 px
- Bottom padding (mobile) — Default: 40 px · 0–100 px
- When you move the slider, the gap above or below grows or shrinks