CMS media content can be associated with products and categories by adding the product or category to the Associated Catalog Items form field in the Metadata tab within Studio (see Section 6.2.3, “Adding CMS Content to Your Shop” in Studio User Manual).

To query this media content, the GraphQL types Category and Product contain the fields picture, pictures, video, videos, and media, where the singular forms just retrieve the first picture or video in the list.

For example, pictures associated with a product may be queried as follows:

{
  commerce {
    product(externalId: "ibm:///catalog/product/AuroraWMDRS-1",
            siteId: "99c8ef576f385bc322564d5694df6fc2") {
      name
      listPrice
      offerPrice
      pictures {
        name
        uriTemplate
        crops {
          name
          aspectRatio {
            width
            height
          }
          sizes {
            width
            height
          }
        }
      }
    }
  }
}

The picture and pictures fields have the types CMPicture and [CMPicture]! types, respectively. This way, the full functionality of CMS pictures may be used to enrich the catalog or product presentation, such as picture variants with responsive image URI templates.

As an alternative, the more general visuals field may be used to query for pictures, videos and other visual content as a single list.

Moreover, both categories and products have fields for catalog images. In the following example, the defaultImageUrl and catalogPicture.url fields are queried for a product:

{
  commerce {
    product(externalId: "sfcc:///catalog/product/25592211M",
            siteId: "sfra-en-gb") {
      name
      listPrice
      offerPrice
      locale
      defaultImageUrl
      catalogPicture {
        url
      }
    }
  }
}

If any picture is associated with the given product, whether within the eCommerce system or the CMS (by the aforementioned mapping in Studio), the returned URLs point to the corresponding picture, where annotated pictures from the CMS take precedence over pictures from the eCommerce system.

Note that a running CAE instance is required for actual delivery of catalog pictures (see Section 6.5, “eCommerce Setup and Configuration”). The URLs to catalog pictures are generated using a configured URLPrefixResolver. In the default configuration, in the CommerceConfig class, this is an instance of AbsoluteUrlPrefixRuleProvider. This way, the URL prefix is generated in the same way as in the CAE. Therefore, a proper site mapping needs to be configured for the Headless Server as well as for the CAE. See Section 6.4.2, “Augmented Categories and Products” on how to set up such a site mapping.