# Brand Tab
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 Tab**".
### HOW TO SHOW IMAGES FOR BRAND TAB SECTION?
**To show images for Brand Tab section, please follow our instruction below:**
**Step 1:**
\- Prepare image of the collection items for each tab. Name it with the same name as **the collection** (please use **PNG** image).
**- Rules:**
\+ Lower cap.
\+ And use a hyphen "**-**" to replace white space if your collection name has the white space.
\+ And use a "-" to replace “**&**” if your collection name has the “**&**” special characters.
**- For example:**
\+ With the collection name "**Ella Brand**", the image name will be **ella-brand.png**
**+** With the collection name "**Coats & Jackets**", the image name will be **coats-jackets.png**
**Step 2:**
You need go to **Settings** --> **Files**, upload images here.
### Section settings
| Setting | Description |
| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- |
| Layout: | Select the width layout of the section to be either default to the body's width, 1170px, 1770px or full screen width. |
| Padding Container Full Width | Determine the spacing of the left and right sides if the layout 'fullwidth' is selected. |
| Spacing top - Desktop / Tablet / Mobile | Determine the spacing of the section from the top on Desktop, Tablet and Mobile. |
| Spacing bottom - Desktop / Tablet / Mobile | Determine the spacing of the section from the bottom on Desktop, Tablet and Mobile. |
| Enable Border? | |
| Background Color | Set the Background Color for the whole section. |
| Background Gradient | Set the Background Gradient for the whole section. If the gradient is none, then the background color will be applied if any. |
| Background Image | Upload/choose an image as the background for the section. |
| Title | Enter the title for the section. |
| Title Color | Set the title color for the section. |
| Title Font Size | Determine the font size of the section title on Desktop ranging from 10px to 50px. |
| Title Font Size Mobile | Determine the font size of the section title on Mobile ranging from 10px to 50px. |
| Title Margin Bottom | Determine the spacing of the title from the bottom. |
| Description | Fill in the description text for the section. |
| Description Color | Set the color for description text. |
| Description Font Size | Determine the font size of the description text. |
| Description Margin Bottom | Determine the spacing of the description from the bottom. |
| Alignment | Align content to the left, the right or center of the section. |
| View All | Fill in the text for the view all link. |
| View All Font Size | Determine the font size of view all link. |
| View All Alignment | Align the view all to be either to the left, right or center of the section. |
| View All Font Weight | Select the font weight of the view all text. |
| View All Margin Bottom | Determine the spacing of the view all text from the bottom. |
| Enable View All Border? | Enable to underline the view all. |
| View All Link | Enter the link to redirect viewers to after being clicked. |
| View All Color | Set the color for the view all text. |
| View All Icon | Fill in the icon for the view all link along with its text. |
| Icon View All Color | Set the icon color of the view all link. |
| View All Icon Side (Left / Right) | Select the position of the icon to be on the left or right side of the view all link. |
| Maximum Brands to Show | Determine how many brands are shown in the section. |
| Item Per Row | Determine how many brands are shown at a time. |
#### SETTINGS FOR TITLE TAB
| Setting | Description |
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| Title Style | Select the style of the brand title tab to be either: style 1 (title with underline) or style 2 (title with rounded border) |
| Title Font Size | Determine the font size of the tab title in pixels on Desktop. |
| Title Font Size Mobile | Determine the font size of the tab title in pixels on Mobile. |
| Title Margin Bottom | Determine the spacing of the title from the bottom. |
| Color | Set the color of the tab title |
| Border Color | Set the color of the underline or the border of the tab title. |
| Background Color | Set the background color of the tab title. |
| Hover / Active Color | Set the color of the tab title when clicked or hovered. |
| Hover / Active Border Color | Set the color of the border of the tab title when clicked or hovered. |
| Hover / Active Background Color | Set the background color of the tab when click or hovered. |
| Button Show More | Enter the text for the show more button |
| Button Show Less | Enter the text for the show less button |
| Button Icon | Enter the icon (such as svg) for the button. |
| Color | Set the color for the show less/ show more button text. |
| Border Color | Set the border color for the show less/ show more button text. |
| Background Color | Set the background color for the show less/ show more button text. |
| Background Gradient | Set the gradient for the show less/ show more button text. |
