> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/glozin-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/glozin-theme/theme-sections/product-with-banner.md).

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