Black Friday Homepage: Was du ändern und was du in Ruhe lassen solltest

Key Takeaways

• Die Homepage und die Black Friday Landing Page haben unterschiedliche Aufgaben. Die Landing Page konvertiert Paid Traffic, der bereits eine Ad gesehen hat; die Homepage fängt alle ab, die von selbst kommen und das Angebot noch nicht kennen.
• Ändere fünf Dinge: die Announcement Bar, den Hero-Bereich, eine Leiste mit den Angebotsbedingungen, die kuratierten Einstiegspunkte und den Logistik-Block. Lass die Navigation, die Suche und die Produkt-Templates in Ruhe.
• Die meisten Black Friday Homepages scheitern an denselben zwei Dingen: Layout Shift, wenn die Announcement Bar und der Countdown zu spät laden, und dunkle saisonale Farbpaletten, die klammheimlich beim Kontrast durchfallen.
• Baue den Rollback, bevor du das Takeover baust. Am 1. Dezember muss jemand den Store wieder in den Normalzustand versetzen, und das sollte keine Improvisation sein.

Der Black Friday 2026 läuft von Freitag, dem 27. November, bis Montag, dem 30. November. Deine Landing Pages übernehmen die Conversion, aber die Homepage ist die Seite, die bereits existiert, bereits rankt und bereits Traffic erhält – und am Black Friday Morgen bekommt sie davon noch eine ganze Menge mehr.

Hier erfährst du, was du daran ändern solltest, in welcher Reihenfolge, und was unangetastet bleiben muss.

Warum du uns vertrauen kannst

Jacques hat über 15 Jahre Entwicklungserfahrung, und wir haben vier Jahre lang tief in Shopify-Themes gearbeitet. Wir entwickeln Fudge, den KI-Operator für Shopify-Stores mit einer 4.9-Bewertung im Shopify App Store, und der November ist der Monat, in dem er gebeten wird, Kampagnen-States über Themes zu legen, die ansonsten komplett abgeriegelt sind.

Die Homepage ist nicht deine Landing Page

Beides zu vermischen, ist hier der häufigste Fehler.

Die Homepage muss jemandem dienen, der deinen Namen in den Browser eingetippt hat, weil er sich dunkel daran erinnert, dass du einen Sale machst, genauso wie jemandem, der schon neunmal bei dir gekauft hat. Sie bietet Orientierung und leitet weiter. Die Landing Page macht den Abschluss.

Paid Traffic auf die Homepage zu leiten, verschwendet die Ad. Die Homepage unangetastet zu lassen, verschwendet alle anderen.

Die fünf Dinge, die du ändern solltest

In der Reihenfolge der Umsetzung. Wenn dir die Zeit ausgeht, sind die ersten Punkte wichtiger.

1. Die Announcement Bar

Die wertvollsten Pixel auf der Seite während BFCM und das am günstigsten zu ändernde Element.

Pack das Angebot und die Deadline rein, und zwar in dieser Reihenfolge: „30 % auf alles. Endet am Montag, 30. November.“ Nicht „Black Friday is here“ – das verrät den Kunden nichts, was sie nicht ohnehin schon geahnt hätten.

Drei Dinge, die du richtig machen musst:

• Reserviere die Höhe in CSS. Eine Leiste, die nach dem First Paint injected wird, schiebt die ganze Seite nach unten – und das ist ein Cumulative Layout Shift (CLS) Hit an deinem trafficstärksten Tag. Gib ihr eine feste min-height, damit das Layout stimmt, bevor der Content geladen wird.
• Mach einen Link daraus. Zum Offer-Hub, nicht zur Homepage, auf der man sich schon befindet.
• Eine Message. Die Announcement Bar von Dawn unterstützt bis zu 12 rotierende Ankündigungen. Drei Angebote in acht Sekunden an einem Kunden vorbeiziehen zu lassen, ist nicht dasselbe, wie ein Angebot klar zu kommunizieren.

Wenn du einen Countdown hinzufügst, baue den Countdown ohne App – es ist nur eine einzige Section-Datei, und App-Timer packen Script-Gewicht auf jede Seite an dem Tag, an dem du dir das am wenigsten leisten kannst.

2. Der Hero-Bereich

Tausche das Bild aus, tausche die Headline aus, ersetze den CTA. Behalte die Struktur.

Die Headline formuliert das Angebot in klaren Worten. Die Subline enthält die Daten und die eine Bedingung, die am wichtigsten ist („ausgenommen neue Saison“, „solange der Vorrat reicht“). Der CTA führt zum Offer-Hub.

Zum Bild: Was auch immer du produzierst, muss als Mobile-Crop (mobiler Zuschnitt) funktionieren, denn dort werden es die meisten Leute sehen. Designe zuerst die mobile Version und lass die Desktop-Version diejenige sein, die zusätzlichen Platz bekommt, anstatt ein breites Banner zu entwerfen und zu hoffen, dass die Mitte überlebt. Halte Text aus dem Bild selbst heraus, damit es lesbar, übersetzbar und barrierefrei bleibt.

Achte auf die Dateigröße. Ein Hero-Image ist normalerweise das Largest Contentful Paint (LCP) Element. Ein schweres saisonales Bild verlangsamt also direkt die Metrik, die am meisten beeinflusst, ob ein ungeduldiger Besucher am Freitagmorgen bleibt. Liefere es responsive aus und halte es unter ein paar hundert Kilobyte.

3. Eine Leiste für die Angebotsbedingungen

Eine kurze Zeile direkt unter dem Hero, die die vier Fragen beantwortet, welche der Support ansonsten einzeln beantworten muss:

• Was ist dabei und was ist ausgeschlossen
• Wann es endet, inklusive Datum
• Ob Codes kombinierbar sind (stacken)
• Die Rückgaberichtlinien für Geschenke

Diese einzelne Zeile reduziert einen signifikanten Teil des Black Friday Support-Volumens. Sie ist auch der Block, den die meisten Stores komplett vergessen.

4. Kuratierte Einstiegspunkte

Ersetze die üblichen „Neuheiten“- und „Bestseller“-Reihen durch Wege ins Angebot: nach Kategorie, nach Preis, nach Empfänger.

„Geschenke unter 50 €“ ist ein besseres Black Friday Modul als „Neuheiten“, weil es genau zu dem Intent passt, mit dem die Leute Ende November tatsächlich auf die Seite kommen. Drei bis fünf Wege, nicht mehr. Jeder davon sollte auf einer echten kuratierten Seite statt auf einer gefilterten Collection-URL landen – siehe so erstellst du eine Promo-Seite in Shopify.

Halte die Auswahl klein. Die Aufgabe der Homepage ist hier, jemanden von der Homepage wegzubekommen und in eine Collection zu leiten.

5. Logistik und Trust

Verschiebe Bestellfristen (Shipping Cutoffs), Rückgabebedingungen und Zahlungsoptionen weiter nach oben auf die Seite.

Ende November steht „Kommt es rechtzeitig an?“ über fast jedem anderen Einwand. Wenn die Antwort auf der Homepage sichtbar ist, verhindert das den Absprung zu einem Konkurrenten, der diese Info offensichtlich platziert hat. Nenne die tatsächlichen Daten, nicht einfach nur „bald bestellen“.

Was du in Ruhe lassen solltest

Der Instinkt im November ist es, alles zu verbessern. Widerstehe ihm, denn jede Änderung ist eine Änderung, die du vielleicht am Freitagmorgen um 6 Uhr debuggen musst.

• Navigationsstruktur. Füge von mir aus einen „Black Friday“-Menüpunkt hinzu. Aber strukturiere das Menü nicht um.
• Suche und Filterung. Der Peak-Traffic ist der schlechtestmögliche Zeitpunkt, um einen Bug in der Facettensuche zu entdecken.
• Produkt-Templates (PDPs). Aktualisiere die beworbenen PDPs mit Angebotspreisen und stärkeren Trust-Signalen, aber baue das Template nicht um.
• Checkout. Nicht während BFCM. Für gar nichts.
• Apps. Im November noch eine hinzuzufügen, bedeutet ungetestetes Script-Gewicht auf jeder Seite. Wenn überhaupt, überprüfen und entfernen.
• Das Theme selbst. Strukturelle Theme-Arbeiten sollten bis Ende September abgeschlossen sein. Kampagnen-States liegen auf einem eingefrorenen (frozen) Theme.

Die zwei Dinge, die kaputtgehen

Bei den Stores, die wir sehen, scheitern Black Friday Homepages jedes Jahr auf dieselben zwei Arten.

Layout Shift durch spät ladende Kampagnen-Elemente

Die Announcement Bar, der Countdown und die Sticky Promo Bar werden alle gerne nach dem First Paint per JavaScript injected. Jedes Element ohne reservierten Platz schiebt die Seite nach unten, nachdem der Besucher bereits angefangen hat zu lesen. Auf mobilen Geräten ist das der Unterschied zwischen dem Tippen auf den CTA und dem Tippen auf das, was stattdessen an diese Stelle gerückt ist.

Reserviere die Höhe in CSS für jedes Element, das erscheinen wird. Gib Countdown-Ziffern eine feste Breite mit tabular-nums, damit der Timer die Zeile nicht jede Sekunde neu umbricht (re-flow).

Saisonale Farbpaletten, die beim Kontrast durchfallen

Das ist der Punkt, den fast niemand überprüft. Black Friday Designs werden dunkel, kontrastreich und stark akzentuiert – anthrazitfarbene Hintergründe, rote Sale-Flags, goldene oder neonfarbene Akzente. Viele dieser Kombinationen erfüllen nicht einmal das Kontrastverhältnis von 4,5:1, das die WCAG für normalen Text vorschreibt. Am schlimmsten fallen meistens der Angebotspreis und der Sale-Badge durch: genau die Elemente, wegen derer die ganze Seite existiert.

Es ist auch die schlechteste Jahreszeit, um hier Fehler zu machen. Der European Accessibility Act gilt seit dem 28. Juni 2025. Für Stores, die in die EU verkaufen, ist dies also ein rechtliches Risiko und kein Nice-to-have, und am Black Friday erreicht dein Traffic seinen Höhepunkt.

Zwei Checks, jeweils fünf Minuten:

• Jage den Sale-Preis, den Badge-Text und das CTA-Label in ihrer echten Größe durch einen Contrast-Checker.
• Tabbe mit der Tastatur durch die Homepage. Wenn die neuen Kampagnen-Module nicht erreichbar sind oder der Fokus-Ring auf dem dunklen Hintergrund unsichtbar ist, behebe das noch vor Freitag.

Für das breitere Spektrum, siehe die sechs häufigsten Barrierefreiheits-Fehler in Shopify-Themes und unseren Guide zum European Accessibility Act.

Baue zuerst den Rollback

Am 1. Dezember muss der Store wieder in den Normalzustand zurückkehren. Das ist oft der Moment, in dem etwas kaputtgeht, weil das Takeover als Einweg-Änderung von jemandem eingebaut wurde, der jetzt schläft.

Bevor du den Kampagnen-State veröffentlichst:

• Dupliziere das Theme und benenne es eindeutig – „Pre-BFCM Baseline“, mit dem Datum.
• Schreibe auf, welche Sections geändert wurden und wer sie geändert hat.
• Plane die Wind-down Phase, nicht nur den Aus-Schalter. Über Nacht von „30 % auf alles“ auf nichts zurückzugehen, ist eine schlechte Customer Experience für jeden, der gerade etwas im Warenkorb hat. Ein kürzeres, kleineres Dezember-Angebot erleichtert den Übergang.
• Benenne eine Person, die während des Wochenendes Änderungen freigeben darf, und leite alles über diese Person.

Wenn du das liest und noch 48 Stunden Zeit hast

Die Kurzfassung, nach Priorität geordnet:

1. Announcement Bar mit dem Angebot und dem Enddatum, mit reservierter Höhe.
2. Hero-Headline und CTA, die zum Angebots-Hub führen. Verwende das bestehende Bild wieder, falls das neue noch nicht fertig ist.
3. Leiste mit Angebotsbedingungen unter dem Hero-Bereich.
4. Bestellfristen für den Versand (Shipping Cutoff) auf mobilen Geräten “above the fold” sichtbar machen.
5. Dupliziere das Theme, um ein Rollback machen zu können.

Das sind ein paar Stunden Arbeit und sie decken den größten Teil des Nutzens ab. Die kuratierten Einstiegspunkte und der neu designte Hero-Bereich sind die Dinge, die du weglassen solltest, wenn die Zeit knapp wird – nicht die Bedingungen und die Deadline.

Für die komplette Abfolge und die Pre-Launch-Checkliste, sieh dir das Shopify BFCM Playbook an. Wenn das Angebot selbst noch nicht feststeht, behandelt Black Friday Sale Ideen für Shopify-Stores die Mechaniken und was sie jeweils kosten. Änderungen auf dieser Ebene sind genau das, wofür der Shopify Store Editor von Fudge gedacht ist: Kampagnen-Modi über einem Theme, das du sonst nicht anfasst. Fudge kann deine aktuelle Homepage überprüfen, auflisten, was auf der Checkliste oben fehlt, und die Announcement Bar, den Hero-Bereich und die Angebotsleiste in deinem Theme als Entwürfe bauen, die sich dein Team vorab ansehen kann, bevor sie live gehen. Jede veröffentlichte Änderung speichert die Version, die sie ersetzt hat, sodass du sie nach dem Sale einzeln wiederherstellen kannst.

FAQ