Image order
The returned images on a product in the Storefront API are a subset of the imported product images.
The returned images in the Storefront API are affected by the Product Card configuration in the Experience app.
The Hover effect setting in the Product card configuration will decided how many images are returned and in which order.
The hover effect have 3 settings:
- Show image gallery on Hover, which returns the configured amount of images. Can be used to create a slideshow on the product card.
- Swap images on hover, which returns 2 images. The second image is intended to be shown when hovering over the image in the UI.
- No hover effect which only returns 1 image.
Note
The hover effect setting will always be gallery on product pages and all images will be returned.
The image prioritization can be based on type of image as well as tags. You can specify the order for each setting in the Experience App > pages > settings.
Note
Swap has separate priorities for idle and hover image.
The available image types are: Cutout, Model, Misc, and TAG which is a user defined entry based on imports.
You can set the initial type of an image with the type_default
attribute, and specify: model
, cutout
or misc
to immediately have a type on the picture before it has been analyzed. If you don't want the type to be overridden by the image analyzer you can use the type_override
attribute instead.
If you specify the order "Cutout[1], Model[1], TAG" the first Cutout image will be choosen before the first Model image, and the the TAG image will have the lowest priority.
Images that are down, unreachable by us, will not be returned unless there are only unreachable images in which case only one image will be returned. Images that only have small resolutions, <= 100 pixels width, will only be returned as thumbnails.
Another situation is when there is only one picture present, and a hover effect that requires more than one image is required. In this case, only one image is returned and the effect
of the image is set to NONE
in the storefront api.
More information on how to work with tags on images, can be found in the image-tag guide.