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, media and downloads, 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 {
    productAugmentationBySite(externalId: "PC_ORANGE_TEA", siteId: "99c8ef576f385bc322564d5694df6fc2") {
      commerceRef {
        externalId
        siteId
        locale
      }
      pictures {
        name
        uriTemplate
        crops {
          name
          aspectRatio {
            width
            height
          }
          sizes {
            width
            height
          }
        }
      }
    }
  }
}

If any picture is associated with the given product in the CMS (by the aforementioned mapping in Studio), the returned URLs point to the corresponding picture.

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 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.

Any pictures or thumbnails defined on the commerce side should be retrieved from the commerce system endpoint.