A product navigation block that displays sibling products (related products from a linked collection) as either interactive buttons/swatches or in a dropdown/drawer interface. Allows customers to navigate between related product variants with visual previews using the product's featured image. Supports flexible display modes with customizable swatches, tooltips, and responsive layouts.
Common use cases
Configure the custom.linked_collection metafield for your products to enable sibling product navigation
Use button/swatch mode when displaying a small number of siblings (2-6 products) for quick visual selection
Use dropdown mode when displaying many siblings (7+ products) to save space and reduce visual clutter
Enable tooltips when showing swatches without labels to improve accessibility
Consider enabling grid layout for consistent spacing and alignment
Adjust swatch size (8-120px) based on design context: smaller for compact layouts, larger for hero sections
Set appropriate gap sizes to balance density and readability
Block settings
General
Setting
Description
Options
Show advanced settings
Reveals 5 advanced options including show tooltip, enable grid layout, and more
Checkbox (default: false)
Content
Setting
Description
Options
Product
Select the product to display sibling options for
Product picker
Label
Optional label text displayed above the sibling options
Text input
Swatch selection
Controls how sibling options are displayed
• Buttons (default) • Dropdowns
Show swatch
Displays product featured image as swatch background
Checkbox (default: true)
Show tooltip
Displays tooltip on hover showing product title
Checkbox (default: true)
Visible when swatch selection is buttons
Visible when Swatch selection is buttons and Show advanced settings is on
Show labels
Displays product title alongside swatches
Checkbox (default: false)
Visible when swatch selection is buttons
Layout
Controls how swatches and labels are arranged
• Stacked • Inline (default)
Visible when show labels and swatch selection is buttons
Swatch size
Size of the swatch preview images
8 - 120 px (default: 16)
Visible when show swatch is true
Swatch radius
Controls the border radius of swatches
• None • Default • SM • MD • LG • XL • 2XL • Full (default)
Visible when show swatch is true
Spacing
Setting
Description
Options
Enable horizontal padding
Adds horizontal padding around the block
Checkbox (default: false)
Enable top padding
Adds top padding around the block
Checkbox (default: false)
Enable bottom padding
Adds bottom padding around the block
Checkbox (default: false)
Gap size
Controls spacing between sibling option buttons
• None • Default (default) • XS • SM • MD • LG • XL
• Extra small • Small (default) • Standard • Large
Layout
Setting
Description
Options
Horizontal alignment
Controls horizontal alignment
• Left (default) • Center • Right
Visible when label is not blank
Enable grid layout
Displays options in a grid instead of flex wrap
Checkbox (default: false)
Visible when swatch selection is buttons
Visible when Swatch selection is buttons and Show advanced settings is on
Desktop row size
Number of columns in the grid on desktop
1 - 12 (default: 4)
Visible when Enable grid layout and Swatch selection are buttons and Show advanced settings is on
Mobile row size
Number of columns in the grid on mobile
1 - 3 (default: 2)
Visible when Enable grid layout and Swatch selection are buttons and Show advanced settings is on
Display
Setting
Description
Options
Visibility
Controls when the block is visible
• All (default) • Mobile only • Desktop only
Visible when Show advanced settings is on
Use a different collection metafield
In Sibling options, set Sibling metafield to the namespace and key of a product metafield that references a collection. The default is custom.linked_collection. See Display linked products for the collection setup.
SlabProduct sibling options
How do I get started with my workspace?
Start by connecting your source repository and choosing the pages you want to publish.
You can then browse your documentation and ask questions about the content your team has shared.
