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 style="success" %}
**Steps:**
1. In the theme editor **(Customize)**, click **Add section.**
2. Select **Product list banner.**
3. Make necessary changes.
4. **Save** the settings.
{% endhint %}
## Section settings
### Section header
Use the provided text fields to add a suitable **Heading**/ **Subheading**/ **Description**.
Leave them blank if you do not want to display them.
Adjust the **Heading size** (Medium/ Large) and **Text alignment** (Left/ Center).
### General
Adjust the **Container type** (Default/ Full width/ Use container box) and color **scheme,** and add a preferable **Collection** for this section.
### Grid settings
Adjust the number of **Products to show** (between 2 and 12), the **Column gap**, and the **Row gap**.
{% hint style="success" %}
:sparkles: Pro tip: The column gap and row gap should be the same for a symmetrical design.
{% endhint %}
### 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
You can also enable/ disable **Showing product vendors** and **product title** in this section.
### 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 style="success" %}
:sparkles: Pro tip: The column gap and row gap should be the same for a symmetrical design.
{% endhint %}
## 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.
### 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.
* Leave them blank if you do not want to display them.
### 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**
* Button small
* Button medium
* Button large
---
# 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://docs.foxecom.com/minimog-theme/theme-sections/product-list-banner.md?ask=
```
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.
