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

# Outfit ideas

A guide to set up a Outfit Ideas

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FYtkcoC43QzhiM5mHIPvD%2Fimage.png?alt=media&amp;token=f56f1be5-81b8-4f36-90d6-27f0923bf4a9" alt=""><figcaption></figcaption></figure>

The Outfit Ideas displays a quick list of desired products to catch visitors' attention.

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Outfit Ideas**
3. **Save**
   {% endhint %}

## General settings

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2F60v25aQh8pM7WME4sVYv%2Fimage.png?alt=media&amp;token=a0d45f25-a8b2-4d3e-97d9-2b4e7fec0f0a" alt=""><figcaption></figcaption></figure>

| Setting                | Description                                                                                                                                                         |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Section width          | You can choose among Container, Wrapped container, Full width for the banner layout.                                                                                |
| Color sheme            | Set text color and background color with preset scheme.                                                                                                             |
| Heading, description   | Use the provided text fields to add a suitable heading/subheading/description. Leave any of them blank if you do not want to display them.                          |
| Header size, alignment | Adjust the text alignment (left/center/right) along with the font size.                                                                                             |
| Image ratio            | In addition to adjusting the width, the image ratio can be fine-tuned using default values or a custom value to achieve the perfect visual balance for your images. |

## **Products**

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2Fm7gJ3E2a55weAp6sEgUD%2Fimage.png?alt=media&amp;token=771596cc-2a39-4f26-9a4e-0b650bc6288c" alt=""><figcaption></figcaption></figure>

**Items per row:** The number of items displayed on each row in the grid layout can be customized to suit your preferences and the overall design of your site.

**Column gap:** The spacing between each column pair

## **Section padding:**

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FDOWx5tfQiQ7XJwRV0mvM%2Fimage.png?alt=media&amp;token=0fdc07f0-0f56-4188-a01e-50574da048f2" alt=""><figcaption></figcaption></figure>

Section padding allows you to specify the space between this section and the preceding or following sections, or both.

## Block settings

For collection items, you have the capability to configure the following elements:

* **Image:** Choose or upload an image associated with the collection.
* **Product:** Select Product.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FNHQUvmM6u563y45YYWN2%2Fimage.png?alt=media&amp;token=ac7d4430-c351-4d68-abdc-d4f5858163b3" alt=""><figcaption></figcaption></figure>