Product Item Block
Use Product item to understand the product-card composition used by collection grids, search results, recommendation carousels, complementary products, Featured grid, and Featured carousel product sections.
Use the Product Card guide when you need a screenshot-led workflow for styling Product card background, Product media, Product details, Product title, Product price, and Product swatches together.
What It Controls
Product item is the product-card building block. It combines media, product text, price, badges, swatches, quick add, spacing, background, border, radius, and padding into the card customers see across product listing and recommendation surfaces.
Some supporting product-card pieces are handled by Fit Check behind the scenes. Configure the Product item block settings, the parent section or template, and the available product-card content controls.
Setup Order
- Start from the parent surfaceOpen the collection, search, recommendation, Featured grid, or Featured carousel surface where the card appears.
- Review card contentChoose which product title, price, badges, swatches, and quick-add elements should appear for that surface.
- Tune spacing and surfaceAdjust card gap, background, border, radius, and padding after checking real product data.
- Check product statesPreview normal, sale, sold-out, unavailable, multi-option, and no-image products when those states exist in the catalog.
- Verify quick add and swatchesTest variant selection, swatch changes, quick-add behavior, and mobile interactions on populated products.
Where Product Items Appear
| Surface | What to review |
|---|---|
| Collection templates | Product card density, badges, filters, swatches, and quick add. |
| Search templates | Result cards, search-result badges, filters, and grid settings. |
| Product Recommendations | Related-product carousel content, card readability, and empty recommendation states. |
| Complementary products | Complementary-product card content and add-to-cart behavior when enabled. |
| Featured grid and Featured carousel | Product card content, section density, carousel controls where present, and product media consistency. |
Key Settings
| Setting group | What it controls |
|---|---|
| Gap | Space between product-card content groups. |
| Background | Optional card background treatment. |
| Border | Border style, width, opacity, and radius. |
| Padding | Card spacing around the product-card content. |
| Product-card content | Media, title, price, badges, swatches, and quick add through the parent surface and Product item block settings. |
Product-link image and video media do not use the Product item block tree. Configure those shoppable cards through Product links blocks, where each media block controls linked products, optional product image, price, custom link, product-page/quick-add action, position, and card/text style.
Data Dependencies
| Content | Data source |
|---|---|
| Media | Product images, variant images, and media settings. |
| Title | Product title. |
| Price | Product price, compare-at price, market, and sale state. |
| Badges | Product availability, sale state, search result state, and configured badge behavior. |
| Swatches | Product options, color option names, Variant Pickers and Swatches, Swatches, Variant pickers, and variant image data. |
| Quick add | Product variants, availability, selling-plan requirements, and parent-surface settings. |
QA Checklist
| State | What to confirm |
|---|---|
| No image | Cards stay stable when a product has missing or incomplete media. |
| Sale product | Sale price and compare-at price remain clear. |
| Sold-out product | Sold-out state is visible and quick add does not create a misleading action. |
| Multi-option product | Swatches, variant images, and quick-add choices match the product data. |
| Long product title | Text wraps without pushing card controls into awkward positions. |
| Mobile grid | Card spacing, swatches, and quick-add controls remain usable on narrow screens. |