| Table of Contents |
|---|
...
1. Configuration
Admin can set several images for a product. Each image is set with a separate role to display in different places.
Note: Product image size should be in 1:1 ratio (ex: 600x600px).
Edit product image
- On the admin sidebar, navigate to Catalog > Products.
- Go to Products page, find the product need editing, click Edit under the Action column.
- On the product detail page, expand the Images And Videos section. Admin can add and set role for product images.
- Click on the image to set image role.
Note: An image can be set with several roles. A role can be assigned to one image only.
- To hide the image, select the option Hide from Product Page.
2. Image roles
There are 5 types of image role: Hover Image, Base, Small, Swatch, Thumbnail.
Base image
Thumbnail image
Small image
Hover image will display when users hover on the product in the list
...
- Base Image/Product main image: product's main image, can have 1 or multiple images
- Thumbnail: Product image shown in shopping cart
- Small Image: Images shown in pages which have lists of products. Ex: Category, product recommendation,...
- Swatch Image: Images used for highlighting product attribute options like color, fabrics, sizes,.. Swatch Image usually applies to products that have multiple options. (Configurable product)
- Note:
- Base image can have multiple images
- Thumbnails and small images should only have 1 image.
Magento recommend image size
- Base Image/Main Product Image: Around 360×360 to 1100×1100.
- Thumbnail Image: 100x100 pixels.
- Small Image: 250x250 pixels
- Swatch Image: 50x50 pixels
...