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
-
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.
-
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.
-
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 |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Accordion”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.