Sliding Grid is a Shopify theme section in the Section Star library. Create an amazing sliding grid of images or video.
About the Sliding Grid section
The Sliding Grid section for Shopify is designed to provide a visually appealing and interactive slideshow for showcasing images and videos. This section is ideal for highlighting featured products, promotional content, or any visual media that grabs the attention of visitors. The grid auto-flows horizontally, providing a seamless sliding experience, with autoplay functionality for enhanced user engagement.
Live demo
Use cases
- Featured Products: Showcase your best-selling or new products on the homepage to entice visitors.
- Seasonal Promotions: Display the latest promotions, discounts, and seasonal products visually to drive sales.
- Customer Testimonials: Use video testimonials from satisfied customers to build trust and credibility.
- Brand Story: Share your brand's journey with images and videos to connect with customers on a personal level.
- Product Tutorials: Show how to use your products with step-by-step videos for better customer education and satisfaction.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Headline
Set the content and settings 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. … |
| Headline Spacing | Number | 15 |
Slide Design
Set the design for the slide
| Setting | Type | Default |
|---|---|---|
| Text Alignment | Text alignment | center |
| Mobile Text Alignment | Text alignment | center |
| Caption Spacing | Number | 5 |
Slideshow
Set settings for your slideshow
| Setting | Type | Default |
|---|---|---|
| Progress Background Color | Color or gradient | linear-gradient(177deg, rgba(17, 17, … |
| Progress Foreground Color | Color or gradient | linear-gradient(177deg, rgba(17, 17, … |
| Indicator Color | Color | #111 |
| Height of Media | Number | 250 |
| Mobile Height of Media | Number | 250 |
| Show Arrows | Checkbox | On |
| Show Indicators | Checkbox | On |
| Show Big Play Button on Videos | Checkbox | On |
| Round Borders on Media | Range | 2 |
| Subtle Shadow on Media | Checkbox | On |
| Media Aspect Ratio | Select (21:9, 16:9, 4:3, 1:1) | 4 / 3 |
| Enable Autoplay? | Checkbox | On |
| Autoplay Time | Select (Slowest (10s), Slower (7.5s), Normal (5s), Faster (3s), Fastest (2s)) | 5000 |
Image block settings
| Setting | Type | Default |
|---|---|---|
| Image | Image | — |
| Caption | Rich text | <p>Use this field to caption your sli… |
| Code (shows after the caption) | Liquid | — |
Video block settings
| Setting | Type | Default |
|---|---|---|
| Video | Video | — |
| Caption | Rich text | <p>Use this field to caption your sli… |
| Code (shows after the caption) | Liquid | — |
| Play Inline | Checkbox | On |
| Autoplay | Checkbox | On |
| 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 “Sliding Grid”.
- 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.