# Brand Slider

<figure><img src="/files/I5eOhQ3eLdfkRolWFojM" alt=""><figcaption></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 "**Brand slider**".

## Section Settings

### General

<table><thead><tr><th width="314">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Section width</td><td>Select the layout width of the whole section. The options are: <br><br><mark style="color:orange;"><strong>Default (same as the body width)</strong></mark><br><mark style="color:orange;"><strong>Width (1170px)</strong></mark><br><mark style="color:orange;"><strong>Width (1470px)</strong></mark><br><mark style="color:orange;"><strong>Width (1770px)</strong></mark><br><mark style="color:orange;"><strong>Full width (100% of the viewport width).</strong></mark></td></tr><tr><td>Padding for 'full width' option on desktop</td><td>Determines the left and right spacing of the full width layout.</td></tr><tr><td>Layout style</td><td>Select the layout style for the block items of the section. There are 4 options: <br><br><mark style="color:orange;"><strong>Style 1</strong></mark><br><mark style="color:orange;"><strong>Style 2</strong></mark><br><mark style="color:orange;"><strong>Style 3</strong></mark><br><mark style="color:orange;"><strong>Style 4</strong></mark></td></tr><tr><td>Layout</td><td><p>Select the general layout of block items to show together. The options are: </p><p></p><p><mark style="color:orange;"><strong>Grid</strong></mark></p><p><mark style="color:orange;"><strong>Slider</strong></mark></p><p><mark style="color:orange;"><strong>Infinite Scrolling</strong></mark><br><br><em><mark style="color:orange;">Note: When selecting the 'infinite scroll' option, the section container will automatically be full width and have no padding.</mark></em></p></td></tr><tr><td>Scroll from</td><td><p>Sets the direction of the scrolling within the marquee. There are two options:</p><p></p><p><mark style="color:orange;"><strong>Left to right</strong></mark></p><p><mark style="color:orange;"><strong>Right to left</strong></mark></p><p></p><p><em><mark style="color:orange;">Note: This setting only works with the 'infinite scroll' option of the layout setting above.</mark></em></p></td></tr><tr><td>Scroll speed</td><td>The scroll speed of the block items. There are options:<br><br><mark style="color:orange;"><strong>5/10/15/20/25/30/35/40/45/50 seconds.</strong></mark><br><br><em><mark style="color:orange;">Note: This setting only works with the 'infinite scroll' option of the layout setting above.</mark></em></td></tr><tr><td>Show border</td><td>Displays the top border for the section.</td></tr><tr><td>Background color</td><td>The background color of the section.</td></tr><tr><td>Background gradient</td><td>The background gradient of the section.</td></tr><tr><td>Background image</td><td>Upload an image as the section background.</td></tr></tbody></table>

### **Block header**

<table><thead><tr><th width="315">Settings</th><th width="421">Meaning</th></tr></thead><tbody><tr><td>Style</td><td><p>Select a layout for the header block:</p><p><br><mark style="color:orange;"><strong>Title left with view all left</strong></mark><br><mark style="color:orange;"><strong>Title left with view all right</strong></mark><br><mark style="color:orange;"><strong>Title center with view all left</strong></mark><br><mark style="color:orange;"><strong>Title center with view all right</strong></mark><br><mark style="color:orange;"><strong>Title center with view all below</strong></mark></p></td></tr><tr><td>Title</td><td>The title of the section.</td></tr><tr><td>Title color</td><td>The color of the section title.</td></tr><tr><td>Title font size</td><td>The font size of the section title on tablet and desktop devices.</td></tr><tr><td>Title font size on mobile</td><td>The font size of the section title on mobile devices.</td></tr><tr><td>Show title border</td><td>Allows displaying the top or bottom border of the title depending on the style of the Header Block.</td></tr><tr><td>Title border color</td><td>The color of the title border.</td></tr><tr><td>Description</td><td>The description for this section.</td></tr><tr><td>Description color</td><td>The color of the description text.</td></tr><tr><td>Description font size</td><td>The font size of the description text.</td></tr><tr><td>Description bottom margin</td><td>Determines the spacing bottom of the description text.</td></tr><tr><td>View All</td><td>Enter the text for the view all button.</td></tr><tr><td>'View all' font size</td><td>The font size of the view all button text.</td></tr><tr><td>'View all' font weight</td><td>Select the position of the view all button to be either to the Left, Right or Center.</td></tr><tr><td>'View all' bottom margin</td><td>Determines the spacing bottom of the view all button.</td></tr><tr><td>Show 'view all' border</td><td>Toggle the bottom border for the view all button.</td></tr><tr><td>'View all' link</td><td>Specify the link for the view all button to redirect to.</td></tr><tr><td>'View all' link color</td><td>The text color of the view all button.</td></tr><tr><td>'View all' icon</td><td>Enter the SVG icon that stands next to the text in the button.<br><br><em><mark style="color:orange;">Note: Go to this link</mark></em> <a href="https://fontawesome.com/v5/search"><em><mark style="color:blue;">find your icon</mark></em></a><em><mark style="color:orange;">. Find the icon you want, then copy the SVG code and paste it here.</mark></em></td></tr><tr><td>'View all' icon color</td><td>The icon color of the view all button.</td></tr><tr><td>'View all' icon position</td><td>Select the position of the icon to be either to the left or right of text in the button.</td></tr><tr><td>Button label</td><td>The text that displays on the button.</td></tr><tr><td>Button font size</td><td>The font size of the button text.</td></tr><tr><td>Button top margin</td><td>Determines the top spacing of the button.</td></tr><tr><td>Button label color</td><td>The text color of the button.</td></tr><tr><td>Button link</td><td>Specify the URL for the button to redirect to.</td></tr><tr><td>Auto-rotate slides</td><td>Sets slider to transition automatically for a specific duration.</td></tr><tr><td>Change slides every</td><td>Sets a particular speed in milliseconds for the auto play slider.</td></tr><tr><td>Items per row</td><td>Determines the number of block columns per row on desktop devices.</td></tr><tr><td>Show navigation arrows</td><td>Display the arrows for the slider.</td></tr><tr><td>Show navigation dots</td><td>Display the dots for the slider.</td></tr><tr><td>Enable center mode</td><td>Make the position of the current slide to remain in the center.</td></tr><tr><td><strong>Arrows</strong></td><td></td></tr><tr><td>Position</td><td><p>Select the layout for the slider arrows. There are 3 options:</p><p><br>None<br>Top right of the section<br>Wrap the sliders in between</p></td></tr><tr><td>Horizontal position of arrows</td><td>Determine the horizontal spacing of the arrows inward relative to the slider. <br><br><em><mark style="color:orange;">Note: Applies when the 'wrap the sliders in between' option is selected.</mark></em></td></tr><tr><td>Icon color</td><td>The icon color of the arrows.</td></tr><tr><td>Background color</td><td>The background color of the arrows.</td></tr><tr><td>Background gradient</td><td>The background gradient of the arrows.</td></tr><tr><td>Border color</td><td>The border color of the arrows.</td></tr><tr><td>Icon hover color</td><td>The border color of the arrows for hover state.</td></tr><tr><td>Background hover color</td><td>The background color of the arrows for hover state.</td></tr><tr><td>Background hover gradient</td><td>The background gradient of the arrows for hover state.</td></tr><tr><td>Border hover color</td><td>The border color of the arrows for hover state.</td></tr><tr><td>Items per row on mobile</td><td>Determines the number of block columns per row on mobile devices.</td></tr></tbody></table>

### Section top padding

<table><thead><tr><th width="314">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

### Section bottom padding

<table><thead><tr><th width="312">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

## Block Settings

### \[BLOCK] Image

<table><thead><tr><th width="328">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Image</td><td>Select/Upload an image for the block item.<br><br><em><mark style="color:orange;">Recommended Image: Width x Height (186 x 74)px</mark></em></td></tr><tr><td>Title</td><td>Enter the title underneath the image.</td></tr><tr><td>Text color</td><td>Apply color on the title text.</td></tr><tr><td>Text hover color</td><td>Apply color on the title text on hovered.</td></tr><tr><td>Description</td><td>Enter the text for the block description.</td></tr><tr><td>Description color</td><td>Apply color on the block description.</td></tr><tr><td>Link</td><td>Specify the link for the block to redirect to on clicked.</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/brand-slider.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.