# Product list banner

![image](https://lh7-us.googleusercontent.com/y_E5Yq27WgP_qi6BOY9zQEe5YkGehb0OXL1QBIo7KP_NsiRNGPt4LKwo6kghAJUOnD-MzCW7yCiYqvqZTRHNjSKJ4Ce1lWgWvuEQQLwDAKtMSF45ggtY8EU363fM4vhU91PaDHMZmGTsKAINel0jnes)

Product list banners can help online stores promote sales and new collections with an attractive banner image. 

## How to add a Product list banner

<Hint type="success">

**Steps:**

1. In the theme editor **(Customize)**, click **Add section.**
2. Select **Product list banner.**
3. Make necessary changes.
4. **Save** the settings.

</Hint>

## Section settings

### Section header

Use the provided text fields to add a suitable **Heading**/ **Subheading**/ **Description**.&#x20;

Leave them blank if you do not want to display them.&#x20;

Adjust the **Heading size** (Medium/ Large) and **Text alignment** (Left/ Center).

![image](https://docs-assets.foxecom.app/minimog-theme/image_pzg1uc9F.png)

### General

Adjust the **Container type** (Default/ Full width/ Use container box) and color **scheme,** and add a preferable **Collection** for this section.

![image](https://docs-assets.foxecom.app/minimog-theme/image_Yr42STqi.png)

### Grid settings

Adjust the number of **Products to show** (between 2 and 12), the **Column gap**, and the **Row gap**.

<Hint type="success">

✨ Pro tip: The column gap and row gap should be the same for a symmetrical design.

</Hint>

![image](https://docs-assets.foxecom.app/minimog-theme/image_ZwJmAO1y.png)

### Product card settings

Choose the product card **Design layout** you prefer:

* Use global settings
* Style 1
* Style 2
* Style 3
* Style 4
* Style 5

and the **Image aspect ratio:**

* Use global settings
* Original aspect ratio
* 1:1
* 3:4
* 4:3
* 16:9&#x20;

You can also enable/ disable **Showing product vendors** and **product title** in this section.

![image](https://docs-assets.foxecom.app/minimog-theme/image_IgAygPTr.png)

### Mobile settings

Determine the **Column gap** and **the Row gap** between columns.

Moreover, you can also change the layout from grid to slider on mobile by enabling the **Use horizontal scrollbar** checkbox.

<Hint type="success">

✨ Pro tip: The column gap and row gap should be the same for a symmetrical design.

</Hint>

![image](https://docs-assets.foxecom.app/minimog-theme/image_dO295xyr.png)

## Block settings

You can only add a maximum of **one** block for the section.

### Image card

Adjust the **Color scheme** for this block.

Change the **Content position** and **Content alignment** (Left/ Center/ Right) to make the block look reasonable in the section.

In addition, you can also change the **Text size** (Small/ Medium/ Large) and **Text color** (Dark/ Light/ Inherit) of the block.

![image](https://docs-assets.foxecom.app/minimog-theme/image_OL4xvakj.png)

### Content

You can **add banner images for desktop and mobile versions separately**.

To direct customers to a specific page > add a link to the **Image link** input field.

* Leave it blank if you want to redirect to the current page.

Use the provided text fields to add a suitable **Heading**/ Subheading.&#x20;

* Leave them blank if you do not want to display them.

![image](https://docs-assets.foxecom.app/minimog-theme/image_qqUEzfh9.png)

### Button settings

The call-to-action button will get the link from the provided **Image link** above.

Give the button a **label,** a specific **Button style**

* Primary button
* Secondary button
* Underline button
* White button

and the **Button size**&#x20;

* Button small
* Button medium
* Button large

![image](https://docs-assets.foxecom.app/minimog-theme/image_ZT5BDNcM.png)