# Accordion

> Show a grid of images and videos that dynamically slide open on hover.

URL: https://sectionstar.app/sections/accordion/
Source: Section Star — https://sectionstar.app
Updated: 2026-10-26T00:00:21.885Z

---

**Accordion** is a Shopify theme section in the Section Star library. Show a grid of images and videos that dynamically slide open on hover.

## About the Accordion section

The Accordion section is a flexible, responsive module you can add to your Shopify store. It blends the essential combination of images or videos and allows certain customizations for the media. This section can be set to serve as image or video containers or both. The Accordion section with media can be resized and made responsive for various screen sizes and devices, offering a great UX to diverse user devices.

## Live demo

## Use cases

1. **Product Demonstration Videos**: The Accordion section can be used to display product demonstration videos to help customers understand how the product functions and its features.

2. **Feature Products Images** If you have a few products you want to feature for a specific period or season, use the Accordion section to create an impressive display for them.

3. **Brand or Campaign Videos**: If you have a brand or promotional video you want your visitors to see, this is a perfect place for it. Using videos or pictures will engage more visitors and potentially lead to higher conversion rates.

## Settings

Every setting below appears in the Shopify theme customizer once the section is published.

### Grid Design
Set settings for the grid

| Setting | Type | Default |
| --- | --- | --- |
| Gap Between Images | Number | 5 |
| Mobile Display | Select (Accordion, Stacked) | accordion |

### Media Design
Set the display for the images

| Setting | Type | Default |
| --- | --- | --- |
| Height of Images | Number | 300 |
| Round Borders on Media | Range | 5 |
| Subtle Shadow on Media | Checkbox | On |

### Headline
Set text for the headline

| Setting | Type | Default |
| --- | --- | --- |
| Text Alignment | Text alignment | center |
| Mobile Text Alignment | Text alignment | center |
| Headline | Inline rich text | <b>Sample Headline</b> |
| Text | Inline rich text | Use this block to add a description. … |
| Spacing between Headline and Features | Number | 15 |

### Image block settings

| Setting | Type | Default |
| --- | --- | --- |
| Image | Image | — |
| Optional Link | URL | — |

### Video block settings

| Setting | Type | Default |
| --- | --- | --- |
| Video | Video | — |
| Optional Link | URL | — |
| Play Inline | Checkbox | On |
| Autoplay | Checkbox | Off |
| Loop Video | Checkbox | On |
| Show Video Controls | Checkbox | Off |
| Mute Video | Checkbox | On |