Getting Started with Product Images on BigCommerce

Are you struggling to upload product images to your BigCommerce store? In this video, Kal Wiggins, an ecommerce expert and developer, walks you through the process step-by-step. Whether you’re setting up your store for the first time or simply looking to enhance your product presentation, this video covers all the essentials.

Why Product Images Matter for Your BigCommerce Store

Images are one of the most important factors in converting visitors into customers. High-quality, consistent images help build trust and allow potential buyers to engage with your products more effectively. But it’s not just about quality; there are other considerations like aspect ratio, file size, and alternative image use that can drastically impact your store’s performance.

Kal’s video not only shows you how to upload and organize product images on BigCommerce, but also explains critical image tips you might not have considered. Here’s a quick summary to give you an overview:

Key Takeaways from the Video:

1. Use Square Images for Consistency (00:27)
   Kal recommends using square images with a resolution of 2000×2000 pixels. This aspect ratio ensures that your images display perfectly across all devices and platforms, including Amazon, which requires a white background image.
2. Edit & Compress Images with Canva (01:39)
   Easily edit your images using Canva. Kal explains how to create a 2000×2000 template, ensuring all your product images have a uniform aspect ratio. Canva’s Pro account also allows you to compress images, reducing file sizes without sacrificing quality.
3. Drag-and-Drop Image Uploading in BigCommerce (04:58)
   Learn how to upload and organize your product images with BigCommerce’s drag-and-drop functionality. Kal demonstrates how to set the main product image and reorder or delete others with ease.
4. Customize Product Card Images (09:21)
   Did you know you can use a different image for product cards? Kal shows how to assign specific images for product listings in categories or on the homepage, so your store looks professional and eye-catching.
5. Don’t Forget Image Alt Text (07:09)
   Image alt text is critical for SEO and accessibility. Kal stresses the importance of filling in descriptive alt text to help search engines and visually impaired users understand what your images depict.

Optimize Your BigCommerce Store with Expert Tips

By following these steps, you’ll ensure your BigCommerce store’s product images are optimized for conversions, speed, and visibility on search engines. Want to dive deeper? Watch the full video above and get started on enhancing your store’s product images today.

Full Transcript

(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.