Fit Check: Explorer
A shoppable accordion section that pairs outfit occasions with interactive product images. Each accordion row links to an image (or video) with embedded product hotspots, so visitors can browse looks and shop directly from the gallery.
Configure the Section
- In the theme editor, click Add section.
- Select Fit check: Explorer from the Fit Check category.
- Add Occasion row blocks — each row can contain an Image with product links or Video with product links block, plus text and buttons.
Section Settings
| Setting | Description |
|---|---|
| Icon style | Accordion toggle icon — Caret or Plus/minus. Default: Plus. |
| Auto-close other rows | When one row opens, close all others. Default: On. |
| Show dividers | Display divider lines between rows. Default: Off. |
| Place icon at end | Move the toggle icon to the right side. Default: Off. |
| Heading preset | Typography preset for row headings — H1 through H6. Default: H4. |
| Image position | Gallery placement — Left or Right. Default: Right. |
| Border radius | Rounded corners on gallery media. Range: 0–32px. Default: 0. |
| Content alignment | Vertical alignment of the accordion panel — Top, Center, or Bottom. Default: Center. |
| Gap between panels | Spacing between accordion and gallery. Range: 0–100px. Default: 32px. |
| Section width | Page width, Full width, or Custom (60–100%). Default: Page width. |
| Padding | Top and bottom padding. Range: 0–100px. Default: 32px. |
Row Block Settings
Each Occasion row block supports the following:
| Setting | Description |
|---|---|
| Heading | The occasion name displayed in the accordion (e.g., “Date night”, “Coffee run”). |
| Open by default | Whether this row starts expanded. Default: Off. |
Child Blocks
Each row accepts child blocks for its content:
- Image with product links — A shoppable image with up to 5 tagged products. Visitors hover to see product cards.
- Video with product links — A shoppable video with tagged products.
- Text — Descriptive text about the occasion or styling tips.
- Button — Call-to-action link (e.g., “Shop this look”).
- Custom Liquid — Inline Liquid code.
- App blocks — Third-party app content.
How It Works
When a visitor clicks an accordion row, the gallery panel switches to show that row’s media block (image or video with product links). The product links inside the media block remain fully interactive — visitors can hover to reveal product cards and click through to product pages.
Responsive Behavior
On screens narrower than 750px, the section stacks vertically with the media on top and the accordion below.