Shoppable Grid is a Shopify theme section in the Section Star library. Turn your content into a storefront — display images and videos in a stunning grid that expands into a full-screen shoppable experience. Shoppers swipe or click through each item and tap straight to the product.
Live demo
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Grid Design
| Setting | Type | Default |
|---|---|---|
| Grid Gap | Number | 15 |
| Mobile Columns | Select (1 column, 2 columns) | 1fr 1fr |
Media Design
| Setting | Type | Default |
|---|---|---|
| Aspect Ratio | Select (16:9, 4:3, 1:1, 3:4, 9:16, Auto) | 3 / 4 |
| Border Radius | Range | 8 |
| Modal Media Border Radius | Range | 8 |
| Shadow on Media | Checkbox | Off |
| Zoom on Hover | Checkbox | On |
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 below Headline | Number | 15 |
Image block settings
| Setting | Type | Default |
|---|---|---|
| Image | Image | — |
Shoppable Product
| Setting | Type | Default |
|---|---|---|
| Show Product in Expanded View | Checkbox | Off |
| Product | Product | — |
| Button Text | Text | Shop now |
Video block settings
| Setting | Type | Default |
|---|---|---|
| Video | Video | — |
| Poster Image (optional) | Image | — |
| Autoplay in Grid | Checkbox | On |
| Loop Video | Checkbox | On |
| Mute in Expanded View | Checkbox | Off |
Shoppable Product
| Setting | Type | Default |
|---|---|---|
| Show Product in Expanded View | Checkbox | Off |
| Product | Product | — |
| Button Text | Text | Shop now |
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 “Shoppable 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.