Using the Carousel Builder
What We'll Cover
The carousel is the set of rotating banners that displays on the homepage of your store.
Carousels come in a variety of sizes, which is determined by the theme that you are using. They allow you to display up to five slides consisting of images and text, which can be linked to specific products or pages. They will rotate every few seconds.
Finding Your Carousel's Dimensions
The dimensions (width and height) of your store's carousel are determined by the theme you are using. Check your carousel's dimensions before you add the slide images. Otherwise, the images will be distorted when they are displayed on your storefront.
1. Go to Storefront Design › Design Options, then click the Carousel & Social Media tab, and click on one of the small blank slide thumbnails under the carousel preview.
2. The preview will show you the required dimensions for the theme that you are currently using. Use these dimensions for any images that you create for the carousel.
If you'd like to remove the carousel altogether, delete all the slides.
Deleting a slide will delete both the image and the text. Once deleted, it cannot be recovered, so be sure to have the image backed up on your computer.
1. Locate the small thumbnail of the slide you want to delete, and click the X in the top right corner of the thumbnail.
2. Save your changes.
Adding Images to Slides
You can display up to five slides on your carousel. Unused slides won't appear on your storefront.
1. Click on an empty slide thumbnail. The preview will change to a message telling you to add the image.
2. On your computer, open the folder that contains your image, then drag and drop the image from your computer to the Carousel preview box.
3. Save your changes.
For information on handling image distortion see Why does the carousel preview look different than my storefront?.
Adding Text and Links
You have the option to add the following types of text to each carousel slide.
- Heading — The large headline text.
- Text — The regular-sized text which displays below the heading.
- Button Text — The text to appear in the slide button, generally a call to action. For example, Shop Now or Learn More.
To edit any of these, click on the thumbnail of the slide you want to edit. From here, you can:
1. Type your message into the field next to the type of text you want to display.
2. Click the color button to the right of the text field to choose a different text color.
The position of the text on the slides depends on the theme that you are using, and can only be modified via CSS. Also, note that the way the carousel looks in the preview will not match the way it displays on the storefront, so it is best to click View Store and refresh the screen when you save changes.
Making a link
Adding a URL to the Link field will take your customers to the specified page whether they click on the button text or anywhere else on the slide.
If you want to link somewhere outside of your store, you can enter the URL in the field that says Enter destination link. For example, if you entered https://www.bigcommerce.com in the Link field, your customers would be taken to the BigCommerce homepage after clicking on the slide.
1. To link to a page in your store, click Browse.
2. Select the tab for the type of page you are linking to: Product, Category, Brand, Page, or Blog, then select the page from the list which displays below the tab and click Insert Link.
Setting how often slides change
To change how often the slides change, simply change the number in the Swap Every [number] Seconds field. The interval must be between 1 and 90,000 seconds.
Click and drag a slide to move it into your preferred order. All of the text and links will be moved along with it.
Save your changes before you leave the page.