# Special Banner

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2Fn7uZ9XD2lXVAkzjKYy93%2Fspecial-banner-1.jpg?alt=media&#x26;token=8c0d67ae-5560-45ab-809c-b6db954e0ae6" alt=""><figcaption><p>Block Image with text + Lookbook banner</p></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FW6gGXNAUjqtHfwaF3Gsy%2Fspecial-banner-2.jpg?alt=media&#x26;token=6cca08a6-4b63-472b-af54-ed5d6a98744b" alt=""><figcaption><p>Block Product + Image with rotating text</p></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FncAMgWZPXOXv1hpAYiC3%2Fspecial-banner-3.jpg?alt=media&#x26;token=46efaad5-281b-434e-9109-7b50a7a04035" alt=""><figcaption><p>Block Image with text + Collection banner</p></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FwEoPBSGFEd27gdQEVVU3%2Fspecial-banner-4.jpg?alt=media&#x26;token=cd61acfc-2bfc-4849-9e11-4c66b637e698" 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>


---

# 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/ella-documentation/sections/all-sections-in-theme/special-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.