> For the complete documentation index, see [llms.txt](https://oranthemes.gitbook.io/edge-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://oranthemes.gitbook.io/edge-theme/theme-sections/products-with-banner.md).

# Products with banner

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

{% hint style="success" %}
**Steps:**&#x20;

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

## General Settings

<figure><img src="/files/4Gjkw1R0iQmRKH1imBZ5" alt="" width="284"><figcaption></figcaption></figure>

* **Width** - With of this section 3 options : Boxed / Wide / Full
* **Subheading**&#x20;
* **Heading** - Heading of this section
* **Heading size** - From Heading 1 to Heading 6
* **Description** - Description of this section
* **Layout** - *Horizontal / Vertical*

### View all button

* **Link url**  - Link for button in Header section
* **Link text** - Text for button
* **Button type**  -  there are 7 Options button
* **Show arrow icon**

### Colors

<figure><img src="/files/lO3No6N1xgS1wu5SBX7z" alt="" width="280"><figcaption></figcaption></figure>

* **Background**
* **Text color**

### Section padding

<figure><img src="/files/LBq81hS9G4lOzLHuSNRz" alt="" width="280"><figcaption></figcaption></figure>

* **Top padding**
* **Bottom padding**

## **Block settings**

{% hint style="success" %}
Steps:

1. Locate **Products with banner**
2. **Add Block  >** Select block you want
3. Make necessary changes. > **Save.**
   {% endhint %}

### Product

<figure><img src="/files/huz7t7Q0GoezlPmYl6hT" alt="" width="281"><figcaption></figcaption></figure>

### Image

<div><figure><img src="/files/vGfvbQZBEVXNNPJbbVpm" alt="" width="283"><figcaption></figcaption></figure> <figure><img src="/files/MV8Xqd8HQsqiU5fgbtCT" alt="" width="281"><figcaption></figcaption></figure></div>