Image Management in B2C Commerce

Before you assign product images in B2C Commerce, learn the terms, limits, and catalog location. Then choose the topic for assigning images, catalog settings, view types, swatches, alt text, storage, or a size, crop, or format.

Which Salesforce Commerce Product Do I Have?

B2C Commerce Image Terms

B2C Commerce image management terms:

A variation attribute is a property such as color or size.
A standard product has no variations. You assign images to it directly.
A view type names where the storefront uses an image, such as large on the product page or swatch for the color chip. An image variant is the image for one variation value inside a view type.
An internal image is a file stored with the catalog. An external image is a path on another host.
An annotation is the alt text and image title stored with an image assignment. Alt text describes the image.
The image title is the title for that assignment.

For additional information, see Product Variations.

The Image Management System supports:

More than one image for a product, including a different image for each variation value, such as red or size 6
Image annotation with alt text and image title
Images located both within B2C Commerce and externally

Note You assign each image to a product. B2C Commerce does not choose an image from the file name.

B2C Commerce Image Limitations

Product images in B2C Commerce have file, path, and character limits.

Keep product images to 10 MB or smaller. Otherwise, Business Manager returns an error.
If the image JSON created for product images exceeds the 10 MB limit, Business Manager returns an exception error.
Don't use special characters, such as ü, in an image file name. Import and export can fail.
A product image path can be up to 1800 characters, and the full image URL can be up to 2056 characters.

B2C Commerce Image Location and Path

B2C Commerce stores the catalog image location and the product file path separately.

B2C Commerce stores the image location with the catalog.
B2C Commerce stores the product file path with the product, such as bar/your_image.gif. Do not include the host in that path.

System URL Address

Internal B2C Commerce knows the first part of the URL (server address, other URL parts). You specify a base image path, for example, "/images/foo/".

External

System	URL Address
Internal	B2C Commerce knows the first part of the URL (server address, other URL parts). You specify a base image path, for example, "/images/foo/".
External	You provide the first part of the URL. Specify an http URL or an https URL (protocol, server address, other URL parts). For example: `http url = "http://www.yourimagelocation.com/foobar/"` `https url = "https://yoursecureimagelocation.com/foo/bar/"`

You provide the first part of the URL. Specify an http URL or an https URL (protocol, server address, other URL parts). For example:

http url = "http://www.yourimagelocation.com/foobar/"

https url = "https://yoursecureimagelocation.com/foo/bar/"

Note Storefront code builds the full image URL from the catalog location and the product file path. The Script API class dw.content.MediaFile does that. See URLUtils and MediaFile. For size, crop, and format, see Dynamic Imaging Service.

Choose the topic for the job

Assign Images to Products in B2C Commerce attaches an image to a product.
Configure Catalog Image Settings in B2C Commerce changes the catalog location, view types, or catalog-level variation attribute.
Image View Types and Variants in B2C Commerce explains how view types group images.
Swatch Images for B2C Commerce Variation Products explains the swatch view type.
Image Alt Text and Title Annotations in B2C Commerce explains alt text, titles, and the lookup order.
Image Storage Locations in B2C Commerce explains where the files are stored and which content to replicate.
B2C Commerce Dynamic Imaging Service points to the developer guide when storefront code must request a size, crop, or format.