---
title: "Add the Product Gallery tab"
slug: "add-the-product-gallery-tab"
abstract: "How to add a Product Gallery tab to the product details page and configure the Search component."
---
# Add the Product Gallery tab

Images are retrieved from Sitecore Content Hub for display in the D365 Product Gallery using a public link to a specific rendition. To achieve this, you need to add a **Product Gallery** tab to the product details page and create the *Gallery Asset Selection* component, the *Gallery Asset Creation* component, and the *Product Gallery Asset Search* component as shown in the following image.

![D365 product details page](https://doc.sitecore.com/api/markdown-image/ch/en/users/content-hub/images/d365_product_details_page.png)

To add the **Product Gallery** tab to the product details page:

1. On the menu bar, click **Manage** :mdiCogOutline:.
2. On the **Manage** page, click **Pages** and, in the search box, type **Product details** and press Enter.
3. In the left pane, click **Product details**.
4. On the **Product details** page, in the **MAIN ZONE**, click the **Tabs** component.
5. On the **Tabs component** page, in the left pane, click **New tab**.
6. In the **New tab** dialog, in the **Name** field, type *Product Gallery*.
7. Click the **Visible** switch to make it active if it is not already, and click **Create**.
8. With the **Product Gallery** tab selected, click **Row** :mdiPlus: to add a new row.
9. In the top row, click **Row settings** :mdiCogOutline: and, in the **Row settings** dialog, click the **Columns** tab, select the two column option, specify the settings shown in the following image, and then click **Update**.

    ![Row settings dialog box](https://doc.sitecore.com/api/markdown-image/ch/en/users/content-hub/images/row_settings_dialog_box.png)

To create the *Product Gallery Asset Search* component:

1. On the **Tabs component** page, under **COLUMN 2**, click **Add component** :mdiPlus:, and, in the **Add component** dialog box, select the **Search** component.
2. In the **Component settings** dialog box, in the **Title** field, type *Product Gallery Asset Search*, click the **Visible** switch to make it active, and click **Save**.
3. Click the **Search** component you just created.
4. In the **Filters** section, on the **System** tab, click :mdiPlus: **Add filter** and do the following:
    - Select the **Definition** filter type.
    - From the **Definition** list, select *Asset (M.Asset)*.
5. Click :mdiPlus: **Add filter** again and do the following::
    - Select the **Relation** filter type.
    - From the **Definition** list, select *Status (M.Final.LifeCycle.Status)*.
    - From the **Field** list, select *Assets (FinalLifeCycleStatusToAsset)*.
    - For the **Operator** list, select **Equals**.
6. Click :mdiPlus: **Status** and, in the **Status** dialog box, select **Approved** and click **Save**.
7. Click **Save**. With this defined search component, the search page displays only approved assets from the standard repository.

To add a fixed filter to the *Product Gallery Asset Search* component:

1. On the **Search component** page, in the **Filters** Section, click the **Fixed** tab.
2. Click :mdiPlus: **Fixed filter** and do the following:
    - From the **Input type** list, select *Page entity*.
    - From the **Filter type** list, select *Relation*.
    - From the **Filter** list, select *Assets(ProductToGalleryAsset)*.
    - Choose the **Parent** option.
3. Click **Save**.
4. In the left pane, click **Functionality**, and click the following switches to make them active (On):
    - **Full-text search**
    - **Refresh button**
    - **Manual relation sort**
5. In the left pane, in the **Tools** section, click the following switches to make them active (On):
    - **Facets**
    - **Selection**
6. Click **Save**.

To update facets for the *Product Gallery Asset Search* component:

1. In the left pane, in the **Tools** section, click **Facets**.
2. On the **Standard** tab, click :mdiPlus: **Add facet**.
3. Define in the following settings to add a product color facet:
    - Next to **Facet type**, select the **Taxonomy item** option.
    - From the **Taxonomy item** list, select *Localization (M.Localization)*.
    - From the **Label type** list, choose *Default*.
    - From the **Sorting** list, choose *Count*.
    - From the **Direction** list, choose *Descending*.
    - Next to **Position**, select the **Top horizontal** option.
4. Click **Save**.
5. Repeat steps 2 to 4 to create three additional facets using the following taxonomy items:
    - *Asset type (M.AssetType)*
    - *Asset media (M.AssetMedia)*
    - *Restricted (M.DRM.Restricted)*
6. Click **Save**.

To update the selection and output:

1. In the left pane, in the **Tools** section, click **Selection**.
2. Next to **Selection pool**, choose the **Page-specific pool** option.
3. In the left pane, in the **Views** section, click the **List** switch to make it active.
4. In the **Image and icon** tab, from the **Image** list, select *Thumbnail (if available)*.
5. From the **Icon and color** list, select *From taxonomy relation*.
6. From the **Relation** list, select *Asset media (AssetMediaToAsset)*.
7. On the **Fields** tab, click :mdiPlus: **Add field** and define the following:
    - Next to **Type**, select the **Property** option.
    - From the **Field** list, select *Title(Title)*.
    - Accept the remaining default settings.
8. Click **Save**.

To add indicators to the *Product Gallery Asset Search* component:

1. On the **Indicators** tab, click **Add Indicator**.
2. From the list, select **Duplicates exist** and **Public links exist**, then click **Save**.
3. In the left pane, in the **Views** section, click the **Inline preview** switch to make it active.
4. In the **Image and icon** tab:
    - From the **Image** list, select *Thumbnail (if available)*.
    - From the **Icon and color** list, select *From taxonomy relation*.
    - From the **Relation** list, select *Asset media (AssetMediaToAsset)*.
5. On the **Fields** tab, click :mdiPlus: **Add field** and choose *From details component ‘AssetsEntityDetails*.
6. On the **Operations** tab, click **Add operation** and select *View detail page*.
7. In the **View detail page** section, in the **Link** field, click :mdiPlus:, and select **Asset detail for Link**, accept the default values, and click **Save**.
8. Repeat step 6 to add the following operations:
    - Download
    - Set as cover image
    - Archive
    - Delete
9. On the **Indicators** tab, click **Add indicator** and select *Duplicates exist*, leave the default values in the pop-up window and click **Save**.
10. Repeat step 9 to add *Draft*, *Public links exist*, *Locked*, and *Processing* indicators.
11. Click **Save and close**.

To add the *Gallery Asset Selection* component:

1. On the **Tabs component** page, with the **Product Gallery** tab selected, in **COLUMN 1** beneath the Product Gallery Asset Search component, click **Add component** **Add** :mdiPlus:.
2. In the **Add component** dialog box, choose the **Selection** component and, in the **Add component** dialog box, define the following:
    - In the **Title** field, type *Gallery Asset Selection*.
    - Click the **Visible** switch to make it active.
    - Click **Add**.
3. On the **Tabs component** page, click the newly created Selection component.
4. On the **Selection component** page, on the **General settings** tab, from the **Linked search component** list, select *ProductGalleryAssetSearch*.
5. Click the **Show select all** switch to make it active (On).
6. From the **Operations display format** list, select *Icon + Label*.
7. From the **Alignment** list, select *Left*.
8. Next to **Selection pool**, select the **Page-specific pool** option.
9. On the **Operations** tab, click **Add definition** button and select *M.Asset*.
10. Click **Add Operation** and select the **Delete** option.
11. In the dialog box, from the **Relations** list, select *Product Gallery (ProductGalleryToAsset)* and click **Save**.
12. Repeat steps 9 to 11 to add a *Create public links* operation and a *Refresh renditions* operation.
13. Click **Save and close**.

To add the *Gallery Asset Creation* component:

1. On the **Tabs component** page, with the **Product Gallery** tab selected, in **COLUMN 2**, click **Add component** **Add** :mdiPlus:.
2. In the **Add component** dialog, select the **Creation** component and do the following:
    - In the **Title** field, type *Gallery Asset Creation*.
    - Click the **Visible** switch to make it active.
    - Click **Add**.
3. On the **Tabs component** page, click the newly created Creation component.
4. In the left pane, select **General** and, on the **General** page, click the **Refresh page entity** switch to make it active (On).
5. In the **Linked search component** section, select the *Product Gallery Asset Search* check box.
6. In the left pane, click the **Linked items** switch to make it active.
7. With **Linked items** selected, in the **Linked items** section, from the **Label type** list, select *Custom*.
8. Next to the **Label** field, click **\+ Add translation**.
9. In the **Add translation** dialog, click **Choose existing** and select *T_system..AddToGallery*.
10. For the search component, select *Add approved assets for Product Gallery search*.
11. Click **Add definition** and select *Gallery Assets (ProductToGalleryAsset)*.
12. Click **Save and close**.

After you add the *Product Gallery* tab, you [create the Product Gallery URL mapping asset Search component](https://doc.sitecore.com/ch/en/users/content-hub/create-the-product-gallery-url-mapping-asset-search-component.html "Create the Product Gallery URL mapping asset Search component").