Configure the source for catalog images

Current version: 10.2

Media such as images can greatly enhance the impact and usability of a storefront site. Previously, media items were saved in the Media Library. With the introduction of the Sitecore Digital Asset Management (DAM) system, you now have the option to retrieve images from either the Media Library or the DAM.

Note

You can only use DAM as a source for catalog images when you create a custom integration with Sitecore DAM.

The default image source is the Media Library but you can configure the primary image source to be the DAM. You can do this at the site level or you can configure each individual rendering when inserted on a page item, a page, or a partial design. The site setting and the rendering-level setting are merged (using an OR operation) at runtime. If either one is selected, the images are retrieved from the DAM.

The following diagram illustrates how the rendering, the rendering model, as well as the providers and classes communicate when retrieving the image URL:

Sequence diagram for product image communication

The sequence diagram shows the:

  • CatalogProductImageOptions class - one of the arguments passed to the providers to create the CatalogProductImage object or to retrieve the image link.

  • CatalogProductInfoProvider - used by the repositories to retrieve the product information.

  • CatalogProductImagesProvider - used by the CatalogProductInfoProvider. It contains the logic for retrieving the image from the Media Library or DAM. It also contains the fallback logic.

    Note

    DAM images are not scaled in SXA Storefront.

The CatalogProductInfoProvider and CatalogProductImagesProvider are registered along with the CatalogProductImage class is in the Sitecore.Commerce.XA.Foundation.Common.config file.

Note

By default, if the product image is not available in the DAM, the image fallback is to retrieve it from the Media Library. You can change this behavior by customizing the CatalogProductImage provider.

Configure the catalog image source at the site level

To configure the catalog image source at the site-level:

  1. In the Content Editor, go to sitecore/<tenant>/<site>/Settings/Commerce/Catalog Configuration.

  2. On the Content tab, in the Commerce section, click the Use images from the Digital Asset Management system images check box.

    Site level check box for Use images from the DAM
    Warning

    The site-level setting and the rendering-level setting are merged (using an OR operation) at runtime. If either one is selected, the images are retrieved from the DAM.

  3. On the ribbon menu, click Save to save your changes.

Configure the catalog image source for a rendering

To configure the catalog image source for a rendering:

  1. In the Experience Editor, click a rendering on the page to select it.

  2. On the <rendering> toolbar, click More, Edit Component Properties.

  3. In the Control Properties dialog box, in the Catalog Images section, click the Use images from the Digital Asset Management system check box.

    Use images from the Digital Asset Management system check box
    Warning

    The site-level setting and the rendering-level setting are merged (using an OR operation) at runtime. If either one is selected, the images are retrieved from the DAM.

  4. On the ribbon menu, click Save to save your changes.

Do you have some feedback for us?

If you have suggestions for improving this article,