mike_f's profile

774 Messages


184.8K Points

Mon, Sep 30, 2013 3:12 PM

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

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.

This conversation is no longer open for comments or replies and is no longer visible to community members.


No Responses!