> 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/collections/recommended-collection.md).

# Recommended collection

The **Recommended collection** section is designed to display a suggested product collection based on customer interest or context. This section helps guide users toward relevant products, improving discovery and increasing conversion opportunities.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2F7xMWPYqRlQZuPwk8PCLN%2FPerfect%20picks%20for%20you.png?alt=media&amp;token=8fdb4aba-7f8d-4212-90ab-f90cae6d44c5" 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                                                                                                                                                                                                                                                                                                                                                                                                                               |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width**         | <p>3 options for container</p><ul><li><strong>Stretch width</strong>: span the section width regardless of screen size.</li><li><strong>Fixed width</strong>: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li><strong>Expand full width</strong>: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul> |
| **Color scheme**          | Select colors from **Theme settings -> Colors**                                                                                                                                                                                                                                                                                                                                                                                           |
| **Show background image** | When enabled, the background image will be displayed behind the content.                                                                                                                                                                                                                                                                                                                                                                  |

#### Image <a href="#blog-posts" id="blog-posts"></a>

| Setting                   | Description                                                        |
| ------------------------- | ------------------------------------------------------------------ |
| **Image**                 | Upload your desired image ***(1920px x 700px recommended)***       |
| **Mobile image**          | Upload your desired image mobile ***(390px x 407px recommended)*** |
| **Image overlay opacity** | Image overlay opacity                                              |
| **Image height**          | Customize the size of the image                                    |

#### Content

| Setting                      | Description                                                                                                                                      |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Desktop content position** | Adjust the content position on desktop                                                                                                           |
| **Content alignment**        | <p>3 options for the content alignment</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul> |
| **Content alignment**        | Setting the background color of the content block                                                                                                |
| **Max width**                | Customize the width of content                                                                                                                   |

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

| Setting               | Description                                       |
| --------------------- | ------------------------------------------------- |
| **Content alignment** | Setting the background color of the content block |

#### 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 |

#### Section divider

| Setting          | Description                                                   |
| ---------------- | ------------------------------------------------------------- |
| **Show divider** | Display a dividing line to separate from the previous section |