was successfully added to your cart.

How to Manage Product Images in Magento 2

Feature Image - Managing 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

 

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

 

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

Images-and-Videos-Section-on-Catalog-Page

 

Step 4:

Open the product in Edit mode.

Open-Product-in-Edit-Mode

 

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

 

  • 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

 

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

Thanks for reading!

 

Editorial Staff

About Editorial Staff

We are a team of Magento ecommerce developers and SEO experts at Humcommerce. We write about anything and everything which can help you run your Magento 2 ecommerce store better.