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


---

# 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://docs.scandipwa.com/tutorials/customizing-your-theme/customizing-javascript/adding-a-tab-on-the-product-page.md?ask=<question>&goal=<endgoal>
```

`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.