--- title: "Walkthrough: Configuring direct navigation on an existing site" slug: "walkthrough--configuring-direct-navigation-on-an-existing-site" abstract: "How to configure direct navigation on existing sites so that category and products are considered unique in terms of presentation and analytics." --- # Walkthrough: Configuring direct navigation on an existing site Direct navigation means that Sitecore displays the catalog item directly. As a result, the presentation, page events, goals, analytic profiles, campaigns, and personalization are all available from the catalog item. This means each category and product in the catalog can be unique in terms of presentation and analytics. To enable direct navigation for an existing site, you must have override templates that you map to page designs. You can create your own or you can use the templates and page designs provided with the Storefront site template. > [!note] > For a new site that does not use the Habitat catalog or an existing sites where you create a custom catalog and associate it to the site, you only have to [override the templates](https://doc.sitecore.com/xp/en/developers/103/sitecore-experience-commerce/walkthrough--configuring-direct-navigation-on-an-existing-site.html#UUID-dfe919d0-e08d-918e-eb90-f075e849cbf2_section-5c588b3c9025f-idm44903073874624 "Override the templates used by the data provider") and [enable direct navigation](https://doc.sitecore.com/xp/en/developers/103/sitecore-experience-commerce/enable-direct-navigation.html "Enable direct navigation"). This walkthrough describes how to: - [Create override templates](https://doc.sitecore.com/xp/en/developers/103/sitecore-experience-commerce/walkthrough--configuring-direct-navigation-on-an-existing-site.html#UUID-dfe919d0-e08d-918e-eb90-f075e849cbf2_section-5c5887d78518d-idm46506078793360 "Create override templates"). - [Create a partial design](https://doc.sitecore.com/xp/en/developers/103/sitecore-experience-commerce/walkthrough--configuring-direct-navigation-on-an-existing-site.html#UUID-dfe919d0-e08d-918e-eb90-f075e849cbf2_section-5c6fe1b165b1f-idm46092396756928 "Create a page design for each override template"). - [Create a page design to map to each override template](https://doc.sitecore.com/xp/en/developers/103/sitecore-experience-commerce/walkthrough--configuring-direct-navigation-on-an-existing-site.html#UUID-dfe919d0-e08d-918e-eb90-f075e849cbf2_section-5c6fe1b165b1f-idm46092396756928 "Create a page design for each override template"). - [Map a template to a page design](https://doc.sitecore.com/xp/en/developers/103/sitecore-experience-commerce/walkthrough--configuring-direct-navigation-on-an-existing-site.html#UUID-dfe919d0-e08d-918e-eb90-f075e849cbf2_section-5c18e8e099d40-idm46481590101520 "Map a template to a page design"). - [Override templates used by the data provider to expose catalog items](https://doc.sitecore.com/xp/en/developers/103/sitecore-experience-commerce/walkthrough--configuring-direct-navigation-on-an-existing-site.html#UUID-dfe919d0-e08d-918e-eb90-f075e849cbf2_section-5c588b3c9025f-idm44903073874624 "Override the templates used by the data provider"). > [!note] > By default, direct navigation is turned off for existing sites. For new sites, it is enabled by default. You can [enable direct navigation for items using custom templates](https://doc.sitecore.com/xp/en/developers/103/sitecore-experience-commerce/walkthrough--enabling-direct-navigation-for-customized-commerce-entities.html "Walkthrough: Enabling direct navigation for customized Commerce entities").

Create override templates

 Presentation is usually set on standard values of the Page Type templates. To support unique presentations for individual storefronts in the same solution without needing a set of catalog templates for each site, you can use [template-to-page design mapping](https://doc.sitecore.com/xp/en/developers/sxa/103/sitecore-experience-accelerator/create-and-assign-a-page-design-in-the-content-editor.html). Following Helix guidelines, there are a number of different template types in use as illustrated in the following figure. When you use override templates, the Page Type template becomes a container that inherits from other base templates and the template-to-page design mapping determines the page design. It is the template that defines the data structure and data inheritance required to render a page. ![Overview of template types.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/103/sitecore-experience-commerce/images/TemplateStructure.png) With the Storefront site template, the following override templates are provided by default. The following procedure creates a Commerce Category override template that lets you add presentation details at the category level. | Override template | Base templates | | --- | --- | | Commerce Bundle | | | Commerce Category | | | Commerce Dynamic Bundle | | | Commerce Product | | | Commerce Product Variant | | > [!note] > With the *default* Storefront implementation, Product Variants are not direct page request targets, only the parent product is. As a result, you can leave the Commerce Product Variant override template field empty. To create a category template: 1. In the Content Editor, navigate to */sitecore/Templates/Project/*, right-click and then click **Insert, New Template**. 2. On the **Select name** page, enter *Commerce Category* as the name for the category template. 3. In the **Base Template** field, navigate to *Templates/Project/* and select the **Catalog Navigation Page** template, and click **Next**. 4. On the **Location** page, accept the default location (*Project/*), click **Next**, and then click **Close**. 5. On the **Content** tab, in the **Data** section, in the **All** list, navigate to the *Templates/Foundation/Commerce Experience Accelerator/Commerce Pages* folder and double-click the **Catalog Category Page** to move it to the **Selected** list. 6. Navigate to *Templates/Commerce/Catalog* and double-click **Commerce Category**. 7. Navigate to *Templates/Foundation/Experience Accelerator/Search/Computed Fields* and double-click **_SearchableWithoutRelatedItems**. ![Data section of the Catalog Navigation Page template.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/103/sitecore-experience-commerce/images/CommerceCategoryData.png) 8. On the ribbon, click **Save**. You must repeat this procedure to create each of the other templates shown in the previous table and ensure the associated templates shown are selected. > [!note] > You can verify the template assignment by selecting a category in the catalog and, in the Quick Info section, ensuring that the template links to the correct category template.

Create a partial design

 Each override template is associated with a page design. To begin with, you must create two partial page designs that you use to create the required page designs. To create a partial page design: 1. In the Content Editor, navigate to *sitecore/Content///Presentation*. 2. Right-click **Partial Designs** and click **Insert, Partial Design**. 3. In the **Message** dialog box, enter *Commerce Category Main* as the name and click **OK**. 4. To apply the same design as the Category page (Shop/\*page), navigate to *sitecore/Content///Home/Shop/\**. 5. With the \* selected, on the ribbon, on the **Presentation** tab, click **Details**. 6. In the **Layout Details** dialog box, click **Copy To**. ![Layout Details dialog box.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/103/sitecore-experience-commerce/images/LayoutDetailsPageDesigns.png) 7. In the **Target Devices** list, select the **Default** check box. 8. In the **Target Item** list, select the partial design you created previously (*Commerce Category Main*). ![CopyToUpgrade.png](https://doc.sitecore.com/api/markdown-image/xp/en/developers/103/sitecore-experience-commerce/images/CopyToUpgrade.png) 9. Click **Copy** and then click **OK**. 10. Repeat these steps to create the *Commerce Product Main* partial design. Use *Commerce Product Main* in Steps 3 and 8. > [!note] > When you create a product page, you must navigate to the */sitecore/Content/Sitecore/Storefront/Home/Shop/\*/\** item.

Create a page design for each override template

 Using the partial designs created in the previous procedure, create a page design for each [override template](https://doc.sitecore.com/xp/en/developers/sxa/103/sitecore-experience-accelerator/create-and-assign-a-page-design-in-the-content-editor.html). To create a page design for each of the override templates: 1. In the Content Editor, go to *sitecore/Content///Presentation*. 2. Right-click **Page Designs** and click **Insert, Page Design**. 3. In the **Message** dialog box, in the name field, enter a page design name (Commerce Category Page, Commerce Product Page, Commerce Product Variant Page, or Commerce Bundle Page as shown in the following table) and click **OK**. 4. Select the newly created page design and, on the **Content** tab, in the **Designing** section, double-click the relevant partial designs as shown in the following table to move them to the **Selected** list. | Page design name | Selected partial designs | | --- | --- | | *Commerce Bundle Page* | Default Commerce Header

Default Main Product Page Content

Default Commerce Footer

Commerce Metadata | | *Commerce Category Page* | Commerce Header

Category Page Content

Default Commerce Footer

Commerce Metadata | | *Commerce Product Page* | Default Commerce Header

Default Main Product Page Content

Default Commerce Footer

Commerce Metadata | | *Commerce Product Variant Page* | Default Commerce Header

Commerce Main Product Page Content

Default Commerce Footer

Commerce Metadata | ![PageDesignsUpgrade.png](https://doc.sitecore.com/api/markdown-image/xp/en/developers/103/sitecore-experience-commerce/images/PageDesignsUpgrade.png) 5. To save your changes, click **Save**.

Map a template to a page design

 To map a template to a page design: 1. In the content tree, go to *sitecore/Content///Presentation* and click **Page Designs**. 2. On the **Content** tab, in the **Designing** section, map the category override templates to relevant page design as illustrated in the following example. ![CategoryTemplateMapping94.png](https://doc.sitecore.com/api/markdown-image/xp/en/developers/103/sitecore-experience-commerce/images/CategoryTemplateMapping94.png) 3. To save your changes, click **Save**. You must repeat the procedure for the product variant, static bundle, and dynamic bundles templates.

Override the templates used by the data provider

 By default, catalog items are based on global commerce templates, which means you cannot use them in a multi-site setup and with template-to-page design mapping. It is for this reason that you must base the catalog items on tenant-specific override templates. To override the templates used by the data provider: 1. In the Content Editor, navigate to */sitecore/Content///Home/Catalogs*. 2. Click a catalog. 3. On the **Content** tab, in the **Template Overrides** section, for each template type, click in the field and map the override template to a project template in the *Templates/Project/* folder. 4. For your changes to take effect, on the ribbon, on the **Commerce** tab, click **Refresh Commerce Cache** . Now you can [enable direct navigation](https://doc.sitecore.com/xp/en/developers/103/sitecore-experience-commerce/enable-direct-navigation.html "Enable direct navigation") for the storefront site.