Getting Started with Product Images on BigCommerce

(00:01)
Hey there! Are you looking to add product images to your BigCommerce store? In this video, I’m going to show you how to do that and share some considerations you may not have thought about.
My name is Kal. I’m a developer, store owner, and I run the eCommerce growth community Forester for owners just like you and me. Every week, I post more eCommerce videos, so if you find this one helpful, subscribe and hit the bell. Let’s get going!
(00:27)
Alright, I’m going to share my screen and show you a few things. First off, I have a test product set up. But before I show you how to add your products, we need to talk about aspect ratios for a minute. I’d be neglecting something important if I didn’t explicitly mention that all of your product images should follow the same aspect ratio.
What is aspect ratio? It’s the ratio of the width to the height of an image. If it’s a square, it’s 1:1; if not, it’s a different ratio. Ninety percent of stores should use square images. It’s the easiest to remember and looks consistently good on all devices. If you sell a product that’s taller and all of your products are tall, you might want a different ratio. But in most cases, square images work best.
(01:39)
Let me show you an easy way to achieve this with Canva. There are many tutorials out there, so I won’t go too deep, but with Canva, you can create a template—let’s say 2000×2000 pixels—and any image you add will follow that same aspect ratio.
If you have a paid account, which is very affordable, Canva will even compress your images. It’s a great tool!
(02:16)
Here’s an example: I dragged in a picture of a water bottle from Canva’s free image library. But for your real products, you should be using your own photographs or ones taken by a professional, not stock images. However, for this demonstration, we’ll use a free image.
Typically, you want a white background for the main image of your product on the product page. If you plan to sell on other marketplaces like Amazon, they’ll require white background images. So it’s best to make sure you have that from the start.
(03:16)
You don’t have to use Canva; Photoshop works too, or whatever tool you’re comfortable with. But with Canva, it’s literally as easy as dragging an image into the template, resizing it, and then downloading it in your desired aspect ratio, like 2000×2000.
(03:45)
Let’s download these two images. Since I have Canva’s Pro account, I can also decrease the image quality to 80% to compress the file size without losing any noticeable detail.
(04:58)
Now, let’s upload these images to BigCommerce. I’ve already set up a test product. If you’re still setting up, you can go to Products > View and click Add.
I’ve already entered basic information like the name, price, and category. Now, let’s scroll down to the Images section. If your screen doesn’t look like mine, you’re probably using the V2 UI. This is the V3 UI, but for images, it works the same way.
(05:31)
You can drag and drop images to upload them. I’ll drag both of mine here, and now they’re uploaded.
(06:06)
Let’s make the white background image the main one on the product page. To do that, simply grab the handlebar icon (the six dots), drag the white background image to the top, and click Save. Now, when you refresh the product page, you’ll see that the white background image is the first one displayed.
(07:09)
You can manually reorder the images as needed. Just drag and drop them in the order you prefer. If you want to delete an image, click the little trash icon next to it.
(07:45)
Don’t forget to add alt text for each image! It’s important for SEO and accessibility. Google needs to know what your images are about, and this is how visually impaired visitors will understand what the images are. So, always fill in the alt text fields!
(08:46)
Now let’s talk about product cards. This is where images show up in category pages, related products grids, homepages, and more. If you want a different image, like a lifestyle shot, for your product card instead of the white background image, you can set that up easily.
(09:21)
To do this, click the radio button next to the image you want to use as the product card image. When you refresh, you’ll see that image is now being used for product cards, but the product page still uses the white background image.
(11:05)
Another feature is the zoom effect on your product images. To ensure your images are zoomable, upload them at a high resolution—at least 2000×2000 pixels. This allows visitors to see more detail when they hover over the image. If you upload a lower resolution image, the zoom won’t work.
(13:51)
To summarize:
Use a tool like Photoshop or Canva to edit images.
Stick to 2000×2000 pixels and a square aspect ratio for all images.
Upload images with a consistent aspect ratio to save time.
You can choose different images for product pages and product cards.
Fill in your image alt text for SEO and accessibility.
(14:26)
I hope this was helpful! If it was, hit the like button and leave a comment. Let me know if you have any questions or if there’s something else you’d like to learn. I make these videos weekly, so your suggestions might be in my next video.