The hero banner is the large image at the top of your homepage, the first thing every visitor sees. During Black Friday weekend, that space should announce the sale, show what is on offer, and give a clear next step. This 1920 x 800 pixel hero banner does that with an editorial look: a calm cream background, a strong headline, two buttons, and a collage of three product or lifestyle photos.
Website Hero Banner Design
The banner is 1920 x 800 pixels, wide enough to fill a desktop screen. The left side is warm cream. A small red kicker reads BLACK FRIDAY · NOV 27 TO 30, followed by the headline The Black Friday Sale in black Poppins ExtraBold over two lines. A short grey line underneath gives the offer: up to 50% off everything, plus free shipping on all orders.
Two buttons sit below the text: a solid black SHOP NOW pill and an outlined VIEW DEALS pill. Behind the right side of the banner, a slightly darker sand panel holds a three-photo collage: one tall photo on the left and two smaller photos stacked on the right. A red circle with -50% overlaps the top of the collage, and a small black SALE tab sits at the bottom of the tall photo. The brand mark appears small near the bottom.
Why a Light Hero Banner Works
Most Black Friday graphics are black and red. A light, editorial hero banner stands out from competitors’ homepages while still saying sale through the red accents and the -50% discount. It also lets your product photos breathe, which is important for brands where the products themselves are the attraction, such as fashion, homeware, and beauty.
Adding Photos to the Collage
Click each photo area and use Replace Image. A good mix is one lifestyle photo for the tall frame, such as a model or a styled room, and two product close-ups for the small frames. Choose photos with similar lighting and colour tones so the collage feels unified. Light, neutral backgrounds suit the cream banner best.
Editing the Hero Banner Text
- Kicker: the dates, or a phrase like This weekend only.
- Headline: keep it short, two lines at most.
- Offer line: one sentence with the main benefit.
- Buttons: SHOP NOW and VIEW DEALS, or SHOP WOMEN and SHOP MEN, or SHOP GIFTS and SHOP SALE.
The buttons in the image are not clickable by themselves. Most website builders let you link the whole banner to one page; others let you place real buttons on top of the image. If yours does, delete the drawn buttons and use the builder’s buttons instead.
Hero Banners on Mobile Screens
A wide desktop banner becomes small on a phone, and many website themes crop the sides. Check your homepage on a phone after uploading. If the text becomes too small or the collage is cut off, make a separate mobile version: change the canvas to a taller shape, such as 1080 x 1350 pixels, put the text above the photos, and enlarge everything. Many themes let you upload a different image for mobile.
Optimising the Banner for Speed
Large images can slow down your homepage, especially on mobile data. Download the banner as a JPG for photo-heavy designs, or as WebP if your website supports it. Many website builders compress images automatically. Aim to keep the file size small without visible blur; a fast homepage keeps shoppers from giving up before the sale loads.
Hero Banner Accessibility and SEO
Add alt text to the banner image when you upload it, such as Black Friday Sale: up to 50% off everything, November 27 to 30. Screen reader users get the message, and search engines understand the image. Important information, such as the offer and dates, should also appear as real text somewhere on the page, because text inside images cannot be read by everyone.
Black Friday Hero Banner Colour Options
| Background | Accent | Feel |
|---|---|---|
| Cream | Red | Editorial, warm |
| Black | Red | Classic Black Friday |
| Pale grey | Cobalt blue | Modern, tech |
| Blush pink | Burgundy | Beauty and fashion |
| Sage | Terracotta | Home and lifestyle |
Updating the Banner Through the Weekend
Change the hero banner as the weekend progresses: Starts Friday before the sale, Now on during it, Last day on Sunday, and Cyber Monday on Monday. A fresh banner shows returning visitors that the site is alive and encourages them to look again.
Linking the Hero Banner
Link the banner to your sale collection, not your homepage, so one click takes shoppers to the deals. Make sure the landing page shows the same offer as the banner. If the banner says up to 50% off, the products with 50% off should be easy to find, ideally at the top of the page.
Testing Your Black Friday Hero Banner
If your site gets enough visitors, try two versions of the headline or the photos and compare how many people click. Even without testing tools, watch your analytics: if visitors leave the homepage quickly, the banner may not be clear enough. Small changes, such as a bigger discount number or a clearer button, can make a difference.
Reusing the Banner Layout
The editorial layout works all year. Change the headline to New Season,Holiday Gift Guide, or Summer Sale, replace the photos, and keep the structure. A consistent hero style makes your site look professionally managed.
Writing a Strong Hero Headline
A hero headline should be readable in under two seconds. Lead with the event or the benefit, not your company name, and avoid clever wordplay that needs a second read. The Black Friday Sale works because it is instantly clear; Up to 50% Off Everything works. After all, it is concrete.
Hero Banner Questions
Can I use it on Shopify, Wix, or WordPress?
Yes. Download the image and upload it to your theme’s hero or slideshow section.
What if my theme uses a different size?
Change the canvas size in the editor to match your theme, then adjust the layout.
Can I add more photos?
Keep three for clarity. More photos make the banner busy and slow to understand.
Your homepage is your shop window online. Add your photos, set your offer, and give every visitor a clear path to your Black Friday deals.
