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

# Image product banner

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

The "Image product banner" section is provide by the Flute theme. show off your banner in style with a image  product banner section.

{% hint style="info" %}
**Recommendation Size**\
**I**mage product banner size: 1920x800\
**I**mage product banner pagination image size: 30x30
{% endhint %}

<table><thead><tr><th width="286">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><p>Customization of the "Layout" in this section is as follows:</p><ul><li>Wide</li><li>Grid</li></ul></td></tr><tr><td>Banner height</td><td><p>Customization of the "Banner height" in the image product banner section is as follows:</p><ul><li>Adapt to first image</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li></ul></td></tr><tr><td>Heading</td><td>Enter text to display as a main heading of the section. </td></tr><tr><td>Pagination</td><td><p><strong>Style</strong></p><p>Customization of the "Pagination" in the section is as follows:</p><ul><li>Dot</li><li>Image</li><li>None</li></ul><p></p><p><strong>Color</strong></p><p>You can customize the pagination color using this settings.</p></td></tr></tbody></table>

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

## **Add Banner slide**

To add blocks to the Image product banner section, click on the 'Banner slide'. There are many options available similar to the banner slide, as you can see in the below points and screenshot:

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Used image to upload the main banner image.</td></tr><tr><td>Pagination image</td><td>Optional — upload a separate image to use as the pagination thumbnail. If left blank, the <strong>main image</strong> will be used for pagination.</td></tr><tr><td>Enable product</td><td>Toggle this on to Show a <strong>product</strong> in banner slide.</td></tr><tr><td>Product</td><td>Choose the product that you want to add in banner slide.</td></tr><tr><td>Heading</td><td><p><strong>Heading</strong></p><p>Add a heading that displays over the banner image. </p><p></p><p><strong>Size</strong></p><p>Customization of the "Heading Size" in the banner slide is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Desktop content placement</td><td><p>To change the position of the content on the banner slide, utilize the "Desktop content placement" setting. Customization of the "Desktop content placement" in the Image product banner section is as follows:</p><ul><li>Top left</li><li>Top center</li></ul></td></tr><tr><td>Desktop content alignment</td><td><p>Customization of "Desktop content alignment" in desktop devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of the container using the color scheme:</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li></ul></td></tr><tr><td>Mobile layout</td><td><p><strong>Image</strong> </p><p>Upload a separate image specifically optimized for mobile view.</p><p></p><p><strong>Mobile content alignment</strong></p><p>The content alignment customization in mobile devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr></tbody></table>

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