# 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>