The hero is the large banner at the very top of your homepage — usually the first thing a visitor sees. In Eaglecart it can be a single image or a rotating carousel of slides, each with its own text and button. Getting it right sets the tone for your whole store, so it has the richest settings of any section.
How do I open the hero's settings? On the Homepage template, click the Hero section in the Sections panel (or click it in the preview). Its settings open on the right, organised into groups: Appearance, Layout, Carousel Behavior & Effects, Content position, Effects, and Spacing.
How do I set the hero's size and colour? Under Appearance and Layout you control:
Section width — e.g. Full width so the banner spans the whole screen.
Color scheme — set to Dark to keep light text readable over your image.
Desktop height and Mobile height — pick a size band (such as XLarge on desktop, Large on mobile) so the hero looks right on both.
Media fit — Cover (crop to fit) fills the whole area with your image, cropping the edges so there are no gaps.
How do I add slides to the hero?
The hero is built from Slide blocks. Expand the Hero section in the left panel to see its slides, then click + Add block to add another. Each slide is one screen of the banner — its own image, heading, text, and button. Add several slides to create a rotating carousel.
How do I turn the hero into an autoplay carousel? Under Carousel Behavior & Effects:
Set the Hero style to a carousel option (e.g. Carousel — Auto).
Turn on Enable Autoplay so slides advance on their own.
Use Change slides every to set the timing (for example, 6 seconds per slide).
Turn on Infinite loop so it cycles back to the first slide.
Fade effect crossfades between slides instead of sliding.
Arrow style controls the next/previous arrows (e.g. None to hide them).
Pagination style sets the slide indicators (e.g. Dots beneath the hero).
Where do the heading and button sit on a slide?
Under Content position, set Content position (desktop) and Content position (mobile) separately. Overlay on media places the text and button directly on top of the image — letting you position content differently on phones than on desktop.
What do the effects do? Under Effects:
Reveal content on load animates the text in when the page opens.
Ken Burns effect adds a slow zoom/pan on the image for a premium, cinematic feel.
Show scroll indicator displays a cue prompting visitors to scroll down (off by default).
How do I adjust the hero's spacing? Under Spacing, use the Padding top and Padding bottom sliders to add or remove space above and below the hero.
FAQ
Can my hero be a single image instead of a carousel?
Yes. Add just one Slide block. The carousel settings only matter when you have more than one slide.
Why is my hero text hard to read?
Try the Dark colour scheme and the Ken Burns/overlay options, or choose a slide image with a darker area where the text sits.
How fast should my slides change?
A common starting point is around 6 seconds — long enough to read the text. Adjust with Change slides every.
Can the layout differ on mobile and desktop?
Yes. Desktop height, Mobile height, and the desktop/mobile Content position settings are separate, so you can tune each.