Ecom Ideas
  • Homepages & nav
  • Category pages
  • Product pages
  • Cart pages
  • Checkout
  • Site search
  • Internationalization
  • Holiday ideas
  • Featured idea gallery
  • Topical articles
Subscribe

Get daily ideas

LinkedIn
💡
Ecom Ideas
/Home pages & nav
Home pages & nav
/
💪
Hero banners
💪

Hero banners

Tap any tip to open toggle ⚡ some gifs may take a moment to load

Featured ideas 🦄 are rare ideas you may not have seen before ;-)

💡 Ideas and tips

‣
Try a Product Finder CTA in your hero banner

🐢 Tortuga uses a secondary CTA button over the hero image for its Bag Finder Quiz — a great way to help shoppers shorten their purchase journeys with confidence (and collect first party data)

image

One more time, zoomed in:

image

🌼 Proflowers makes its product finder the hero banner!

image
‣
🦄 Try tabbed hero video

👕 True Classic’s hero video features different model sizes that you can tab through on-demand

image
‣
🦄 Try ‘navigation buttons’ in your hero banner

🦅 American Eagle Outfitters makes CTA buttons interactive with sub-category pre-filter links

image

🧦 Bombas does a similar thing

image
‣
Feature customer reviews in your hero banner

💄 Esqido features customer reviews that highlight the benefits of its hero product

image

One more time, zoomed in:

image
‣
Try interactive hotspots

🦷 Bite Toothpaste’s banner hotspots helps shoppers understand its product line and quickly jump to category and product pages

image

🏄‍♂️ Critical Slide uses a side-by-side approach to its hotspot experience

image
‣
🦄 Try a “Mad libs” style product finder

🩹 First Aid Beauty takes a tip from the popular fill-in-the-blank Mad Libs game to send customers to targeted (pre-filtered) products from a home page banner widget

image

Looks great on mobile too!

image
‣
Show “peeking” banners in your carousel
💡
Auto-rotating banners are practically dead. Users don’t like them, there are many alternative patterns to use — like the manually controlled carousel. Take a cue from mobile “swipe” gestures and leave a banner peeking out the right edge of the screen to trigger scrolling.

👀 Rare Beauty teases more banners to the left and right of it’s main hero banner. Rare’s young demographic is carousel-savvy and intuitively recognize these navigational cues

image
‣
Use your hero banner to tell your brand story

🦌 Common Deer leverages prime homepage real estate to humanize the brand and share a bit of their ethos. If you’re a DTC or socially conscious brand, test this against traditional merchandizing

image
‣
Test a hero video to position your brand / value prop
💡
Use your prime home page real estate to show off your brand’s value proposition. If you can show, vs tell, do it! Note that video can slow page speed, so best to A/B test this tactic, and make sure to compress and optimize your video.

👕 Classic Tees makes its value prop clear - it’s about fit! (This GIF file may take a sec to load, static image below)

image
image
‣
Test skipping the hero altogether (mobile and desktop)

🏈 Fanatics gets right to it…bypassing the traditional page-spanning banner for tighter, vertical banners that you’d typically see below the hero

image

Mobile view:

image
‣
Try a floating nav menu (desktop)

🧘🏾‍♂️ Lululemon slots featured categories over its hero banner to give quick-scan links to start navigating faster

image
‣
Try an animated background + static overlay

💡 Old Navy combines a video background with a clickable promo CTA. Hypnotizing! (This is a large GIF - it may take a little longer to load than usual 🐢 see static image first!)

image
image

🫣 Cautions

‣
Avoid ghost text and buttons on image backgrounds

👻 Avoid light text on busy backgrounds — especially “ghost buttons” (transparent with white borders and text) — it’s impossible to read!

image
image
‣
Show a clear “Pause” button for rotating carousels (if you use them at all)

⚽ Dick’s Sporting Goods makes it easy to spot how to stop the rotation if you want to focus on a specific banner (or it really bothers you)

image

Back to Home page & nav ideas

👉 Follow on LinkedIn for daily ideas 💡