# Card Grid

> Showcase products in a polished card grid — flexible images, text, and calls to action designed to sell.

URL: https://sectionstar.app/sections/card-grid/
Source: Section Star — https://sectionstar.app
Updated: 2026-10-26T00:00:21.885Z

---

**Card Grid** is a Shopify theme section in the Section Star library. Showcase products in a polished card grid — flexible images, text, and calls to action designed to sell.

## About the Card Grid section

The **Card Grid** section is a versatile, customizable grid-based layout designed for showcasing different features, products, or any other items through visually appealing cards. Each card can include an image, headline, description, and a call-to-action (CTA) button. The grid adapts seamlessly across devices, offering either a slideshow view or a multi-column stacked display on mobile.

## Live demo

## Use cases

1. **Product Showcases**: Highlight featured products in an appealing grid format with images, brief descriptions, and direct links to product pages for quick purchase.
2. **Customer Testimonials**: Display customer reviews with their photos and snippets of their feedback, making customer experiences more relatable and impactful.
3. **Blog Highlights**: Showcase popular blog posts with featured images, titles, and excerpts, guiding visitors to explore the content more thoroughly.
4. **Promotional Offers**: Create visually appealing promotional banners with details on current offers, discount codes, and links to relevant collections or products.
5. **Team Members Introduction**: Introduce your team members with their photos, roles, and short biographies, adding a personal touch to your store's about page.

## Settings

Every setting below appears in the Shopify theme customizer once the section is published.

### Grid Design
Set the design for the feature grid

| Setting | Type | Default |
| --- | --- | --- |
| Columns | Select (1 column, 2 columns, 3 columns, 4 columns, 5 columns, Auto) | auto |
| Gap Between Cards | Number | 20 |

### Card Design
Set the design for the feature section

| Setting | Type | Default |
| --- | --- | --- |
| Uniform height? | Checkbox | On |
| Vertical Alignment | Select (Top, Center, Bottom) | center |
| Make Entire Card Clickable? | Checkbox | Off |
| Hide button? | Checkbox | Off |
| Stack headline, text, and button? | Checkbox | Off |
| Card Text Alignment | Text alignment | left |
| Spacing between Elements | Number | 5 |
| Card Padding | Number | 10 |
| Card Text Size | Range | 13 |
| Card Headline Size | Range | 18 |
| Card Background Color | Color | #fff |
| Card Text Color | Color | #111 |
| Round Borders on Card | Range | 5 |
| Subtle Shadow on Card | Checkbox | On |
| Show Hover Animation on Card | Checkbox | On |
| Show the description? | Checkbox | On |
| Truncate description? | Checkbox | On |
| Truncate Length | Number | 50 |

### Button Style
Set the look and feel of the button

| Setting | Type | Default |
| --- | --- | --- |
| Padding Top/Bottom | Number | 5 |
| Padding Left/Right | Number | 5 |
| Round Borders on Button | Range | 5 |
| Border Size on Button | Range | 0 |
| Border Color on Button | Color | #888 |
| Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Button Text Color | Color | #fff |
| Button Text Size | Range | 13 |

### Media
Set the design for your media

| Setting | Type | Default |
| --- | --- | --- |
| Media Aspect Ratio | Select (21:9, 16:9, 4:3, 1:1, 3:4, 9:16…) | 4 / 3 |
| Media Aspect Ratio (mobile) | Select (21:9, 16:9, 4:3, 1:1, 9:16, Auto) | 4 / 3 |

### Mobile Display
Set the mobile display

| Setting | Type | Default |
| --- | --- | --- |
| Mobile Display | Select (Slideshow, Stacked) | slideshow |
| Columns (when stacked) | Select (1 column, 2 columns, 3 columns) | 1fr |
| Slideshow Progress Background Color | Color or gradient | linear-gradient(177deg, rgba(17, 17, … |
| Slideshow Progress Foreground Color | Color or gradient | linear-gradient(177deg, rgba(17, 17, … |
| Slideshow Indicator Color | Color | #111 |
| Enable Autoplay? | Checkbox | On |
| Autoplay Time | Select (Slowest (10s), Slower (7.5s), Normal (5s), Faster (3s), Fastest (2s)) | 5000 |

### 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 | Get answers to your questions about o… |
| Spacing between Headline and Features | Number | 15 |

### Feature block settings

| Setting | Type | Default |
| --- | --- | --- |
| Background Image | Image | — |
| Headline | Inline rich text | <b>Feature Headline</b> |
| Description | Inline rich text | This is a sample description |
| Call to Action | Inline rich text | Shop Now |
| Call to Action Link | URL | — |
| Open in New Tab | Checkbox | Off |

### Product block settings

| Setting | Type | Default |
| --- | --- | --- |
| Product | Product | — |
| Headline | Inline rich text | — |
| Description | Inline rich text | — |
| Call to Action | Inline rich text | Shop Now |
| Open in New Tab | Checkbox | Off |