Add the language selector to the product details page

To view the translated name and description of your product in Sitecore Content Hub, you can add a language selector to the product detail page.

Important

Only make manual changes to page components using the Entity Manager in exceptional cases such as the set up of the language selector.

To add the language selector to the product details page:

  1. On the menu car, click Manage.

  2. On the Manage page, click Pages.

  3. In the left pane, enter Product details in the search box and click Search.

  4. In the left pane, click Product details.

  5. On the Product details page, on the Layout tab, in the HEADER ZONE (RIGHT), click Add component.

  6. In the Add component dialog box, enter HTML in the search box and click Search.

  7. In the component list, click HTML.

  8. In the Add component dialog box, do the following:

    • For Title, enter Language selector.

    • Click the Visible switch to make it active (On).

    • Click Add.

  9. On the Product details page, take note of the page Entity ID displayed in the URL of the address bar.

    Entity ID in the address bar
  10. Open a new browser tab and paste the following URL with your specific Content Hub URL and page entity id:

    RequestResponse
    https://<Your Content Hub URL>/en-us/admin/entitymgmt/entity/<Page entity id>
  11. On the product details Entity detail page, click the General tab, and scroll down to the Page components section.

    Entity ID in the address bar
  12. Click Language selector.

  13. On the Language selector Entity detail page, click the General tab, and click Edit Edit icon.

  14. Update the following:

    • For Data, click Switch editor mode, select Text, and enter the following code:

      RequestResponse
      {
       "controls": [
        {
         "type": "Details.Controls.LanguageSelector"
        }
       ]
      }
      
    • For Component, remove HTML and add Raw.

  15. Click Save. The Language component settings for Data and Component are updated as shown in the following example.

    Entity details page

    The language selector is now visible on the product detail page.

    Language selector on the product detail page

Do you have some feedback for us?

If you have suggestions for improving this article,