How to Manage Product Images in Magento 2 - HBWSL Magento2 Blog
Magento, Magento 2 Tutorials

How to Manage Product Images in Magento 2

Product images are most crucial part of your e-commerce site. A consumer will always evaluate the products of an online store based on the product images. It creates the first impression and helps to grab customer’s attention.

In this tutorial, we will take you through image section of products. This tutorial will guide you through a step-by-step process to add product images in Magento 2.


Step 1:

In the Admin Panel, click Products on the sidebar and go to the Catalog page.

Products Page Screenshot - Magento 2


Step 2:

When the Catalog page is opened, select the product to which you want to assign image and click on Edit button.

Catalog Page - Magento 2


Step 3: Scroll down the page and click on Images and Videos section.

Images and Videos Section on Catalog Page - Magento 2


Step 4:

Open the product in Edit mode.

Product View in Edit Mode - Magento 2


Now you can do the following:

  • Upload an Image: Magento provides two options for uploading images – you can opt for any option mentioned below:
    • Drag an image from your desktop, and drop it in the “Camera” icon tile on the Images and Videos Box.
    • Or while still on the Images and Videos Box, tap the “Camera” icon, and browse the image file from your computer. Then, select the image, and tap Open. It is just like uploading an image to your favorite social network.

As you can see in the picture, you can upload product’s image under the form of Base, Small, Thumbnail or Video. The Base image is the main image which is rendered on the product page.

 – Thumbnail images are shown on product listing page, for example, the Category page.

 – Small images are shown in mini cart and order details section on the Checkout page.

  • Assign
    • By default, all three roles are assigned to the first image, that is uploaded to the product. To reassign a role to another image, you open Image in Detail view, then simply check in the roles that you want to assign to that image.
    • The assigned role appears with a Checkmark in selected mode, and the previous image is no longer assigned to the role.
  • Enter the Alt Text.
    • Alt Text helps the Search Engine can understand what your image is about, so never forget about it.
    • Some browsers display the Alt text on mouseover. Alt text can be several words long and include carefully selected keywords.
    • In the Alt Text Box beside the image, enter a brief description of the image.
  • Hide an Image
    • If you don’t want customers to see an image, mark in the Hide from Product Page Box. Then, of course, tap Save.
    • This is all the thing you can do in Detail View of an Image. To exit the Detail view, click the “Close” Icon in the upper-right corner.
    • Finally, like all the time, tap Save.


Changing Image Position - Magento 2


  • Changing the position: If you have multiple images for your product and you want to display images in the specific sequence you can drag and drop images as per your requirement.
  • Deleting image: To delete the image click on the delete icon.

After you’ve done one of the above changes, click on Save button to save changes.

The product page will look like this:


Final Product Page - Magento 2


On that note, we hope this post helps you to assign product images and make your site beautiful!

Thanks for reading!


Share this Story
Load More Related Articles
Load More By Editorial Staff
Load More In Magento

Leave a Reply

Check Also

How A/B Testing Using Humcommerce Can Increase Conversions on Your Magento Store

Magento is one of the most powerful e-commerce ...