Products

A grid or carousel of products from the store. Pick products by Query (Recent / Featured / Sale / Category) or Specific (hand-picked product IDs). The card design is a single shared template — change once, every card updates.

When to use it

Featured products row on a homepage
Full catalogue grid on a shop page
Product carousel inside a section (use the Carousel display

mode instead of Grid)

Sale row pulling only on-sale items via Query

When not to use it

Curated card grid that isn't products — use Rows
Pricing-tier cards (Free / Pro) — use Tiers
A single fixed product bundle — use Bundle

Display mode — Grid · Carousel (default: Grid)

Top-of-panel toggle.

Grid

Cards laid out in equal columns.

Carousel

Cards in a horizontal carousel with Cards count + a sub-toggle:

Slide — snap to one card at a time
Scroll — free-scroll with momentum

Source — Query · Specific (default: Query)

Query mode

#### Query type — Recent · Featured · Sale · Category (default: Recent)

What to pull. Category reveals a category dropdown directly below.

#### Columns — 1–6 (default: 4 desktop / 2 tablet / 1 mobile)

Visible only in Grid display mode (Carousel uses Cards instead).

Specific mode

A list of removable product chips with an + Select Products button below. Use when you need exactly these products in this order.

Card layout — Border · Shadow toggles

Two single-toggle buttons side by side. Each is a single click on / off.

Element toggles (3-col grid)

Pick what shows on each card: Image · Title · Price · Button. Sale-badge and Featured-badge are separate toggles further down.

Card text inputs

Button text (default: Add to Cart)
Sale badge — checkbox + text input (default: Sale)
Featured badge — checkbox + text input (default: Featured)

Hover effect — H-Flip · V-Flip · Zoom · Push · Swing · Fade (toggleable, default: off)

The card hover treatment. Click the active button to disable.

Colours (3×3 grid for Product Card; collapsible for Grid / Carousel)

Standard greyscale palette:

Border · Price · Background
Text · Button · Btn Text
Sale Price · Badge Text · Sale Badge
Container (Product Card single mode only)

The Grid / Carousel variant collapses these into a Colors panel that you can expand.

Sliders

Common sliders (rendered after the colours section):

Gap — spacing between cards
Max Width — caps the row's outer width
Border Radius — card corner roundness
Per-card sliders for: Image radius, Title size, Price size,

Button radius, Button height (the underlying Card Design model exposes all of these)

Per-device overrides

Display mode, Source, Columns, Cards, Gap, all card-design sliders have separate Tablet and Mobile values.

The block reads device-specific column count separately:

Desktop default: 4
Tablet default: 2
Mobile default: 1

Common overrides:

Display mode — Grid on desktop, Carousel on mobile
Columns — drop progressively (4 → 2 → 1)

Common patterns

Featured row on homepage

Display Carousel · Source Query · Query type Featured · Cards 4 desktop / 2 mobile · Mode Slide · Border off · Shadow off · Hover Zoom.

Full catalogue grid

Display Grid · Source Query · Query type Recent · Columns 4 / 2 / 1 · Border on · Shadow off · Hover H-Flip.

Sale collection

Display Grid · Query type Sale · Sale badge on with text Save 30% · Hover Zoom.

Curated highlight row

Display Carousel · Source Specific · pick 6 products · Cards 3 · Mode Slide.

blocks/bundle — for a single fixed product bundle (one card)
blocks/plans — for pricing-tier cards (Free / Pro / Team)
blocks/rows — for non-product card grids