# Product Tab

<figure><img src="/files/tUZDHDs1d2ir5kXNPLw8" 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 "**Product Tab**".

<figure><img src="/files/w8vKNDxFEMQjNDpUpTNV" alt=""><figcaption></figcaption></figure>

## 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.                                   |
| Layout                                     | Select the layout for the items of the product block to be either Grid or Slider                                      |
| Title                                      | Enter the title for the section.                                                                                      |
| Enable Title Border?                       | Turn on the title border.                                                                                             |
| 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.                                                                   |
| Title Margin Bottom Mobile                 | Determine the spacing of the title from the bottom on Mobile.                                                         |
| Enable Title Border                        | Enable the title border                                                                                               |
| Title Border Color                         | Set the color of the title border.                                                                                    |
| Enable Title Border 2                      | Enable the title border style 2 if there is a banner block.                                                           |
| Border Color Title 2                       | Set the color for the title border style 2.                                                                           |
| Title Color                                | Set the title color for the section.                                                                                  |
| Alignment                                  | Select the position of the title to the left, right or center.                                                        |
| Maximum Products To Show                   | Limit the maximum number of products to fetch.                                                                        |

#### SETTINGS FOR GRID LAYOUT

The settings below are for grid layout only.

| Setting          | Description                                        |
| ---------------- | -------------------------------------------------- |
| Products Per Row | Select the number of products to show per row.     |
| Button Width     | Fill in the desired width of the load more button. |

#### SETTINGS FOR SLIDER LAYOUT

The settings below are the slider layout only.

| Setting          | Description                                      |
| ---------------- | ------------------------------------------------ |
| Show Dots        | Enable to show pagination dots.                  |
| Show Arrows      | Enable to show navigation arrows of the slider.  |
| Products Per Row | Select the number of products to show at a time. |

#### SETTINGS FOR BLOCK BANNER

| Setting     | Description                                                                  |
| ----------- | ---------------------------------------------------------------------------- |
| Position On | Select the position of the banner to the Left or to the Right of the block.  |
| Width       | Determine the width of the banner in percentage relative to the block width. |

#### SETTINGS TAB

| Setting                                       | Description                                                                                                      |
| --------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| Style Tab Title                               | Select the style of the tab title to be either: Style 1 (Tab title with background) or Style 2 (plain tab title) |
| Title Spacing Bottom                          | Determine the spacing of the title from the bottom.                                                              |
| Select Font Type                              | Select the font family of the title.                                                                             |
| Enable Separation Tab Title?                  | Show the separation between tab titles.                                                                          |
| Icon Separation With                          | Select the separation icon between '\|' and '/'                                                                  |
| Color Separation                              | Set the color for the separation icon.                                                                           |
| Enable Scroll Tab Title Mobile?               | Enable the tab titles to be scrollable on mobile if the width is larger than the viewport.                       |
| Tab Font Size                                 | Determine the font size for the tab title.                                                                       |
| Tab Font Size Mobile                          | Determine the font size for the tab title on Mobile.                                                             |
| Font Weight                                   | Select the font weight for the tab title.                                                                        |
| Font Weight Active                            | Select the font weight for the active tab title.                                                                 |
| Spacing Between Tab Title                     | Determine the spacing between the tab titles.                                                                    |
| Line Height                                   | Determine the line height of the tab title.                                                                      |
| Line Height Mobile                            | Determine the line height of the tab title on Mobile.                                                            |
| Border Radius                                 | Round the title tab corners.                                                                                     |
| Min Width Tab Item                            | Determine the minimum width of title tab.                                                                        |
| Border Width                                  | Specify the thickness of the tab border.                                                                         |
| Tab Color - Tab Border Color - Tab Background | Set the text color, border color, background for the tab title.                                                  |


---

# 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/bonnita-documentation/sections/all-sections-in-theme/product-tab.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.
