Key takeaways
- The homepage and the Black Friday landing page do different jobs. The LP converts paid traffic that already saw an ad; the homepage catches everyone who arrives on their own and does not yet know what the offer is.
- Change five things: the announcement bar, the hero, an offer-terms strip, the curated entry points, and the logistics block. Leave navigation, search, and the product templates alone.
- Most Black Friday homepages break in the same two ways: layout shift when the announcement bar and countdown load late, and dark seasonal palettes that quietly fail contrast.
- Build the rollback before you build the takeover. On 1 December someone has to put the store back, and it should not be an improvisation.
Black Friday 2026 runs Friday 27 November to Monday 30 November. Your landing pages will do the converting, but the homepage is the page that already exists, already ranks, and already gets traffic - and on Black Friday morning it gets a lot more of it.
This is what to change on it, in the order to change it, and what to leave frozen.
Why you can trust us
Over 15 years of development experience and four years inside Shopify themes specifically. We build Fudge, an AI storefront agent used by hundreds of Shopify stores with a 4.9 rating on the Shopify App Store, and November is the month it gets asked to put campaign states on top of themes that are otherwise locked down.
The homepage is not your landing page
Worth being precise about, because conflating the two is the most common mistake in this whole exercise.
| Black Friday homepage | Black Friday landing page | |
|---|---|---|
| Who arrives | Direct, organic, returning customers, email recipients who clicked the logo | Paid traffic that just saw a specific ad |
| What they know | Your brand. Not the offer. | The offer, roughly, from the creative |
| Its job | Orient, then route | Convert, now |
| Navigation | Keep it | Usually strip it |
| Product count | Entry points to many | A curated 10-30 |
The homepage has to serve someone who typed your name into a browser because they half-remember you do a sale, alongside someone who has bought from you nine times. It orients and routes. The landing page does the closing.
Pointing paid traffic at the homepage wastes the ad. Leaving the homepage untouched wastes everyone else.
The five things to change
In build order. If you run out of time, the earlier items matter more.
1. The announcement bar
The highest-value pixel on the site during BFCM, and the cheapest thing to change.
Put the offer and the deadline in it, in that order: “30% off everything. Ends Monday 30 November.” Not “Black Friday is here” - that tells the customer nothing they had not already guessed.
Three things to get right:
- Reserve its height in CSS. A bar injected after first paint shoves the entire page down, and that is a Cumulative Layout Shift hit on your highest-traffic day. Give it a fixed
min-heightso the layout is correct before the content arrives. - Make it a link. To the offer hub, not the homepage it is already on.
- One message. Dawn’s announcement bar supports up to 12 rotating announcements. Rotating three offers past a customer in eight seconds is not the same as communicating one.
If you are adding a countdown to it, build the countdown without an app - it is one section file, and app timers add script weight to every page on the day you can least afford it.
2. The hero
Replace the image, replace the headline, replace the CTA. Keep the structure.
The headline states the offer in plain terms. The subhead carries the dates and the one condition that matters most (“excludes new season”, “while stocks last”). The CTA goes to the offer hub.
On the image: whatever you produce has to work as a mobile crop, because that is where most people will see it. Design the mobile version first and let the desktop version be the one that gets extra space, rather than designing a wide banner and hoping the middle survives. Keep text out of the image itself so it stays legible, translatable and accessible.
Watch the file weight. A hero image is usually the Largest Contentful Paint element, so a heavier seasonal image directly slows the metric that most affects whether an impatient Friday-morning visitor stays. Serve it responsively and keep it under a couple of hundred kilobytes.
3. An offer-terms strip
One short row directly under the hero answering the four questions support will otherwise answer one at a time:
- What is included and what is excluded
- When it ends, with the date
- Whether codes stack
- The returns policy for gifts
This single row removes a meaningful share of Black Friday support volume. It is also the block most stores forget entirely.
4. Curated entry points
Replace the usual “shop new in” and “best sellers” rows with routes into the offer: by category, by price, by recipient.
“Gifts under $50” is a better Black Friday module than “New arrivals”, because it matches the intent people actually arrive with in late November. Three to five routes, no more. Each one should land on a real curated page rather than a filtered collection URL - see how to create a promotional page in Shopify.
Keep the number of choices small. The homepage’s job here is to get someone out of the homepage and into a collection.
5. Logistics and trust
Move shipping cutoffs, returns terms and payment options up the page.
In late November, “will it arrive in time?” outranks almost every other objection, and the answer being visible on the homepage prevents an exit to a competitor who has made it visible. Include the actual dates, not “order soon”.
What to leave alone
The instinct in November is to improve everything. Resist it, because every change is a change you might have to debug at 6am on the Friday.
- Navigation structure. Add one “Black Friday” item if you must. Do not reorganise the menu.
- Search and filtering. Peak traffic is the worst possible time to discover a faceted-search bug.
- Product templates. Update the promoted PDPs with offer pricing and stronger trust signals, but do not restructure the template.
- Checkout. Not during BFCM. Not for anything.
- Apps. Adding one in November means adding untested script weight to every page. If anything, audit and remove.
- The theme itself. Structural theme work should have finished by the end of September. Campaign states sit on top of a frozen theme.
The two things that break
Across the stores we see, Black Friday homepages fail in the same two ways every year.
Layout shift from late-loading campaign elements
The announcement bar, the countdown and the sticky promo bar all tend to be injected by JavaScript after first paint. Each one that lacks reserved space pushes the page down after the visitor has started reading, and on mobile it is the difference between tapping the CTA and tapping whatever moved into its place.
Reserve height in CSS for every element that will appear. Give countdown digits a fixed width with tabular-nums so the timer does not re-flow the row every second.
Seasonal palettes that fail contrast
This is the one almost nobody checks. Black Friday designs go dark, high-contrast-looking and heavily accented - charcoal backgrounds, red sale flags, gold or neon accents. A lot of those combinations do not actually meet the 4.5:1 ratio WCAG requires for normal text, and the ones that fail worst are usually the discount price and the sale badge: the exact elements the whole page exists to communicate.
It is also the worst season to get it wrong. The European Accessibility Act has applied since 28 June 2025, so for stores selling into the EU this is a legal exposure rather than a nice-to-have, and Black Friday is when your traffic peaks.
Two checks, five minutes each:
- Run the sale price, badge text and CTA label through a contrast checker at their real sizes.
- Tab through the homepage with the keyboard. If the new campaign modules are not reachable or the focus ring is invisible on the dark background, fix it before Friday.
For the wider set, see the six most common accessibility failures in Shopify themes and our European Accessibility Act guide.
Build the rollback first
On 1 December the store has to go back to normal, and that is usually the moment something breaks, because the takeover was built as a one-way edit by someone who is now asleep.
Before you publish the campaign state:
- Duplicate the theme and label it clearly - “pre-BFCM baseline”, with the date.
- Write down which sections were changed and who changed them.
- Decide the wind-down, not just the off switch. Going from “30% off everything” to nothing overnight is a bad customer experience for anyone mid-basket. A shorter, smaller December offer eases the transition.
- Name one person who can approve a change during the weekend, and route everything through them.
If you are reading this with 48 hours left
The short version, in priority order:
- Announcement bar with the offer and the end date, with height reserved.
- Hero headline and CTA pointing at the offer hub. Reuse the existing image if the new one is not ready.
- Offer-terms strip under the hero.
- Shipping cutoff visible above the fold on mobile.
- Duplicate the theme so you can roll back.
That is a couple of hours of work and it covers most of the value. The curated entry points and the redesigned hero are the parts to drop when time runs out, not the terms and the deadline.
For the full sequence and the pre-launch checklist, see the Shopify BFCM playbook. If the offer itself is still undecided, Black Friday sale ideas for Shopify stores covers the mechanics and what each costs. Changes at this level are what the Shopify store editor is for: campaign states on top of a theme you are not otherwise touching.
FAQ
Change it, do not redesign it. Replace the announcement bar, hero, entry points and logistics block, and leave navigation, search, product templates and checkout exactly as they are. A structural redesign in November means debugging a new layout on your highest-traffic day, and the conversion upside is far smaller than the risk.
The offer and the deadline, in that order, and nothing else. "30% off everything. Ends Monday 30 November." beats "Black Friday is here" because it tells the visitor something they did not already know. Make it a link to the offer hub, reserve its height in CSS so it does not shift the page, and run one message rather than rotating three.
A landing page, for cold paid traffic. The landing page matches the ad, strips the navigation and curates a small product set, so it converts a visitor who already knows the offer. The homepage serves direct, organic and returning visitors who arrive without seeing an ad, which is a different job and needs the navigation kept.
Two reasons. Campaign elements such as announcement bars and countdowns are usually injected after first paint and push the page down, which registers as layout shift. And seasonal hero images are heavier than the ones they replace, which slows Largest Contentful Paint. Reserve height in CSS for anything that appears late, and keep the hero served responsively.
Frequently. Charcoal backgrounds with red sale flags or neon accents often fall below the 4.5:1 contrast ratio WCAG requires for normal text, and the elements that fail most often are the discount price and the sale badge. Check the sale price, badge and CTA at their real sizes, and tab through the page to confirm the focus ring is visible on the dark background.
Build it in October, publish it in the week before. Most stores switch the homepage on when early access opens to their email list, which is usually the Monday or Tuesday before Black Friday, then go to the full offer on Friday morning. Have the duplicate theme saved as a rollback before you publish anything.
Duplicate the theme before you start and label it as the pre-BFCM baseline with the date, so restoring it is one action rather than an attempt to remember what changed. Plan the wind-down as well as the off switch: dropping from a site-wide offer to nothing overnight strands anyone mid-basket, so a smaller December offer makes a better transition.
