> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/bonnita-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/bonnita-documentation/sections/all-sections-in-theme/brand-tab.md).
# 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. |
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://halosoft.gitbook.io/bonnita-documentation/sections/all-sections-in-theme/brand-tab.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.