Commerce Images module: Image management for Drupal Commerce

At Acro Commerce, we’re very attentive to the needs of our clients. We’re constantly looking for newer and better ways of helping them do “Drupally” things. So when our client came to us with a request to make the process of adding images to product variations less painful, we listened.

This client had a massive catalogue of products, each of which had quite a few variations. When their employees went to add products to the catalogue, they would have to upload an image for each variation of that product, even if it was the exact same image as the previous product variation.

Let’s say they had a helmet in three sizes and three colours. They would have to upload and save nine images. And if they had two different angles of the same product, they would need to upload these images 18 separate times!

We agreed this process was worthy of streamlining. Our developers and designers got together and came up with a solution that would make things easier.

Commerce Images is an image management tool for Drupal Commerce that allows us to upload and set images for products and their variations quickly. It also dramatically reduces the need to store unnecessary duplicate images.

Once you install Commerce Images and set which product displays this module should be enabled for, you get a “Product Images” tab for each display bundle. So when you’ve finished adding all the product variations and their details, you can click on the “Product Images” tab to get a new interface for uploading images (shown below).

You get a list of the SKUs of the product variations you’ve set up, with checkboxes. In our case, we’ve got a helmet in three colours and three sizes. We’ll upload the image for the yellow-coloured helmet and use the checkboxes to select which SKUs this image should represent. Since the yellow helmet comes in three sizes, we’ll choose those three SKUs, enter an alt text title, and save the new image. We have two more pictures for the two other colours of helmets, so we’ll do the same for those as well. And that’s it!

You can use this tab to easily upload and select the images the SKUs represent without manually uploading and storing the same image more than once.

Removing SKUs from images is just as easy. Just uncheck the SKUs you don’t want a picture to represent and click the “Save Changes” button. You can also take an image off the site using the “Remove” button.

Now, going back to our example, if you do the math, you can see that we’d only need to upload the three images and select all the SKUs those images should represent. So, instead of uploading nine times (3x3) and storing the images in nine different places (six of which are duplicates), we’ve reduced it to just three unique images stored. That’s a 67 percent reduction in space, storage, and time!

Finding simple solutions to complicated problems is something we really enjoy. What kind of pain points do you have with your ecommerce solution? Tell us! Maybe we can help.