# Product sibling options
## Overview 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

| ### Color | Setting | Description | Options | | ------------ | --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Text color | Controls the text color for labels |

• Default (default)
• Alternative
• Primary background
• Primary foreground
• Secondary background
• Secondary foreground
• Tertiary background
• Tertiary foreground
• Neutral background
• Neutral foreground
• Shade

Visible when label is not blank

| | Button color | Controls the button/swatch color scheme |

• Primary
• Secondary
• Tertiary
• Neutral
• Plain (default)
• Outline
• Inverted outline
• Blur
• Link
• Inverted link

| ### Style | Setting | Description | Options | | ----------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Font family | Controls the font family for labels |

• Standard (default)
• Heading
• Subheading
• Accent

Visible when font size contains type-- and label is not blank

| | Font size | Controls the font size for labels |

• Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6

Visible when label is not blank

| | Button size | Controls the size of buttons/swatches |

• 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

| --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.brickspacelab.com/slab/content/blocks/products/sibling-options.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.