How do I add a Carousel and resize the Carousel to fit on my template?

  • 0
  • 3
  • Question
  • Updated 4 years ago
  • Doesn't Need an Answer
Storefront powered by Bigcommerce has rolled out a dynamic, new feature that allows you to have a built-in carousel, also known as a slider or slideshow, on any of our templates. This article will guide you through how to resize the carousel if you are using it on an older template and need a smaller width for the slide show display.

Activate and Customize the Carousel

1.) You will first want to create your carousel and add it to your store. To do this, log into your Control Panel and click on Design at the top right of the screen.

2.) Click on second tab labeled Carousel & Social Media and then click on the Enable Carousel and Social Media Builder button. You will then see the Bigcommerce test Carousel slides load on the tab. You can customize these slides to add your own content.

Please note that in order to view the Carousel & Social Media tab, you will need to be viewing the Control Panel in the New Look also known as the Modern Userinterface or Modern UI. If you don't see the Carousel & Social Media tab look for a teal blue bar or teal blue arrows at the bottom of your Control panel and click "Try it Now" to enable the New Look. Then follow Steps 1 and 2.

Set the Carousel to Display on your Home Page

3.) Next you will want to enable the Slideshow to display on your Home Page. You can do this by adding the panel %%Panel.HomeSlideShow%% to your Default.html template file.

The Carousel will now display, but because its default settings are for our newer templates which are designed with a one column homepage layout and no sidebars, the first template slide on the Carousel is really big! Let's resize it so that it fits the middle column of the template.

Resize the Carousel

4.) Let's go back to our Template files area by clicking on Design at the top right and then clicking on the Template Files tab. From here, let's navigate down to the Styles folder and click the "+" sign next to it to open it. Then click the Edit button next to the slide-show.css file.

5.) Search for and edit the following pieces of code to bring down the max-height fields from the default of 450px down to something smaller, such as 250px:

.slide-show-render-full .drop-indicator {
height: 450px; //edit this size to something smaller like 250px

.slide-show-render-full .slide-image {
max-height: 450px; //edit this size to something smaller like 250px

.slide-show-render .slides li {
height: 450px; //edit this size to something smaller like 450px

.slide-show-render-full .slide-overlay {
top: 90px; //edit this to something smaller like 20px

.slide-show-render .slides {
height: 454px; //edit this size to something smaller like 254px

6.) Click on Save in the upper left hand area of the template file page.

7.) Now if you view your Store Home page and refresh the page (you can do this by pressing the 'F5' button at the top of your keyboard), you will see that the slideshow displays on the home page and fits nicely into the template's 3-column layout.

Photo of Mike F.

Mike F., Alum

  • 183,908 Points 100k badge 2x thumb

Posted 4 years ago

  • 0
  • 3
Photo of albertcprice1863


  • 90 Points 75 badge 2x thumb
Why can't i add this feature to one of my regular pages (i.e., my home page)?
Photo of Mike F.

Mike F., Alum

  • 183,908 Points 100k badge 2x thumb
Sorry, this thread is for the Bigcommerce Storefront websites. Since you don't have a Storefront, you are using the Homestead SiteBuilder which does not contain this functionality. The closest thing that the SiteBuilder has would be the image scroller.

Photo of VERNELL5964


  • 126 Points 100 badge 2x thumb
When I go to edit slide-show.css . It says thisfile does not contain any panels or snippets. Now what do I do?
Photo of Mike F.

Mike F., Alum

  • 183,908 Points 100k badge 2x thumb
Sorry, but your question is a bit too vague. Can you tell us more specifically what it is you are trying to do? What page, panel/element you are trying to edit?