Accordion Feature is a Shopify theme section in the Section Star library. Show a grid of featured blocks that dynamically slide open on hover.
About the Accordion Feature section
The Accordion Feature Grid is a dynamic and responsive Shopify section that allows you to showcase the features of your products in a stylish and interactive accordion layout. The features are displayed in a grid format, with a headline, descriptive text, and a clickable "Call to Action" button that can be linked to any URL. Each feature includes an image that can zoom in upon hovering for better details. This customizable section is perfect for providing a visually appealing and organized display of your products' features.
Live demo
Use cases
-
Presenting product features: Use the accordion feature grid to showcase your product’s diverse features in detail with high-definition images.
-
Highlighting services: If your e-commerce store offers services, each service can be emphasized in individual sections of the accordion together with detailed descriptions.
-
Showcasing collections: You can also utilize the feature grid to highlight different collections available in your store. Use high-quality images that capture the essence of each collection and link to the respective collection pages.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Feature Design
Set the design for the feature section
| Setting | Type | Default |
|---|---|---|
| Accordion Text Color | Color | #fff |
| Accordion Headline Color | Color | #fff |
| Headline Size | Range | 20 |
| Mobile Headline Size | Range | 20 |
| Vertical Alignment | Select (Top, Center, Bottom) | center |
| Spacing between Elements | Number | 10 |
| Horizontal Alignment | Select (Left, Center, Right) | center |
| Text Alignment | Text alignment | center |
| Cover Background | Color or gradient | linear-gradient(164deg, #111 0%, #555… |
| Cover Opacity | Range | 25 |
| Cover Opacity Increase on Hover | Range | 25 |
| Border Radius | Number | 5 |
| Grid Gap | Number | 10 |
| Mobile Grid Gap | Number | 10 |
| Grid Height | Number | 300 |
| Mobile Grid Height | Number | 300 |
| Mobile Display | Select (Accordion, Stacked) | accordion |
| Round Borders on Media | Range | 5 |
| Subtle Shadow on Text | Checkbox | On |
| Subtle Shadow on Media | Checkbox | On |
| Zoom on Hover | Checkbox | On |
| Image Width (size requested from Shopify) | Number | 1000 |
| Mobile Image Width (size requested from Shopify) | Number | 600 |
| Lazy Load Images | Checkbox | On |
Button Style
Set the look and feel of the button
| Setting | Type | Default |
|---|---|---|
| Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Button Text Color | Color | #fff |
| Padding Top/Bottom | Number | 8 |
| Padding Left/Right | Number | 25 |
| Border Radius | Number | 5 |
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>Check out our Products</b> |
| Text | Inline rich text | Shop our extensive range of amazing p… |
| Spacing between Headline and Features | Number | 15 |
Feature block settings
| Setting | Type | Default |
|---|---|---|
| Image | Image | — |
| Headline | Inline rich text | <b>Feature Headline</b> |
| Call to Action | Inline rich text | Shop Now |
| Call to Action Link | URL | — |
| Link entire element? | Checkbox | Off |
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 Feature”.
- 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.