# Mix and match

The mix and match section allows customers to build a coordinated set of products by pairing a main product with up to three matching items. It is designed to support outfit building, bundle-style discovery, and guided cross-selling through a structured editorial layout.

<figure><img src="/files/eCTT2HKV8C5n85tzrx9X" alt=""><figcaption></figcaption></figure>

#### Main product

Selects the primary product that anchors the section. All matching products and related content are displayed in relation to this item.

#### Matching products

Selects up to three complementary products that are displayed alongside the main product to encourage coordinated purchases.

#### Maximum width

Controls how the section content is constrained horizontally. Set to “Fill space” to allow the section to expand fully within its container.

#### Text alignment

Defines the alignment of the content text within the section. Set to “Row start” to align content to the start of the layout row.

#### Heading

The main heading displayed for the section. Default is “Mix and match”. Leave blank to omit.

#### Subheading

Optional supporting text shown below the heading to provide additional context. Leave blank to omit.

#### Content

Rich text content area used to add formatted editorial copy, supporting storytelling or product guidance.

#### Button label

Defines the text for an optional call-to-action button. Leave blank to hide the button.

#### Button link

Specifies the destination URL for the button. Can link to a product, collection, page, or external destination.

#### Button style

Defines the visual style of the button. Default is “Secondary”.

#### Button size

Controls the size of the button. Options include Small, Medium, or Large depending on design emphasis.

#### Vertical spacing

Controls the spacing around the section to adjust its separation from surrounding content.

#### Vertical spacing (desktop)

Sets the vertical spacing applied on desktop devices. Default is Large.

#### Vertical spacing (mobile)

Sets the vertical spacing applied on mobile devices to ensure consistent spacing across screen sizes.

#### Shop name override

Overrides the shop name used throughout the theme for display purposes. Leave blank to use the default shop name.

#### Image aspect ratio

Sets the aspect ratio for product images in the section. Default is 2:3, with support for focal points to control image cropping focus.

#### Border rounding

Controls the corner radius of visual elements such as product cards. A value of 0 results in sharp corners.

#### Show vendor labels

Displays product vendor names when they differ from the shop name, helping provide brand or manufacturer context.

#### Remove rich text editor empty tags

Cleans up empty HTML tags from rich text content to maintain consistent formatting.

#### Remove rich text editor styling

Removes inline styles from rich text content to ensure styling is controlled consistently by the theme.


---

# 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://gatame.gitbook.io/highstreet/dynamic-sections/products/mix-and-match.md?ask=<question>
```

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.