Grid Hero is a Shopify theme section in the Section Star library. Create amazing grids of video and images. Multiple layouts. Slick animations. Converts to a slideshow on mobile.
About the Grid Hero section
The Grid Premium section provides a highly customizable grid layout designed to display various media types, including images, videos, and custom liquid content. This section uses advanced CSS and JavaScript to ensure seamless integration and performance across devices, including a mobile-optimized slideshow with autoplay functionality.
Live demo
Use cases
- Product Highlights: Use the Grid Premium section to showcase your top-selling products or new arrivals in a visually appealing grid format.
- Brand Stories: Incorporate videos and images about your brand story to engage customers and build brand loyalty.
- Promotional Banners: Create stunning promotional banners to highlight ongoing sales, discounts, or special events.
- Customer Reviews: Display customer review quotes alongside product images or videos to build trust and showcase product satisfaction.
- Custom HTML Content: Use the custom liquid option to add unique HTML content, such as embedded social media posts or third-party widgets.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Grid Design
Set the design for your grid
| Setting | Type | Default |
|---|---|---|
| Text Size | Range | 20 |
| Text Color | Color | #fff |
| Show Text Shadow | Checkbox | Off |
| Height of Tile | Number | 250 |
| Gap Between Tiles | Number | 20 |
| Height of Tile (Mobile) | Number | 250 |
| Cover Background | Color or gradient | linear-gradient(164deg, #111 0%, #555… |
| Cover Opacity | Range | 25 |
| Grid Type | Select (Feature Left, Feature Right, 2 Column, 3 Column, 4 Column, 5 Column) | feature-left |
| Round Borders on Tiles | Range | 5 |
| Subtle Shadow on Tiles | 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 |
Mobile Slideshow Design
Set the design for the mobile 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 |
| 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 |
|---|---|---|
| Background Image | Image | — |
| Headline | Inline rich text | <b>Feature Headline</b> |
| Text (optional) | Inline rich text | This is sample text to compliment the… |
| Show Arrow on Hover? | Checkbox | On |
| Tile link (optional) | URL | — |
Video block settings
| Setting | Type | Default |
|---|---|---|
| Video | Video | — |
| Headline | Inline rich text | <b>Feature Headline</b> |
| Text (optional) | Inline rich text | This is sample text to compliment the… |
| Show Arrow on Hover? | Checkbox | On |
| Tile link (optional) | URL | — |
Additional Video Settings
Setup your videos with autoplay and more
| Setting | Type | Default |
|---|---|---|
| Play Inline | Checkbox | On |
| Autoplay | Checkbox | On |
| Loop Video | Checkbox | On |
| Show Video Controls | Checkbox | Off |
| Mute Video | Checkbox | On |
Custom Liquid block settings
| Setting | Type | Default |
|---|---|---|
| Custom Liquid Code | Liquid | — |
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 “Grid Hero”.
- 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.