Products tabs block
Shows several product lists that customers switch with tabs. The block holds one or more Tab blocks; add them with Add block inside the Products tabs block. Settings of the tabs row and of each tab are described below.
Products tabs settings
| Setting | Description |
|---|---|
| Tabs alignment | Aligns the row of tabs to the Left, Center or Right. Default: Left. |
| Top, Bottom, Left, Right | Space around the block on desktop. Range: 0–100 px, step 1. Default: 0 px. |
| Top mobile, Bottom mobile, Left mobile, Right mobile | Space around the block on mobile. Range: 0–100 px, step 1. Default: 0 px. |
Tab: content
| Setting | Description |
|---|---|
| Tab label | Name of the tab. Default: Playstation. |
| Tab icon | Optional image shown in the tab. |
| Image dark mode | Tab image used in dark mode. If not selected, the light mode image is used. Available only when dark mode is enabled in Theme settings and a tab icon is selected. |
Tab: layout
| Setting | Description |
|---|---|
| Collection | Collection whose products are shown in the tab. Ignored if a product list is selected. |
| Product list | Hand-picked products. When selected, it is used instead of the collection. |
| Product count | Maximum number of products shown. Range: 1–16. Default: 6. |
| Layout style | Grid or Carousel. Default: Carousel. |
| Desktop columns | Number of products per row on desktop. Range: 1–5. Default: 4. |
| Mobile columns | Number of products per row on mobile: One or Two. Default: One. |
| Desktop horizontal spacing | Space between products on desktop. Range: 0–60 px. Default: 8 px. |
| Mobile horizontal spacing | Space between products on mobile. Range: 0–40 px. Default: 8 px. |
| Desktop vertical spacing | Space between rows on desktop. Available only for the Grid layout. Range: 0–60 px. Default: 16 px. |
| Mobile vertical spacing | Space between rows on mobile. Available only for the Grid layout. Range: 0–40 px. Default: 16 px. |
| Show scrollbar | Shows a scrollbar under the carousel. Available only for the Carousel layout. Default: On. |
| Full-width carousel bleed | Lets the carousel peek past the page edge with a partial next card. Turn it off when the tab sits inside a narrower container. Available only for the Carousel layout. Default: On. |
Tab: product card
| Setting | Description |
|---|---|
| Color scheme | Color scheme of the product cards. Schemes are managed in Theme settings → Colors. Default: Scheme 1. |
| Card background | Background or Background secondary. Default: Background secondary. |
| Card style | Standard, Card or Card with corners. Default: Standard. |
| Media size | Shape of the product image: Adapt (original proportions), Portrait, Square, Landscape or Custom. Default: Adapt. |
| Custom media size | Image height as a percentage of its width. Available only when Media size is Custom. Range: 40–180 %. Default: 100 %. |
| Heading size | Size of the product title: Large, Medium, Small or Extra small. Default: Small. |
| Heading font | Font of the product title: Heading large, Heading small, Body or Accent. Default: Heading large. |
| Heading color | Color of the product title: Heading, Text or Accent. Default: Heading. |
| Heading text style | Letter case of the product title: Normal, Uppercase or Lowercase. Default: Normal. |
| Show vendor | Shows the product vendor. Default: Off. |
| Show type | Shows the product type. Default: On. |
| Show price | Shows the product price. Default: On. |
| Product icons | Shows a row of icons next to the price. Create a product metafield of type “File → List of files” and enter its name here. Only PNG and JPG files are supported; SVG files are skipped. |
| Show variant picker | Shows color/size swatches on product cards. Default: Off. |
| Variant picker type | First option only, All variants or Selected options. Available only when the variant picker is on. Default: First option only. |
| Options to show | Comma-separated option names, for example Color, Size. Available only when the picker type is Selected options. |
| Show compare button | Shows the compare button on cards. The store-wide compare settings are in the Compare popup settings section under Features. Default: On. |
| Quick add | Standard or Bulk (shows a quantity selector on single-variant products). Default: Standard. |
| Products with variants | How Bulk works for products with variants: Quick order drawer or Variant picker + quantity. Available only when Quick add is Bulk. Default: Quick order drawer. |