Banner Carousel Widget¶
Show a scrolling row of promotional banners, each with its own image, link, and call-to-action button. You control how many banners appear per row on desktop, tablet, and mobile, making it ideal for category highlights, promotions, or brand showcases.
Page Builder name: Banner Carousel | Eyeva — Version: 1.0.2
Add it to your page¶
- In your BigCommerce control panel, open Storefront → Page Builder (or edit a page and open Page Builder).
- Find the Banner Carousel | Eyeva widget in the widget panel on the left.
- Drag it onto your page where you want the banners.
- Six sample banners appear. Select the widget to open its settings and replace them with your own.
Settings¶
Settings¶
General¶
| Option | What it does | Default |
|---|---|---|
| Style | Inherit theme matches your theme's colors. Custom reveals the color and spacing options below so you can style the carousel yourself. | Inherit theme |
| Background Color | Carousel background color (Custom style only). | #ffffff |
| Text Color | Default text color (Custom style only). | #333333 |
| Primary Color | Accent color used for buttons and highlights (Custom style only). | #2D73BD |
| Border Color | Border color (Custom style only). | #dddddd |
| Dot Color | Color of the pagination dots (Custom style only). | #888888 |
| Dot Active Color | Color of the current slide's dot (Custom style only). | #555555 |
| Dot Background Color | Background behind the dots (Custom style only). | #ffffff |
| Button style | Choose the button look: Default or Eyeva Sofas. | Default |
| Button Hover Color | Button text color on hover (Custom style only). | #ffffff |
| Button Background Hover Color | Button background color on hover (Custom style only). | #104EA5 |
| Shadow Color | Color of the shadow under each banner (Custom style only). | #000000 |
| Image Background Color | Background color behind each banner image (Custom style only). | transparent |
| Base Spacing | Overall spacing scale (Custom style only). | 1rem |
| Font Size | Text size on desktop (Custom style only). | 1rem |
| Font Size (Mobile) | Text size on mobile (Custom style only). | 14px |
| Header Font Size | Heading size on desktop (Custom style only). | 28px |
| Header Font Size (Mobile) | Heading size on mobile (Custom style only). | 24px |
| Header Font Weight | Heading thickness (Custom style only). | 400 |
| Header | The optional heading above the carousel. Use the visibility toggle to show or hide it, and type your text. | Shown, "Banner Carousel Header" |
| Show in .container element | Keeps the carousel within your theme's centered content area instead of full width. | Off |
Slider¶
| Option | What it does | Default |
|---|---|---|
| Columns | How many banners show at once on desktop. Decimals (such as 4.5) let part of the next banner peek in. | 4 |
| Columns (Tablet) | How many banners show on tablet. | 2.25 |
| Columns (Mobile) | How many banners show on mobile. | 1.25 |
| Enable Autoplay | Automatically scrolls to the next set of banners. | On |
| Autoplay Interval | How long before the carousel advances, in milliseconds (shown when autoplay is on). | 5000 |
| Stop Autoplay on Interaction | Stops autoplay once a visitor clicks or swipes (shown when autoplay is on). | On |
Slides (repeatable)¶
Each banner is one entry in this repeatable group. The widget starts with six banners.
- Add a banner with the add button at the bottom of the Slides list.
- Remove a banner using the delete (trash) icon on that entry.
- Reorder banners by dragging them in the list.
Each banner has a Content tab with the options below. To edit the button text, switch the page to edit mode and click directly on the button in the banner.
Content¶
| Option | What it does | Default |
|---|---|---|
| Image | The banner image. Upload or choose one from the image manager. | Sample image |
| Width | Image width in pixels. | 1296px |
| Height | Image height in pixels. | 1650px |
| Alt Text | Describes the image for accessibility and SEO. | alt text |
| Image Link | A web address to open when the banner image is clicked. | empty |
| Button | The call-to-action button on the banner. Use the visibility toggle to show or hide it, set its label, and set the link it opens. | Shown, "Shop Now" |
Tips¶
Tip
Use decimal Columns values like 1.25 on mobile so a sliver of the next banner is visible. This hints to shoppers that they can swipe for more.
- Keep all banner images the same width and height so the row lines up neatly.
- Make sure you have more banners than the number of Columns, otherwise there is nothing to scroll to.
- Add a short, action-focused Button label such as "Shop Now" or "View Deals" to each banner.
- Turn on Show in .container element if you want the carousel aligned with the rest of your page content instead of full width.