# 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)


---

# 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://docs.scandipwa.com/tutorials/customizing-your-theme/customizing-javascript/adding-a-tab-on-the-product-page.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.