Schema-only template for a product cards section.

Introduction

A card section organizes products into visually distinct blocks, typically arranged in a grid or carousel to enable quick browsing and comparison.

Common in e-commerce, feature pages, and landing pages, product cards highlight key details to drive engagement and conversions.

Personalizing the products shown, such as surfacing items based on browsing history or purchase intent, and testing different layouts, imagery, or calls to action can improve relevance and boost performance.

Usage

To add this component to your workspace, run:

npx croct@latest use croct://ui/block/product-cards-section
Explore or help us improve this template
View source
Other templates using
CroctCroct
A template for running AB tests on a Sanity project.
Sanity CMS + AB testing

A template for running AB tests on a Sanity project.

CroctCroct
A template for adding personalized content on a Sanity project.
Sanity CMS + personalization

A template for adding personalized content on a Sanity project.

CroctCroct
An announcement bar with a location-based message.
Geomarketing strategy

An announcement bar with a location-based message.

CroctCroct
A template for adding personalized content on a Strapi project.
Strapi CMS + personalization

A template for adding personalized content on a Strapi project.

CroctCroct
Related templates
A card with carousel component built with Mantine.
Card with carousel

A card with carousel component built with Mantine.

MantineMantine

Start building in seconds

Paste the following command in your terminal and let the CLI do the rest.

npx croct@latest use croct://ui/block/product-cards-section