> For the complete documentation index, see [llms.txt](https://docs.scandipwa.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.scandipwa.com/tutorials/customizing-your-theme/customizing-javascript/adding-a-tab-on-the-product-page.md).

# Adding a Tab on the Product Page

In this quick guide, you will learn about adding a tab to the product page. As you'll see, it will be very similar to the previous tutorial, as it uses the same pattern. 

## Inspecting the Codebase

First, we need to find the code responsible for rendering the product page tabs. You can use the [React developer tools extension](/developing-with-scandi/developer-tools.md#browser) to find which components are being rendered. Searching the codebase can also be useful.

We find that the `ProductPage` route is itself responsible for configuring the tabs:

{% code title="node\_modules/@scandipwa/scandipwa/src/route/ProductPage/ProductPage.component.js" %}

```jsx
    tabMap = {
        [PRODUCT_INFORMATION]: {
            name: __('About'),
            shouldTabRender: () => {
                const { isInformationTabEmpty } = this.props;
                return isInformationTabEmpty;
            },
            render: (key) => this.renderProductInformationTab(key)
        },
        [PRODUCT_ATTRIBUTES]: {...},
        [PRODUCT_REVIEWS]: {...}
    };
```

{% endcode %}

Now, we want to add our own tab to the mix!

## Adding a New Tab

First, let's override the `.component` file of the `ProductPage` route. You can easily do this using the `scandipwa` [CLI](/developing-with-scandi/developer-tools/scandipwa-cli.md):

```bash
scandipwa override route ProductPage
```

Make sure to select the `ProductPage` class in the `.component` file, because this is where we want to make modifications. You can also extend the styles if you intend to update them.

```
? Choose things to extend in ProductPage.component.js ProductPage
? What would you like to do with styles? Extend
? Choose things to extend in ProductPage.config.js 
? Choose things to extend in ProductPage.container.js 

NOTE!

     The following files have been created:
     src/route/ProductPage/ProductPage.component.js
     src/route/ProductPage/ProductPage.override.style.scss
```

Now, jump into the `.component` file and update the `tabMap` by adding your own tab.

{% code title="src/route/ProductPage/ProductPage.component.js" %}

```jsx
import {
    PRODUCT_ATTRIBUTES,
    PRODUCT_INFORMATION,
    PRODUCT_REVIEWS
} from 'Route/ProductPage/ProductPage.config';
import {
    ProductPage as SourceProductPage
} from 'SourceRoute/ProductPage/ProductPage.component';

import './ProductPage.override.style.scss';

/** @namespace TutorialCsaApp/Route/ProductPage/Component/ProductPageComponent */
export class ProductPageComponent extends SourceProductPage {
    tabMap = {
        [PRODUCT_INFORMATION]: {
            name: __('About'),
            shouldTabRender: () => {
                const { isInformationTabEmpty } = this.props;
                return isInformationTabEmpty;
            },
            render: (key) => this.renderProductInformationTab(key)
        },
        [PRODUCT_ATTRIBUTES]: {
            name: __('Details'),
            shouldTabRender: () => {
                const { isAttributesTabEmpty } = this.props;
                return isAttributesTabEmpty;
            },
            render: (key) => this.renderProductAttributesTab(key)
        },
        GUARANTEE_TAB: { // <-- we added a new tab here
            name: __('Guarantee'),
            shouldTabRender: () => false,
            render: (key) => this.renderGuarantee(key)
        },
        [PRODUCT_REVIEWS]: {
            name: __('Reviews'),
            shouldTabRender: () => false,
            render: (key) => this.renderProductReviewsTab(key)
        }
    };

    // the function responsible for rendering the tab content
    renderGuarantee(key) {
        console.log(key);
        return (
            <section block="ProductPage" elem="Guarantee" key={ key }>
                <h1>{ __('Our Promise to You') }</h1>
                <p>
                    { __('Everything we make is guaranteed to work for at least two years. It cannot break. If it'
                        + ' breaks it\\'s probably your fault.') }
                </p>
            </section>
        );
    }
}
```

{% endcode %}

## Result

If you check the product page in your app, you'll see that the tabs are now updated, and include our new tab:

![](/files/-Me9tj8Bt5VjP5kPqD9Y)