While you don’t necessarily need to be using the BigCommerce carousel feature, it provides a lot of built-in value to eCommerce websites and can significantly improve the user experience of your eCommerce web design.
It’s also not rocket science. The BigCommerce carousel is simply a system of rotating images, potentially linked to other pages, that displays on your homepage, changing every few seconds so that your visitors get an impression of what your business does or provides. Among other things, your BigCommerce carousel can:
- Direct traffic to conversion-oriented pages.
- Streamline the user’s navigation experience on your website.
- Foster conversions for top-selling categories.
- Present opportunities for cross-selling opportunities.
It’s a great opportunity to put enticing and original product or company photography in front of your users, but it can also be a great avenue to promote services or specials. Best of all, it’s not too difficult a feature to use. Even without a BigCommerce web designer, you can create a basic carousel.
Here’s what you need to do:
1. Log into your BigCommerce admin portal
In the image below, you can see the admin portal of a BigCommerce store. This store uses the Cornerstone Light theme, which in this case, is a default. The theme you use will potentially impact the presence or appearance of your carousel, so keep that in mind. Also, if you’re thinking about changing, updating, or editing your current BigCommerce theme, please see our blog on that topic in the previous link.
There’s more than one way to make edits and adjustments to your BigCommerce carousel, but for the purposes of this tutorial, we’re going to show you one of the most user-friendly ways to do so. Before you actually change the carousel, you may choose to click on “View Store” as indicated in the image above. This is how your storefront looks to visitors of your online store. In this default example, the carousel has two slides and shows stock imagery of office products. Since 1DigitalⓇ Agency is, well, a digital marketing agency and does not sell lamps, we want to change our carousel to be more in line with what we offer.
2. Click on “Storefront” and then “Home Page Carousel”
Back in the admin portal, at the menu on the left, you will see “Storefont.” Click on “Storefront” and you’ll see a number of options, including “Theme Marketplace,” “Logo,” and “Homepage Carousel,” as indicated in the image below. Luckily, BigCommerce is fairly user-friendly and enables you to make a variety of edits, alterations, and customizations without knowing any code.
3. Upload images to your carousel
While you can edit your homepage carousel in any order you choose, we’re going to start with the imagery. We can then go back and edit the number of slides, heading, text, buttons, links, and alt text, along with the length of time a slide appears before rotating.
First, we’re going to get rid of the images that have default-populated this sample carousel by clicking the red X’s in the corner as indicated in the image below.
Once you’ve removed the images, you’ll see a section prompting you to drag and drop photos or to select them from your computer, as can be seen in the image below.
As you can see, you have two options for adding images to your carousel: Drag and Drop or select them from the files on your computer. For the purposes of illustration, we’re going to use some graphics representing some of our pillar services: eCommerce Digital Marketing, Design, and Development. We’re going to use three, but you can select up to five.
This is how the carousel building will look once you’ve uploaded the images you’d like to use:
You’ll notice that there are some important blank areas – such as the heading, text, alt text, and button texts. There are also no links, which we’ll change in a moment. The slides are also pre-set to rotate every 5 seconds, which we’ll leave alone, but you can change if you choose. Before going any further, click save in the bottom right corner.
4. Add Headings, Text, Button Text, and Links
To improve the appearance of our slideshow, we’re going to add headings and text for each image. For our Digital Marketing slide, we’ll choose Digital Marketing as the heading – and add a CTA.
First, we’ll show you an example of how to add a heading and some text using the Home Page Carousel tool in the back-end before we make customizations using the page builder.
For the slide featured below, we’re going to use the header “Digital Marketing,” and the descriptor text “SEO, PPC, Social Media Management and Email Marketing” as it gives a pretty good synopsis of our services. Enter this text in the two boxes indicated at the top of the page.
As you can see in our example, the text doesn’t look good on the slide – but don’t panic yet! We’re going to show you how to make some additional minor changes to this using the Page Builder. Before we get there, let’s add a button with a link to our Digital Marketing pillar page using a clear call to action.
How does “Grow Organic Traffic and Sales” sound? Let’s use that. Type it into the box at the top of the image above where it says “Button Text.” Then enter the URL of the page you want to direct traffic to. For us, this is our Digital Marketing pillar page. After you’ve done so, you’ll see what we have in the previous image (we already entered it).
Click save again (at the bottom right of the page as indicated in the image). Now we’re going to preview these adjustments to the website and make fine adjustments using the Page Builder tool. At the left of the admin portal, click on “View Store.”
As you can see, the front end looks a lot better than the back end, and the weird, misaligned white text has been replaced and the alignment fixed. However, the presentation is still a little bit bland. To make fine adjustments to the carousel, click on “Design this page in Page Builder,” which will show you this:
That will take you back to this page:
Now we’re going to show you how to make a few changes to the color of the text that appears here on the carousel display. However, it’s important to note that the theme controls the text font, the position of the text, and the image size, so if you don’t like the way it looks you’ll need to install a new theme or work with a BigCommerce developer to make advanced changes.
See the image below and click on “Theme Styles” (where indicated, it’s a palette) and then on “Home Page” where you can make a few adjustments to the color of the text on the carousel.
Here you can see that you can make some minor adjustments to the color of the text on your carousel if you so choose. Just make sure you click “Save” as indicated at the top of the image so that your changes aren’t lost.
You’ve just created a BigCommerce carousel for your online store – but there’s one more addition you may want to make to your carousel before calling it a day – you should add fitting Alt Text to the slide images. Go back to the “Homepage Carousel” tool where you started.
5. Bonus: Improve your BigCommerce SEO by adding Alt Text to your carousel
Look at the picture below, where you can see the carousel we just created.
If you zoom into the indicated region, you’ll see that this tool gives you the ability to add Alt Text to your carousel.
There’s one main reason you’ll want to do this before finishing – it can enhance your website’s SEO value. It’s called alternative text because it’s text that can be displayed in place of an image as an alternative to the visual. To properly optimize your carousel with Alt Text, you’ll need to perform keyword research, but in this instance, for our digital marketing services, we might enter “digital marketing,” “SEO” or “marketing services,” just as a cursory example.
Well done! You’ve just created your first BigCommerce carousel and even boosted your on-page SEO score a little with tasteful, well-researched alt text for your carousel images. You’re well on your way to a great shopping experience and an eCommerce website that is the image of search engine optimization.
However, if you’re interested in making advanced changes to your eCommerce website design and have a very specific image in mind for your brand, a BigCommerce partner can help you make the changes that are difficult to make using BigCommerce’s tools.
Whether you’re looking for a BigCommerce designer to take your carousel and your entire UX to the next level, or for an eCommerce SEO company to optimize your website’s meta descriptions, blog posts, page titles, and product pages as part of a genius SEO strategy, 1DigitalⓇ Agency is here to help.
Just see our eCommerce client portfolio for visual evidence of the type of creative genius we can pull off – and then give us a call at 888-982-8269 to make it happen for your website.
There may be a lot of BigCommerce designers out there, but There’s Only 1DigitalⓇ.
- Michael Esposito
- February 25, 2021