# Brand Slider

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FVquiCgGEYkwwt6RwcPDQ%2Fimage.png?alt=media&#x26;token=af2946e8-4fa8-46fb-bccf-264df800181b" 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>