How To Resize The Carousel From The New Templates

The new templates in Bigcommerce have a carousel feature that displays multiple images on the home page of your store. Depending on your design requirements you might have to change the dimensions of the carousel. The instructions below will show you how to accomplish that by modifying the CSS code in your store.

Instructions

1. Go to your control panel and navigate to Design -> Theme Files/Edit HTML & CSS and open the HTMLHead.html file.

2. Paste the following code at the bottom of the file:

   The code below modifies the carousel to 1100px (width) by 625px (height). If you want a different size just use our simple tool to generate the CSS code for you.

   
   <style type="text/css">
   .slide-show-render-full .slide-image {
   height: 100%;
   max-height: 625px;
   max-width: 1100px;
   }
   
   .slide-show-render-full .slide-content {
   height: 625px;
   width: 1100px;
   }
   
   .slide-show-render .slides {
   height: 625px;
   }
   
   .slide-show-render.slide-show {
   height: 625px;
   margin: 0 0 20px -60px;
   }
   
   .slide-show {
   width: 1100px;
   }
   </style>
   
   

   If you want to be more organized, you can add the code to a CSS file such as white.css or styles.css instead of inserting it directly in the HTML header.

3. Save your changes, and navigate to the carousel page. You should see a change in the size of the images.

How It Works

The CSS code crops the carousel images to your desired width/height.

Troubleshooting

If you added the CSS code but do not see any changes... then clear your browser's cache files.

If the images are pixelated... then use images that are appropriate for the carousel's width/height. For example, if your image has a height of 200 pixels, then you should not set the carousel height to more than that because it will stretch out the image.

If it still doesn't work... then contact us. We can install the modification for you.

Extra: Carousel Generator Tool

Enter a width and height for the carousel, then press the Generate CSS Code button. The tool will automatically generate the appropriate CSS code for you.

Generate CSS Code

Copy the CSS code and follow the instructions above to resize the carousel.

<style type="text/css">


</style>