3 ways to Add or Edit a Carousel on BigCommerce

Hey guys, are you trying to figure out how to edit your carousel in big commerce? In this video, I'm going to show you guys several ways to do that.

Before we get started, my name is Kal, I'm a developer, a store owner and I run an E commerce, I run the E commerce growth community for Facebook.

For store owners just like you and me, sorry, I can't talk today.

But each week, I post more ecommerce videos.

So if you find this one helpful, subscribe, hit the bell.

And you can see more, let me share my screen and I'm going to show you guys a couple different ways to edit your slideshow or carousel or whatever you want to call it on big commerce.

Now I'm running the cornerstone theme.

This is the default carousel that's built in to it.

Now I do want to give you guys a caveat and say, before I show you how to do this, why? Why Why have a carousel in the first place, you should know as or you should, you should, you should become knowing of the fact that ample studies have proven that having a slideshow above the fold on your homepage tends to reduce your conversion rate.

And so if making sales is important to you, maybe you should ask yourself, Do I really need a slider and if you have a great reason to perfect and if you don't, you know, maybe just have a static image.

So what I like on My Sites makes it makes your homepage load faster, because there are just fewer images to load.

There are fewer moving parts, so fewer things to get people distracted.

But putting that aside, in this video, I'm going to show you guys how to do it.

And there are several ways to do it.

Now before we get started, I do want to create a couple of different slides, I've already created some, this is Canva.

If you guys haven't used Canva, as a business owner, check out canva.com.

This is a free graphic editing tool.

There is a paid version, that's only a couple of bucks a month.

And it gives you even more features.

And you know, I created the slides with Canva.

The reason I wanted to show you this is that there's really you know, two different, you know, thoughts behind how you create a slide, the big question is to put text on the image, or to put no text on the image and then put text in with HTML afterwards.

So I've set up a slide with both and I've created a couple other slides with text on the images, I tend to lean towards putting images right on my slides or write on my heroes, because I want it to be highly designed, I want to use nicer fonts that I might not want to load on the whole page.

And I want to really control exactly where this shows up.

And you kind of lose control, whether you're using an HTML slider, or you know, you're going to put a lot of effort in there to get it exactly how you want it.

So I'm going to just export these real quick so that we have some slides to work with.

Just takes a second you can see it.

It's crunching.

Oh and Canva has like tons of images built into so all those images that you just saw me make the slides out of, we're all free under canvas, photo license with Shutterstock or somebody like that.

So I didn't have to buy these images, I didn't have to steal them, which is even better, because don't steal images, you're going to get caught.

Alright, so I have my slides.

Now they're over here on my other window.

Just show you guys those.

And let's go back into big commerce.

So again, this is how it looks right now.

This is the default slider, they have these terrible, terrible images in here.

When you first get your big commerce store, at least on Cornerstone.

So let me show you first of all, where to go to edit the settings of this.

So if you click into sorry, I clicked fast there.

We go back.

If you click into storefront thing, storefront my themes, and then customize here on the current theme.

This takes you into the Page Builder, the customizer, and if you click down here to theme styles, you'll see some settings for your theme, and on the homepage.

Button flyout whatever you wanna call this nav item, if you click that, there are some settings that come up including show carousel, which is my favorite because you can turn it off.

Turn it back on.

But then there's also show carousel arrows.

So there was some left right arrows here.

So this turns them on or turns them off.

There's this carousel play pause button, which I think is fairly hideous.

It's this little pause button down here.

So I turn that off.

And you can also say Allow image to stretch on large screen.

So if you want to pixelate your image and make it side by side, edge to edge, you could do that, I don't recommend that.

And then there's all these color settings that you could use for the various colors here.

So this is where you edit all these settings.

Alright, so now that we've done that, we're going to click Save to save the couple changes that we've made.

And we're going to click the big commerce logo to get back out of the customizer.

And now we're under the storefront bucket right now on the menu.

And you'll see just a couple of items down, there's a menu item here first homepage carousel.

So this is where you edit the actual slideshow.

I don't know why it's giving me this weird error.

This is where you edit the actual slideshow.

Now with the big commerce built-in carousel the actual quote unquote homepage carousel feature, you can have up to five slides, you cannot have six periods, you have to have up to five.

As you can see currently I have slide one, and slide two, if I wanted to.

If I wanted to delete one, I could just click that.

And now I only have one slide.

Now with this, if I click Save.

And if I go back to the front end, you'll see that my arrows are gone, even though I have arrows turned on.

And that's because there's only one slide so there's nothing to slide two are from.

So if you only have one, the slide loaded in here, then, you know, it's effectively a static image hero instead of a slider, I would put a static image in a different way than this because I don't even want to load all the slider JavaScript and whatnot.

That's, that's powering this.

So you know, I don't, I leave this turned off automatically.

And I use different methods, which I'm going to show you guys here in a minute.

But let's say we want to edit, let's say we want to use this right, what we can do is drag one of one of those images that I'm going to, I'm going to click on the slide to read drag this image in.

And it's going to take a second to load it.

Hopefully it loads it.

There it goes.

And we can come in here and put a heading.

And then we can put some text.

And then we can put button text for like this.

And then we can put a link, we're just going to point it to slash categories.

And we can also control how fast this thing slides.

So maybe you want it to slide in four seconds or whatever.

So let's click Save.

So now I have two slides, I have this ugly one and I have the new sexy one, I can change the order by dragging these left and right.

Click Save again.

And let's go to the front end car loads.

So if I click Refresh, there it is.

Loads my image, it puts this overlay on top of it.

And I don't love it.

I love it because it's clearly obscuring why the image, you know, the one that I showed you where I placed the image nicely on it.

This is why I tend to be in the camp where we put text on the you know, on the image so that we can totally control it and make it look nice, because what's the point of having a slider that doesn't look nice and doesn't convey your message.

It's just gonna annoy people.

Now the you know, the SEO people are always going to say that having text on here with HTML is better.

And yeah, technically, you will have one more word on your page.

And that's great.

But I don't think it's the end of the world, I think having that better user experience in this case is definitely better than having something that looks like this.

Now, that being said, you can edit how and where this shows up, you can have a developer, you know, change this to Dobby site wide, and then maybe position it in the bottom left.

And then this thing will always be positioned the bottom left, you can also make this less opaque.

You can change the colors, you can customize this all day long.

So you can improve on this.

And you know if you can, you know if you can use consistent positioning like I have in these example slides where it's always positioned in the same spot in the bottom left, then, you know, maybe the built in sliders is fine.

And you know, I've built e commerce stores on big commerce for 11 years now.

And for many of those years people really got by and we you know, we made the best of this and we could turn this into something really cool But you're probably gonna need a developer to make it into something cool.

And it's a little bit blah, right out the gate.

So, option one here is to put in a slide with no text and use the built in text functionality that turns it into HTML on top of the image.

So option number two is let's take those out.

And let's put the images in that I edited the text on to the images, but a load all three of them, click in the slide three, load the other one, just like that, click Save.

Come back to my front end, clip, refresh.

Man, look how much better this looks.

Look how much better this looks so much better.

Now, I probably should have gone a little bit wider on this.

I don't really like edge to edge.

But I think I went a little bit too narrow.

So I could you know, come back to my Canva and maybe make them 1800 pixels or something.

But yeah, so this doesn't look too bad.

You know, I still don't love it because it's a slider.

And I don't I'm not a fan of sliders, probably picking that up by now.

But that's how you do it.

This is how you make it look good using the built in slider.

But there is other ways.

So let me show you another way.

Another way is to go into storefront.

My themes, customize.

turn that one off by going back to homepage and unchecking homepage care.

So show care.

So alright, so it's gone now.

So option number two, instead of putting in a instead of putting in a carousel, use a use a static image, you know, let's put this in just like that.

And say yep, honestly, we just like that.

And look how good that looks.

No carousel needed, you guys.

You just have to pick one item and go with it.

Alright, so I know that's kind of a little bit of a trick answer because you guys are here to learn about carousels.

But there is a built in carousel that big commerce gives you right like this.

This, these are widgets, if you're unfamiliar with this, this is widgets.

And anywhere there is a field here that's coverable, like this global region or these blue regions, you could drag one of these widgets into it and one of those widgets as a carousel.

So we could drag this in here.

So I'm going to drag it and to this full width one right here.

And you can see, it also has some of this stuff, right? And so you can, let's see here, what can we do, we can click on the background thing, and we can change to a different image.

So we can say, let's change to this.

Oh, it doesn't like that one, I think because I uploaded it already.

So I'm going to upload a different one.

Alright, likes that one.

And so let's see here, can we get rid of the stuff.

So if we uncheck the eyeball on all these items, and it gets rid of that overlay, which is really nice.

And I think we need to switch to fit to box maybe yeah, so that gives that that unstretched as our image and makes it not cut off at the top of the bottom.

Alright.

Now there's a couple different slides here.

So if I click on Preview, then it'll show you what it's actually going to look like.

And I can slide through them.

And you can see that I have this slide here, which is not not matching.

So I'm going to just delete that one.

Then we'll come back here to this first slide and say Duplicate.

So now I have two slides that are the same.

And I'm going to click on the little background edit item here for the next one.

I'm going to upload another slide just like that.

So now I have two slides.

I click Preview, then there you go.

Now what's cool about this one is there's a little bit better control over what's here which is really nice.

If you do want some of these elements that are here you can easily control the length the theme, the the title, family, the weight, the font size, I guess you can't control the oh, you can't control the text color, which is right here.

So This kind of gives you a little bit more control over the older built in homepage carousel, which is really nice.

You know, but it is still a carousel technically.

And it's just kind of a normal carousel.

So this is another way.

And yet another way would be to use a custom widget.

So you know, we've put out a, an app for big commerce, let me show it to you.

We'll come back to this.

Where if you load this from the app store, you can find this in apps and go to big commerce apps and just do a search for Epic.

When you click into this, this is what it looks like once you load the app into your site.

And it'll come here to this configuration panel.

And it gives you all these additional widgets that you can put into your store.

And these get pushed into your customizer and then you can use them.

The one that we're going to look at today is called advanced slider just like that.

So we're going to go back to the customizer where our new widgets are, I'm going to show you this one, because this one's sorry, my head's kind of coming out of my bubble, let me get back in my pool.

Alright.

If I scroll down here and find advanced slider, here it is that I can drag that into one of these, and I can upload an image.

Let's see here, this one actually has a couple images already in it by default, let me just save this and refresh.

Cups.

Alright, so this is kind of a nicer slider than what's built in.

And we have a couple more sliders that we're going to put out to give you guys a couple different ways of doing this.

But you can see in this slider, we're actually showing, you know, kind of like one and a piece, which is kind of a fun aesthetic.

And we're showing some titles up here.

So if I click into this, it has three tabs, or three slides in here automatically.

And you can go and edit the title, the image title, you can edit this, this is the alt text, right, the image alt text, and this is the title one, this is the content.

Just like that, this is the top label.

So this is the thing that shows up up here.

Call this slide one.

This is the button text over here that says learn more chances to shop.

And so you can edit all these elements.

And the nice thing is that we're positioning this content to be not in the focal point of the image.

So it's not distracting from the image, but it is super available, you can come up here to the three dots and go to settings.

And here we can choose a background layer, which is useful if you're using this on a dark theme so that you can darken these up doesn't make as much sense on a light theme because it adds, it adds some darkness with an opacity to it.

So we're going to leave that off, you can position the content around here, you can say take those tabs that are at the top and put them on the bottom.

And what's cool about this, if I click Preview, is these are navigation for this.

So you can slide it left or right using like swipe on a mobile device if you will.

Or you can use these tabs to go through it just like that.

So this is just kind of like a nicer slider.

You know, if you do want a slider, I think it's nicer because it doesn't auto scroll.

And it does, it does offer an element that's a little bit unusual with this little piece hanging out and makes you want to see more.

So you click into it just like that.

So this would be something that's part of the epic page builder widgets.

App.

Alright, so that's what three four different concepts here for how to edit sliders.

The built in homepage carousel, which again, is on the homepage only and limited to five slides.

And the controls are a little bit rudimentary compared to some of this other stuff.

There is the big commerce slider widget which is already built into all stencil themes already free.

And there is the advanced slider widget and my plug in the Page Builder widget plug in.

And we're going to have more sliders coming too.

And we also went over kind of the concept of you know to put text on your on your slides or not to put text on your slides.

That is a question.

Alright, so hopefully you guys found this helpful.

I feel like I rambled on a little bit about sliders about, you know, my slight disdain for him, I don't completely hate them, they are kind of cool and kind of fun.

They just, you know, they're proven to lose you a few sales.

And maybe it's worth it, maybe it's worth it to get the coolness factor.

That's okay.

That's your decision, I want to show you guys a couple of ways to do it.

A couple of things to know is that the built-in homepage slider is on the homepage, only it is limited to five slides, the widget versions of what I showed you guys, both the big commerce built-in widget, as well as the premium widget from my plugin.

Those are available on any page where there is a widget.

So if you need a slider on your, you know, on your category page or at the bottom of your about page or something, you can, as long as there's a region there, you can use these region-oriented methods wherever there's a region, and if there's not a region there, have a developer put a region there, it's not very difficult.

And it really opens up what you guys can do with your store.

So wages are, I think, a big part of the future big commerce.

So consider that and embrace the widgets and try them out.

You might find that you really like them.

I sure do.

And, you know, if you guys found this helpful, hit the like button, and consider joining our community at join e-commerce growth.

com.

If you do need a developer hit me up at Epicdesignlabs.com.

And you know, I've been doing this for 10 years, I just want to help people build million-dollar stores, whether you're my client or not.

So if you are stuck on something or if you want to know something, leave me a comment below.

Let me know what you're stuck on.

And maybe that'll be my next video.

I really appreciate it.

Thank you, guys, so much and I will see you next time.

Thank you