Total Kitchen

A section that groups products into switchable tabs. Each tab shows a hero product card (large image, title, description, CTA) on the left and an accessories grid on the right. Pill-shaped tab buttons sit in a horizontally scrollable bar above the content; clicking a pill crossfades to that tab’s panel. When only one tab exists, the pills bar is hidden and the content renders directly.

All content is driven by the system_block metaobject attached to each product via nama.system_block. The metaobject defines the hero image, title override, description, CTA label, accessories list, subtitle, and a linked collection. On PDP the CTA becomes an Add to Cart button; off PDP it links to the product page.

Accessories come from a list of system_block_accessory metaobjects within the system block. When there are three or more accessories, mobile renders a Splide carousel with dot pagination; two or fewer display as a static grid. Desktop always shows a two-column grid.

Settings

Setting	What it does
Section ID	Optional anchor for jump links.
Padding top / bottom	Default 48/48/80px each.

The section has no content settings of its own — all content is configured through the kitchen-tab blocks and their associated metaobjects.

Blocks

Static blocks:

• Title — the section heading, centred above the pills bar.
• Rich text — description text below the heading.

Repeatable:

• Kitchen Tab — each block is one tab. Settings include a product picker, tab label (defaults to “{product title} collection”), vertical alignment (top or centre), hero background colour, and hero aspect ratio (landscape or square).

Tab content comes from the metaobject, not the block

The kitchen-tab block only controls which product to show and how the tab looks (label, background, aspect ratio). The hero image, title, description, accessories, and CTA all come from the product’s nama.system_block metaobject. If the metaobject isn’t set, the tab won’t render.

Auto-hide on PDP

On product pages, the section hides entirely when the current product has no nama.system_block metafield set. On other page types it always renders. This means you can include it on the PDP template and it only appears for products that belong to a system/kitchen collection.

Where it’s used

• Product templates (flagship PDP)
• Homepage or landing pages showcasing the full product line

Tips

• One tab per product line. Each tab should represent a distinct system (e.g. “J2 Collection”, “C2 Collection”) rather than individual SKUs.
• Set a custom tab label. The auto-generated “{title} collection” label works but tends to be long. Short labels like “Cold Press” or “Citrus” keep the pills bar tidy.
• Keep accessories to four or fewer per tab. The two-column grid on desktop gets tall quickly. More than six pushes content below the hero card’s bottom edge.
• Use the hero background colour to match the product’s brand colour or photography background. The default light grey works for most studio shots.