> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/group-sections/products/outfit-finder.md).

# Outfit finder

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FVcllX6aHdyp5uy2KsLVB%2Fimage.png?alt=media&amp;token=172a1411-95a9-4147-99bd-15b49c51db78" alt=""><figcaption></figcaption></figure>

### Section settings <a href="#section-settings" id="section-settings"></a>

#### General settings <a href="#general-setting" id="general-setting"></a>

| Setting          | Description                                     |
| ---------------- | ----------------------------------------------- |
| **Color scheme** | Select colors from **Theme settings -> Colors** |

#### Section header <a href="#general-setting" id="general-setting"></a>

| Setting                                | Description                                                                                                                                               |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Subheading**                         | Use the subheading to provide additional context, supporting information, or a short description.                                                         |
| **Heading**                            | The primary text element used to introduce or label the content within this section.                                                                      |
| **Enable heading underline animation** | Enable heading underline animation                                                                                                                        |
| **Underline style**                    | Select Underline style                                                                                                                                    |
| **Underline color**                    | Customize Underline color                                                                                                                                 |
| **Description**                        | A text element used to provide additional details or supporting information related to the heading or content of the section.                             |
| **Heading size**                       | <p>The size of the title:</p><ul><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul>                      |
| **Alignment**                          | <p>The position of the heading and description.</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul> |

#### Product listing settings

| Setting                      | Description                                                                                                                                                            |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Products per page**        | Limit the display of the number of products. Minimum: 1. Maximum: 24.                                                                                                  |
| **Items per row on desktop** | Number of columns to display on desktop computers. Minimum: 2. Maximum: 4.                                                                                             |
| **Column gap**               | <p>4 options for column gap</p><ul><li><strong>No gap</strong></li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul> |

#### Preview settings

| Setting                      | Description                                                                              |
| ---------------------------- | ---------------------------------------------------------------------------------------- |
| **Suggested outfit**         | Select products to be shown in the preview area by default when the page loads.          |
| **Max products per outfit**  | Set the maximum number of products a customer can add to the preview area.               |
| **Empty state notification** | Customize the guidance text displayed in the preview area before any products are added. |

#### Section padding <a href="#section-padding" id="section-padding"></a>

| Setting    | Description                                |
| ---------- | ------------------------------------------ |
| **Top**    | Customize the top margin of the section    |
| **Bottom** | Customize the bottom margin of the section |