Carousel Widget¶
Create a rotating carousel of images. It is ideal for brand logos, promotional banners, or any set of slides that link to pages on your store. Each slide is fully customizable and the carousel adapts to phones, tablets, and desktops.
Page Builder name: Carousel | PapaThemes Chiara — Version: 1.0.1
Add it to your page¶
- In your BigCommerce admin, open Storefront → My Themes and click Customize to open Page Builder.
- In the left panel, find the Carousel | PapaThemes Chiara widget.
- Drag it onto your page.
- The widget appears with several sample slides. Open the settings to swap in your own images and links.
Settings¶
Images¶
This is the repeatable list of slides. Each entry is one image in the carousel.
- Add a slide: click Add at the bottom of the Images list.
- Remove a slide: open the slide entry and choose remove.
- Reorder slides: drag an entry to change the order slides rotate in.
Each slide entry has these options in its Content tab, grouped into three sections.
Slide¶
| Option | What it does | Default |
|---|---|---|
| Link | Where the slide goes when clicked. Leave empty for a non-clickable slide. | (empty) |
| Padding | Inner spacing (padding) around the slide on desktop — top, right, bottom, left. | Top/Bottom 0, sides 5px |
| Padding (mobile) | Inner spacing around the slide on phones. | Top/Bottom 0, sides 3px |
| Display slides in container div | Keep on to align the carousel with your page's main content width. | On |
Image¶
| Option | What it does | Default |
|---|---|---|
| Image | The picture shown on the slide. | A sample logo |
| Image width | Slide image width in pixels on desktop. | 220 px |
| Image height | Slide image height in pixels on desktop. | 100 px |
| Image width (mobile) | Slide image width in pixels on phones. | 220 px |
| Image height (mobile) | Slide image height in pixels on phones. | 100 px |
| Image alt text | Describes the image for accessibility and SEO. | (empty) |
| Image fit | How the image fills its box. Choices: Fill to box, Fit to box. | Fill to box |
| Lazyload image | Load the image only as it scrolls into view, for faster pages. | On |
| Hover animation | Gently zoom the image when a shopper hovers over it. | On |
| Border radius | Rounds the image corners (in pixels). | 0 px |
Text¶
An optional caption can be shown on each slide. The caption text is edited directly on the slide in the page preview — click it and type, then format it with the visual editor.
| Option | What it does | Default |
|---|---|---|
| Show text | Show or hide the slide caption. | Hide |
| Text style | Use the theme's default text style, or switch to Custom to set your own font family, weight, size, mobile size, text color, and hover color. (Shown when Show text is on.) | Default |
| Content align | Aligns the caption left, center, or right. (Shown when Show text is on.) | Left |
Tips¶
Tip
Set a width and height on every slide so the carousel keeps a steady shape while images load.
- Keep the carousel to around 10 slides or fewer for the smoothest experience.
- Add Image alt text to each slide for better accessibility and SEO.
- Leave Lazyload image on so the carousel does not slow down your page.
- Use the Link field to send shoppers to a matching collection or landing page when they click a slide.