# Product Tab

<figure><img src="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FzQMkjhiAaa5c7lkHUuMn%2Fimage.png?alt=media&#x26;token=e3de21c7-602b-469b-9175-d5223b1de803" 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="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FhdBi4vPiOxM8nt2Q72vN%2Fproduct%20tab.gif?alt=media&#x26;token=5fa817c9-c632-4590-8182-e19ba213ddea" 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.                                                  |
