In this lesson, you will learn how to:
- Best practices of creating your carousel images
- Crop an image to fit your Bigcommerce carousel
- Create a new carousel image from smaller images you have
Creating a carousel is probably the most addictive part of building your online store. It’s not only fun, it’s a huge piece of valuable real-estate right smack dab on your homepage. Now, creating your carousel can also be frustrating as it is a huge piece of real-estate right smack dab on your homepage. Now, to avoid massive brain overload or wasting valuable time, we’re going to show you some highly-effective things you can do with the Bigcommerce carousel.
There are many ways in which you can utilize your carousel. Some of our clients use it to help build their brand, answer shopper’s common questions, communicate what they do, make announcements, the list goes on and on. Although, there’s no one-size fits all scenario you do want to make sure you have a goal for your carousel. It’s a great opportunity to engage with your shoppers.
The first step is to take some time to think about what you want for your shoppers to do when they arrive to your store.
Next, you’ll want to consider three main items to start; having some great images, writing enticing copy and including strong calls to action. If you’re not already aware, a call to action, or a “CTA,” could be something like; “shop now” for your most popular product. You can also test things like; “add to cart,” “buy now,” or “learn more.” So long as your CTAs are direct and make sense, you’re likely heading down the right path.
Again, you want to have a goal and then tell shoppers exactly what to do - so they do it!
Let’s jump into the control panel to get started with the Bigcommerce carousel.
In your control panel, select “Settings,” “Design” and then “Carousel & Social Media.”
Depending on which design theme you have chosen for your carousel the sizing will vary. For instance, take a look at Clarity vs Cookies & Cream design themes. It’s quite clear that the sizing of these carousels are different. This means that you need to pay close attention to the size of your images to avoid distortion. In order to find the exact sizing you need for your theme’s carousel here on a blank carousel image.
Now, I know you’re wondering, “how the heck do I make my images the right size before adding them to of my control panel?”
Well, there are tons of photo editing tools out there like Photoshop and Illustrator, but you will likely have to pay for them. If you’re on a budget, you can check out free online tools like Gimp.org, Getpaint.net and Pixlr.com. All of these work well but Pixlr.com is particularly easy to handle in our opinion. Actually, we love it so much we bake it into your Bigcommerce store. Simply go to “Content” and select “Image Manager” to upload images to your store and edit them via pixlr.com right here from your control panel. However, if you want to get nuts, go ahead to pixlr.com for even more tools and functionality.
Once at pixlr.com click the arrows at the bottom fo the page and you’ll see Pixlr Editor and Pixlr Express. Go ahead and choose Pixlr Editor to get started.
Simply the image you’d like to use from your computer. Very often your photo will be a different aspect ratio than your carousel. We need to try to match our image to your store’s preferred carousel size. Remember we are trying to get an image to be 980 pixels by 450 pixels. The toolbar to the left will have all of your tools, and they’re also listed throughout the file menu across the top. To cut your image down to size you’ll want the “Crop” tool. At the top set the Constraint: to Aspect Ratio, and then enter the width as 980, and set the height to 450. Now we’ll crop our image down to a useable area, by clicking in the upper left and dragging our cursor down to the lower right your mouse.
You can always drag around your image once you have your crop area created. By dragging we can get the perfect position. This photo will be great because we’re leaving some good room for our CTA or that call to action button. Now many themes will have the text positioned on the left of the carousel. If this text is going to be in the way of your image, you can always flip your image in pixlr, by going to Layer and then “Flip Layer Horizontal”. Now just save back to your machine and we can upload to our carousel.
Now sometimes you’ll have smaller items you’d like to add individually to make a carousel image. We can do this in Pixlr, This time create a new image. This option will allow you to set the canvas size first, so you can match the width and height to your theme’s carousel size. Let’s choose 980 pixels wide by 450 pixels high for this example.
Once you have your canvas Go to Layer and Open image as layer. You can move your image around the canvas and place it where ever you like.
Oh, quick note, make sure you’re saving as you edit your photos! We all know what it’s like to lose hard work.
If you have a colored background in the image image you would like to match to the rest of your carousel, go ahead and use the “color picker” tool to pick up the color of the background in your picture. Then use the paint bucket tool to add that color to the rest of the canvas so it blends together. Pretty snazzy right?
Have a background that is a little more complex? Tinker with the brush, clone tool, eraser...and much more. There’s tons of things buried right in this toolbar for you to play with. There are also loads of tutorials online and even in this “Help” menu item to help you edit your photos and answer your specific questions you may have.
Now once you are feeling good about your image you can go back to your control panel under “Carousel + Social Media.”
The first thing we need to do is delete our sample carousel images. To add and delete slides you’ll work from this row of thumbnails...here. Just click this small X on the thumbnail to remove a slide.
Here you’re gonna have two options you can either drag n drop your image, or select the file from your computer where ever you saved it.
Now, once you have a few slides you may find you would like to reorder your slides.
Simply grab ‘em and shift them around to change the order. You may also change the speed in which the slides transition right here.
Great, now what can you say to engage your shoppers?
Go ahead and use the Heading, Text and Button Text fields to work in your carousel copy. PLEASE, do not forget to add a link for this call to action button! There is nothing worse in a shopper’s experience than clicking on something where nothing happens.
All right, once you have things right where you want them click save and then refresh your storefront so you can view all of your tweaks and adjustments.
Excellent, that should help kick your carousel. While you’re working to launch your business, try not to get too hung up on this aspect as you want to get your store open for business.You can always come back to polish things up.
If you have specific design questions, feel free to check out our Community Forum as there are folks ready and waiting to help.