Customize display templates for an online store

  • Article

Important

This content is archived and is not being updated. For the latest documentation, see Microsoft Dynamics 365 product documentation. For the latest release plans, see Dynamics 365 and Microsoft Power Platform release plans.

Applies To: Microsoft Dynamics AX 2012 R3, Microsoft Dynamics AX 2012 R2

The Retail starter store is a site built by using the commerce runtime (CRT) and the new site authoring and publishing model in Microsoft SharePoint Server 2013. You can use the Retail starter store as a basis for developing your own online store. To customize the display of items from your catalog, you can modify the display templates for the search-driven Web Parts. For more information, see the section Search-driven Web Parts and display templates in Overview of the SharePoint 2013 page model.

You can modify any of the display templates that are found in the folder _catalogs\masterpage\Display Templates\Content Web Parts. This folder is available after you Map a network drive to the SharePoint Server 2013 files for the starter store.

The following table describes three display templates that you can modify.

File Name

Description

Contoso_Default_Item_ProductDetails.html

Display template for the Product Details page.

Contoso_Default_Item_ProductQuickView.html

Display template for the Product QuickView page.

Contoso_Default_Item_ProductGallery

Display template for the Product Gallery page.

To modify a display template

  1. Observe the web site behavior when you click on a product. For example, click Electronics, and then click a product name under one of the cameras to display the Product Details page.

  2. Map a network drive to the SharePoint Server 2013 files for the starter store.

  3. Open the Contoso_Default_Item_ProductDetails.html file in the _catalogs\masterpage\Display Templates\Content Web Parts folder.

  4. Find the text $resource(“ItemNumber”). ItemNumber refers to a string defined in the resource file, StorefrontResources.js.

  5. Open the StorefrontResources.js file.

  6. Find the text “ItemNumber”: “ITEM NUMBER:”, and change the text to read “ItemNumber”: “ITEM SERIAL NUMBER:”.

  7. Save your changes.

  8. Refresh the Product Details page in your browser and observe the changed text.

See also

Architecture of the Microsoft Dynamics AX Retail online store

Display template reference in SharePoint Server 2013

How to: Create a display template in SharePoint Server 2013