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
- Product Showcases: Highlight featured products in an appealing grid format with images, brief descriptions, and direct links to product pages for quick purchase.
- Customer Testimonials: Display customer reviews with their photos and snippets of their feedback, making customer experiences more relatable and impactful.
- Blog Highlights: Showcase popular blog posts with featured images, titles, and excerpts, guiding visitors to explore the content more thoroughly.
- Promotional Offers: Create visually appealing promotional banners with details on current offers, discount codes, and links to relevant collections or products.
- 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 |
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 “Card 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.