Thursday , April 18 2024
Home > Magento Tips & News > Magento 2 Tutorials > Catalog > Magento 2 Image Types: Swatch, Base, Small, Thumbnail Images

Magento 2 Image Types: Swatch, Base, Small, Thumbnail Images

When you edit product images on Magento 2 website, there appears a section named Roles. This section offers you 4 image types that are displayed in different places of your sites:

  • Base
  • Small
  • Thumbnail
  • Swatch
roles-in-product-edit-page

swatch-base-small-thumnail-images

Read this blog to know where to display these Magento 2 image types.

Magento Base Images

The Base image is the main image on the product detail page. It is the largest and highest-quality one among the four types. If the image you upload is larger than the image container, customers can click to zoom in the image. 

magento-base-product
zoom-in-base-image
You may also like:
6 Product Types In Magento 2: A Simple, Clear Explanation
How to Create Magento Product Attributes
Magento 2 Advanced Pricing Explained

Magento Thumbnail Image

Thumbnail images often appear in the thumbnail gallery on the product detail page. Besides, you can find these images in the shopping cart and in the Related Items section

thumbnail-image-in-thumnail-gallery

2. In the shopping cart

thumbnail-image-in-the-shopping-cart
thumnail-image-in-related-items-section

Magento Small Image

These images are often found on the homepage, category page, search result pages and New product list. Also, they are used in the up-sells section on the product detail page and cross-sells sections on the shopping cart.

1. On the Homepage

small-image-on-the-homepage-page

2. On the Category Page

small-image-on-the-category-page

3. On the Search Results Pages

small-image-on-the-search-result-page

4. In the Up-Sell Product Section

thumbnail-image-in-related-item-block

5. In the Cross-Sell Product Section

small-image-on-the-cross-sell

Magento Swatch Image

thumbnail-images
Magento Swatch Image

When your product has many colours like above (Amazon), each colour option is illustrated with a swatch image. So, customers can clearly see their wished item just by clicking on the swatch image.

Wrap it up

I hope this blog has cleared up your confusion about the display position of 4 Magento 2 image types: Base, Thumbnail, Small, Swatch. Learn more about Magento at Magento Tutorials.

Visit our store to pick up ones for your Magento stores for boosting your sales:

Optimize Your Magento Store With Powerful Extensions

Looking for fast, efficient and well-coded extensions to boost sales for your Magento stores? Then visit Magezon website and grab necessary add-ons to optimize yours today!

About Nga Dong

Nga Dong
A content writer and marketer in Magezon

Check Also

Magento Grouped Product vs Bundle Product: Key Differences

Being known as Magento product types which are made up of various single products, Magento …

Leave a Reply