Hero Carousel Widget¶
A large, attention-grabbing banner carousel for the top of your homepage or any page. Each slide can show an image (with a separate mobile image), an optional background video, a heading, a description, and up to three buttons. It can replace the default BigCommerce homepage carousel and works on multiple storefronts.
Page Builder name: Hero Carousel | Eyeva — Version: 1.0.4
Add it to your page¶
- In your BigCommerce control panel, open Storefront → Page Builder (or edit a page and open Page Builder).
- Find the Hero Carousel | Eyeva widget in the widget panel on the left.
- Drag it to the top of your page where you want the hero banner.
- Two sample slides 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 and fonts. Custom reveals all the color, font, and spacing options below so you can style the carousel yourself. | Inherit theme |
| Base Spacing | Overall spacing scale for the content area (Custom style only). | 1rem |
| 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 |
| Title Color | Heading text color (Custom style only). | #333333 |
| Title Font Family | Heading font: Inherit or Playfair Display (Custom style only). | Playfair Display |
| Title Font Size | Heading size on desktop (Custom style only). | 48px |
| Title Font Size (Mobile) | Heading size on mobile (Custom style only). | 28px |
| Title Font Weight | Heading thickness (Custom style only). | 400 |
| Title Line Height | Spacing between heading lines (Custom style only). | 1.15 |
| Description Color | Description text color (Custom style only). | #555555 |
| Description Font Size | Description size on desktop (Custom style only). | 16px |
| Description Font Size (Mobile) | Description size on mobile (Custom style only). | 14px |
| Button Height | Height of the call-to-action buttons (Custom style only). | 50px |
Slider¶
| Option | What it does | Default |
|---|---|---|
| Enable Autoplay | Automatically advances to the next slide. | On |
| Autoplay Interval | How long each slide shows before advancing, 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 |
| Random Banner | Shows the slides in a random order on each page load. | Off |
| Height on Mobile | Sets a fixed banner height on mobile, in pixels. Leave at 0 to size automatically. | 0 |
| Stretched (recommended for video display) | Stretches slides to fill the width, recommended when using videos. | Off |
| Content align | Aligns the heading, description, and buttons: Left, Center, or Right. | Left |
Slides (repeatable)¶
Each slide is one entry in this repeatable group. The widget starts with two slides.
- Add a slide with the add button at the bottom of the Slides list.
- Remove a slide using the delete (trash) icon on that entry.
- Reorder slides by dragging them in the list.
Each slide has a Content tab split into the sections below. To edit the heading, description, and button text, switch the page to edit mode and click directly on the text in the slide.
Image¶
| Option | What it does | Default |
|---|---|---|
| Image | The main slide image. Upload or choose one from the image manager. | Sample image |
| Width | Image width in pixels. | 1920px |
| Height | Image height in pixels. | 800px |
| Image on Mobile (optional) | A separate image shown on phones, useful for a more vertical crop. | empty |
| Alt Text | Describes the image for accessibility and SEO. | alt text |
| Image Link | A web address to open when the slide image is clicked. | empty |
| Video URL (.mp4) | Link to an MP4 video to play in the slide. Host it on a service like Cloudflare R2 (rather than WebDAV) for best compatibility, then paste the URL here. | empty |
Content¶
| Option | What it does | Default |
|---|---|---|
| Heading | The large headline on the slide. Use the visibility toggle to show or hide it, and type your text in the editor. | Shown, "Find Your Perfect Pair – Style Meets Clarity" |
| Description | The supporting text under the heading. Toggle visibility and type your text. | Shown, sample intro text |
| Button 1 | First call-to-action button. Toggle visibility, set its label, and set the link it opens. | Shown, "Shop Now" |
| Button 2 | Second button. Toggle visibility, set its label and link. | Hidden, "Shop Now" |
| Button 3 | Third button. Toggle visibility, set its label and link. | Hidden, "Shop Now" |
Tips¶
Tip
For video slides, turn on Stretched so the video fills the banner edge to edge. Videos automatically pause when they scroll out of view to save bandwidth.
- Upload a separate Image on Mobile with a taller crop so your hero looks great on phones.
- Always fill in Alt Text for each slide image to help SEO and screen readers.
- Use Autoplay Interval to control pacing; 4000–6000 ms feels natural for most stores.
- Turn on Random Banner to rotate which promotion shoppers see first on each visit.