Seventh > Blocks > Product item

Product item

The Product item block displays a selected product in a compact, card-style layout. It’s designed to highlight individual products inside cards, sections, or editorial layouts - perfect for shoppable content without building a full product grid.

What it does

This block displays a product with:

• Product image preview
• Product title and price
• Optional color/variant indicators
• Visual styling controls for borders, radius, and background
• Responsive layout that adapts to its container

Block settings explained

Product

• Select the product you want to display

Remove background

• When enabled, removes the card background

Hide border

• Controls whether the product card border is visible

Fit container

• Controls how the product image fits inside its container

Corner radius

• Controls the roundness of the product card

Color scheme

• Selects the color scheme used for background, text, and UI elements

Common use cases

Shoppable editorial content

• Embed products inside editorial or storytelling layouts
• Highlight featured items alongside text or imagery
• Ideal for lookbooks, campaigns, or brand stories

Promotional cards

• Feature new arrivals or key products
• Draw attention without using full product grids
• Great for homepage highlights or landing pages

Image overlays

• Place product items over images or media backgrounds
• Combine with expressive sections and cards
• Works well with “remove background” enabled

Cross-sells & recommendations

• Show related or complementary products
• Use inside product pages or content-driven sections
• Encourage discovery without disrupting flow