# Product with banner

<figure><img src="/files/kPxRtO5bxN7kn2KXk8fS" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}

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

## Section settings <a href="#testimonials" id="testimonials"></a>

### **Section header and General**

**Section width:** You can choose among Fluid container, Full width, Stretch width for the banner layout.

<figure><img src="/files/DY80xDYfHjAZr1pM0T4k" alt=""><figcaption></figcaption></figure>

Use the provided text fields to add a suitable subheading/heading/description. Leave any of them blank if you do not want to display them.

Adjust the text alignment (left/center/right) along with the font size.

**Column gap:** Adjust the spacing between columns to control the layout and improve visual organization.

**Content background color:** Select a background color for the content area to enhance visibility and match your design style.

<figure><img src="/files/OjXjlxDuAY9G3dBIU3Rq" alt=""><figcaption></figcaption></figure>

### **Block setting**

<figure><img src="/files/EbJQ53Q8oPMBUhIGusV8" alt=""><figcaption></figcaption></figure>

**Image ratio:** Adjust the aspect ratio of the image to control its proportions and maintain a consistent design.

**Custom Ratio:** Input a specific aspect ratio to customize the image proportions according to your design requirements.

### Section padding:

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

<figure><img src="/files/9Q5HV53MbdZ1Xsq3MVpx" alt=""><figcaption></figcaption></figure>

## Blocks settings

Each block corresponds to a single product and an accompanying image banner, allowing for customized product showcases.

<figure><img src="/files/fceyC5dMrKccNdyHGwpL" alt=""><figcaption></figcaption></figure>


---

# 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://nextsky.gitbook.io/glozin-theme/theme-sections/product-with-banner.md?ask=<question>
```

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.