Product Images

Product images help to ensure that customers know what they are buying and increase the likelihood of a sale. If you have a product with different SKUs you can can upload images for each product variant.

Adding a Single Image

To add a single image:

1. Open the Global Menu () → Commerce → Products.

2. Select a product.

3. Go to Media and under Images, click Add () to add a product image.

   

4. Drag and drop an image or click Select File to upload an image.

5. Enter a title and click Publish.

Liferay DXP 2024.Q1+/Portal 7.4 GA112+ You can now tag images using tags from the Global scope. See Tagging Content and Managing Tags for more information.

This adds the new image to the product. Note that under Options, the message “There are no options set as the SKU contributor.” may appear. If this message appears, the product does not have additional associated SKUs, and the image added is the only one associated with the product.

Adding Multiple Images

You can also associate multiple product images with a single product. Ensure that you have product options created and multiple SKUs generated for each option.

After doing so, you can associate different product images to different SKUs.

1. Open the Global Menu () → Commerce → Products.

2. Select a product.

3. Go to Media and under Images, click Add () to add a product image.

4. Drag and drop an image or click Select File to upload an image.

5. Select an option value from the option drop-down to associate the image with.

   

6. Click Publish.

This associates the image with the selected product option value. Repeat these steps for all other available SKUs. For instance, you can use multiple images for a product that comes in different quantities. When searching for a product, you can view all the images in the product details widget.

Liferay DXP 2024.Q1+/Portal 7.4 GA112+ You can use the Use in Shopping Experience Image Gallery toggle to select images that appear in the product details widget.

Commerce 2.1 and Below

Adding a Single Product Image

To add a single image:

1. Navigate to Control Panel → Commerce → Products.

2. Select a product.

3. Go to Media and under Images, click Add () to add a product image.

4. Drag and drop an image or click Select File to upload an image.

5. Enter a title and click Publish.

This adds the new image to the product. Note that under Options, the message “There are no options set as the SKU contributor.” may appear. If this message appears, then the product does not have additional associated SKUs and the image added is the only one associated with the product.

Adding Multiple Product Images

You can also associate multiple product images with a single product. Ensure that you have product options created and multiple SKUs generated for each option.

After doing so, you can associate different product images to different SKUs.

1. Navigate to Control Panel → Commerce → Products.

2. Select a product.

3. Go to Media and under Images, click Add () to add a product image.

4. Drag and drop an image or click Select File to upload an image.

5. Select an option value from the option dropdown to associate the image with.

   

6. Click Publish.

This associates the image with the selected product option value. Repeat these steps for all other available SKUs. For instance, you can use multiple images for a product that comes in different quantities. When searching for a product, you can view all the images in the product details widget.

Commerce 2.0 and Below

Adding a Single Product Image

1. Navigate to Control Panel → Commerce → Products.

2. Select a product.

3. Go to Images and click Add () to add a product image.

4. Drag and drop an image or click Select File to upload an image.

5. Enter a title and set a priority.

   

6. Click Publish.

Adding Multiple Product Images

1. Navigate to Control Panel → Commerce → Products.

2. Select a product.

3. Go to Images and click Add () to add a product image.

4. Drag and drop an image or click Select File to insert an image.

5. Select an option value from the option dropdown to associate the image with.

6. Click Publish.

Related Topics

To configure a default placeholder image for products that do not have an image uploaded, see Configuring a Product Placeholder Image.