Kitchen Tab
The kitchen tab block is the core building block of the Total Kitchen section. Each block represents one tab and renders two things: a pill-shaped tab button (teleported into the section’s tab bar) and a content panel containing a hero product card on the left and an accessories grid on the right. All content is driven by the selected product’s nama.system_block metaobject, which supplies the hero image, title, description, CTA, and a list of accessory cards. On product pages the CTA becomes an add-to-cart button; everywhere else it links to the product.
Settings
Section titled “Settings”| Setting | What it does |
|---|---|
| Product | The product whose nama.system_block metaobject drives the tab content. Falls back to the current page product on PDPs. |
| Tab label | The text inside the pill button. Defaults to the product title plus “collection” if left blank. |
| Vertical align | Aligns the hero and accessories columns to the top or vertically centered. Defaults to center. |
| Hero background color | Background color behind the hero product image. Defaults to a light gray. |
| Hero aspect ratio | Switches the hero image between a landscape crop and a square crop. |
Used in
Section titled “Used in”- The tab only renders if the selected product has a
nama.system_blockmetaobject attached. Products without one are silently skipped. - Accessories come from the metaobject’s accessories list. On mobile, three or more accessories automatically switch to a Splide carousel; two or fewer display as a static grid.
- On product pages the hero card’s link wrapper is removed and the CTA changes to an add-to-cart action, so the same block works in both editorial and shopping contexts.
- The hero background color is useful for matching the product’s lifestyle photography or brand color – it fills the area behind the image.