# Image banner

<figure><img src="/files/n24FoRJLZmtg0tSzeEZD" alt=""><figcaption><p>Layout on Beauty Blossom homepage</p></figcaption></figure>

<figure><img src="/files/rdkR76bWq6b7Lf7jFrFN" alt=""><figcaption><p>Layout on Furniture Fusion homepage</p></figcaption></figure>

<figure><img src="/files/0DfhseeTQOHKa7Mb8uDU" alt=""><figcaption><p>Layout on Furniture Fusion homepage</p></figcaption></figure>

<figure><img src="/files/KgvjeOFxOwq8650ejGql" alt=""><figcaption><p>Layout on Furniture Finesse homepage</p></figcaption></figure>

<figure><img src="/files/hy1MDZNSq4ZaCnXCbD1K" alt=""><figcaption><p>Layout on Dreamy Decor homepage</p></figcaption></figure>

To add this section, please follow the below steps:

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose "**Image banner**".

<table><thead><tr><th width="263">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Section width</td><td><p>Select the section width from the dropdown menu:</p><ul><li><strong>Full width</strong></li><li><strong>Page width</strong></li><li><strong>Custom width</strong></li></ul></td></tr><tr><td>Customize width</td><td>Determines the width of the section when you choose <strong>'Custom width'</strong> option at <strong>'Section width'</strong> setting . Can be from <strong>1000px</strong> to <strong>1800px</strong>, increasing arithmetically of <strong>50px</strong> (pixel)</td></tr><tr><td>Custom corner radius</td><td><p>Select this checkbox to enable/disable custom corner radius.</p><p><em><mark style="color:red;">(The</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>'Block corner radius'</strong></mark><mark style="color:red;"> </mark><mark style="color:red;">setting only take effect if this checkbox is ticked)</mark></em></p></td></tr><tr><td>Block corner radius</td><td>Determines the corner radius of the block. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr></tbody></table>

#### Image

<table><thead><tr><th width="263">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Upload an image</td></tr><tr><td>Content inside image on mobile</td><td>Enable/disable checkbox</td></tr><tr><td>Mobile row height</td><td>Determines the mobile image height of the block. Can be from <strong>40%</strong> to <strong>200%</strong>, in <strong>1%</strong> arithmetic increments</td></tr></tbody></table>

#### **Content**

<table><thead><tr><th width="264">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Desktop content position</td><td><p>Select desktop content position from the dropdown menu:</p><ul><li><strong>Top left</strong></li><li><strong>Top center</strong></li><li><strong>Top right</strong></li><li><strong>Middle left</strong></li><li><strong>Middle center</strong></li><li><strong>Middle right</strong></li><li><strong>Bottom left</strong></li><li><strong>Bottom center</strong></li><li><strong>Bottom right</strong></li></ul><p><em><mark style="color:red;">(Position is automatically optimized for mobile. This setting applies to the position of the entrie content block)</mark></em></p></td></tr><tr><td>Desktop content alignment</td><td><p>Select the alignment of content from the dropdown menu:</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr><tr><td>Mobile content alignment</td><td><p>Select content alignment on the mobile from the dropdown menu:</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr><tr><td>Custom content width</td><td><p>Select this checkbox to enable/disable custom content maximum width</p><p><em><mark style="color:red;">(The</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>'Content width'</strong></mark><mark style="color:red;"> </mark><mark style="color:red;">setting only take effect if this checkbox is ticked)</mark></em></p></td></tr><tr><td>Content width</td><td>Determines the content maximum width of the block. Can be from <strong>300px</strong> to <strong>1200px</strong>, in <strong>10px</strong> arithmetic increments</td></tr></tbody></table>

#### **Colors**

<table><thead><tr><th width="264">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Mobile color scheme</td><td><p>Select mobile color scheme from the dropdown menu:</p><ul><li><strong>Default</strong></li><li><strong>Custom</strong></li></ul><p><em><mark style="color:red;">(The</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>3</strong></mark><mark style="color:red;"> </mark><mark style="color:red;">following settings only take effect if this setting is</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>"custom"</strong></mark><mark style="color:red;">)</mark></em></p></td></tr><tr><td>Text</td><td>Set the color for the text</td></tr><tr><td>Background</td><td>Set the background color for this section <br><em><mark style="color:red;">(If a background gradient is set, the section's background will be set according to the background gradient setting)</mark></em></td></tr><tr><td>Background gradient</td><td>Set the background gradient for this section</td></tr><tr><td>Color scheme</td><td><p>Select a color scheme to set the text and background colors for the section</p><p><mark style="color:red;">(</mark><em><mark style="color:red;">This setting only take effect if the <strong>'</strong></mark></em><mark style="color:red;"><strong>Mobile color scheme'</strong> setting </mark><em><mark style="color:red;">is <strong>"Default"</strong></mark></em><mark style="color:red;">)</mark></p></td></tr><tr><td>Image overlay opacity on hover</td><td>Determines the image overlay opacity on hover of the block. Can be from <strong>0%</strong> to <strong>100%</strong>, in <strong>10%</strong> arithmetic increments.</td></tr><tr><td>Background</td><td>Set the background color for image overlay opacity on hover</td></tr></tbody></table>

#### **Animations**

<table><thead><tr><th width="263">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image behavior</td><td><p>Select the image behavior from the dropdown menu:</p><ul><li><strong>None</strong></li><li><strong>Ambient movement</strong></li><li><strong>Fixed background position</strong></li><li><strong>Parallax on scroll</strong></li><li><strong>Zoom in on scroll</strong></li><li><strong>Zoom in on hover</strong></li></ul></td></tr><tr><td>Text animation</td><td><p>Select the text animation from the dropdown menu:</p><ul><li><strong>None</strong></li><li><strong>Fade in up</strong></li><li><strong>Fade in down</strong></li><li><strong>Zoom in</strong></li><li><strong>Zoom out</strong></li></ul></td></tr></tbody></table>

#### **Section padding**

<table><thead><tr><th width="263">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determines the height of the top inner space of the section. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr><tr><td>Bottom padding</td><td>Determines the height of the bottom inner space of the section. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Top padding on mobile</td><td>Determines the height of the top inner space of the section on mobile. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr><tr><td>Bottom padding on mobile</td><td>Determines the height of the top inner space of the section on mobile. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr></tbody></table>


---

# 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://halosoft.gitbook.io/concept-documentation/section/image-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.