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

# Special Banner

<figure><img src="/files/JtXQemOwIBGv95qzPVo3" alt=""><figcaption><p>Block Image with text + Lookbook banner</p></figcaption></figure>

<figure><img src="/files/71smguHpDSaWY6UBAurR" alt=""><figcaption><p>Block Product + Image with rotating text</p></figcaption></figure>

<figure><img src="/files/1Fdu2jM7yvOW0uFo1J28" alt=""><figcaption><p>Block Image with text + Collection banner</p></figcaption></figure>

<figure><img src="/files/i6zATAoQQd2JedptSHnX" alt=""><figcaption><p>Block Product + Image with rotating text</p></figcaption></figure>

To add this section, please follow 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 "**Special banner**".

## Section settings

<table><thead><tr><th width="337">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Section width</td><td><p>Choose the maximum width of the section on the Desktop. The options are:</p><p></p><p><mark style="color:orange;"><strong>Width (1170px)</strong></mark></p><p><mark style="color:orange;"><strong>Width (1370px)</strong></mark></p><p><mark style="color:orange;"><strong>Width (1470px)</strong></mark></p><p><mark style="color:orange;"><strong>Width (1570px)</strong></mark></p><p><mark style="color:orange;"><strong>Width (1770px)</strong></mark></p><p><mark style="color:orange;"><strong>Width (1920px)</strong></mark></p><p><mark style="color:orange;"><strong>Full width (the width of the browser)</strong></mark></p></td></tr><tr><td>Top padding / Bottom padding</td><td>Set the spacing of section from the top / bottom.</td></tr></tbody></table>

## Block settings

### \[BLOCK]Image with rotating text

<table><thead><tr><th width="335">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Image</td><td>Upload/Select an image for the block.</td></tr><tr><td>Link</td><td>Specify the link for the banner image to redirect to.</td></tr><tr><td><strong>Rotating text</strong></td><td></td></tr><tr><td>Text</td><td>Enter the text for the rotating effect.</td></tr><tr><td>Text color</td><td>Set color for the text.</td></tr><tr><td>Letter spacing</td><td>Space between character.</td></tr><tr><td>Alignment</td><td>Select the position of the rotating text to be either to the Left, Center or Right.</td></tr></tbody></table>

### \[BLOCK]Image with text

<table><thead><tr><th width="336">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Image</td><td>Upload/Select an image for the block.</td></tr><tr><td>Link</td><td>Specify the link for the banner image to redirect to.</td></tr><tr><td><strong>Content</strong></td><td></td></tr><tr><td>Content alignment</td><td>Select the position of the whole content to be either to the Left, Center or Right.</td></tr><tr><td>Content position</td><td>Select the position of the whole content to be either to the Top, Center or Bottom.</td></tr><tr><td>Heading</td><td>Enter in the heading for the block.</td></tr><tr><td>Heading font size</td><td>Determine the font size of the heading on Desktop.</td></tr><tr><td>Heading font size on mobile</td><td>Determine the font size of the heading on Mobile.</td></tr><tr><td>Description</td><td>Enter the description for the block.</td></tr><tr><td>Description font size</td><td>Determine the font size of the description.</td></tr><tr><td>Button label</td><td>Enter the text for the button.</td></tr><tr><td>Button font size</td><td>Determine the font size of the button.</td></tr><tr><td>Text color</td><td>Set the color for the whole content.</td></tr></tbody></table>

### \[BLOCK]Collection banner

<table><thead><tr><th width="336">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Heading font size</td><td>Determine the font size of the heading for all banner items on Desktop.</td></tr><tr><td>Heading font size on mobile</td><td>Determine the font size of the heading for all banner items on Mobile.</td></tr><tr><td>Description font size</td><td>Determine the font size of the description for all banner items.</td></tr><tr><td>Button font size</td><td>Determine the font size of the button for all banner items.</td></tr><tr><td><h4>First item / Second item</h4></td><td></td></tr><tr><td>Image</td><td>Upload/Select an image for the item.</td></tr><tr><td>Heading</td><td>Enter in the heading for the item.</td></tr><tr><td>Description</td><td>Enter the description for the item.</td></tr><tr><td>Button label</td><td>Enter the text of the button for the item.</td></tr><tr><td>Link</td><td>Specify the link for the banner image to redirect to.</td></tr></tbody></table>

### \[BLOCK]Lookbook banner

<table><thead><tr><th width="336">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Heading font size</td><td>Determine the font size of the heading for all banner items on Desktop.</td></tr><tr><td>Heading font size on mobile</td><td>Determine the font size of the heading for all banner items on Mobile.</td></tr><tr><td>Icon color</td><td>Set the color for the lookbook dot.</td></tr><tr><td>Popup style</td><td>Select the style for the lookbook:<br><br><br>Small popup: A popup is a product card.<br>Large popup with product image: A popup is minimal with product title and price info only.</td></tr><tr><td>Show slide counter</td><td>Show above next arrow of slider.<br>(Position current of item on slider / total items.)</td></tr><tr><td><h4>First item / Second item / Third item</h4></td><td></td></tr><tr><td>Image</td><td>Upload/Select an image for the item.</td></tr><tr><td>Heading</td><td>Enter in the heading for the item.</td></tr><tr><td>Link</td><td>Specify the link for the banner image to redirect to.</td></tr><tr><td><strong>Product 1 / Product 2</strong></td><td></td></tr><tr><td>Product</td><td>Select a product for a lookbook dot.</td></tr><tr><td>Pin icon horizontal position (%)</td><td>Determine the horizontal position of the dot relative to the block's left. </td></tr><tr><td>Pin icon vertical position (%)</td><td>Determine the horizontal position of the dot relative to the block's top.</td></tr></tbody></table>

### \[BLOCK]Product

<table><thead><tr><th width="336">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Layout</td><td>Select the layout of the product card to be in a <strong>Grid</strong> or <strong>Slider</strong>.</td></tr><tr><td>Title</td><td>Enter in the heading for the block.</td></tr><tr><td>Collection</td><td>Select the collect to show for this block.</td></tr><tr><td>Maximum products to show</td><td>Limit the number of products displayed on this block.</td></tr><tr><td>Show slide counter</td><td>Show above next arrow of slider. <br>(Position current of item on slider / total items.)<br><br><em><mark style="color:orange;">Note: This setting is applied when the 'layout' setting selects the 'slider'.</mark></em></td></tr></tbody></table>