Ausverkauftes Hero-Produkt: warum es von der Startseite verschwinden sollte — und wie

Die Startseite ist das Schaufenster und gleichzeitig der erste Filter der Customer Journey. Ein prominent platzierter Bestseller im sichtbaren Bereich konvertiert gut, weil der Besucher Bilder ansehen, Varianten wählen und direkt in den Warenkorb legen kann, ohne die Seite zu wechseln. Das Theme Be Yours löst diesen Abschnitt sauber.

Nur reagiert er nicht auf die Realität im Lager. Fällt der Bestand auf null, bleibt der Bereich in voller Größe stehen — lediglich der Button wechselt auf „Ausverkauft". Der Rest der Seite tut so, als wäre nichts passiert.

Was der ausverkaufte Button kostet

Der Aufbau funktioniert: gutes Bild, überzeugender Text, steigende Kaufbereitschaft. Der Klick auf den Call-to-Action ist die logische Folge — und läuft ins Leere. Statt den Besucher weiterzuführen, endet die stärkste Position der Seite in einer Sackgasse.

Besonders teuer wird das, wenn bezahlter Traffic auf dieser Seite landet. Wer über eine Google-Ads-Kampagne auf die Startseite führt, bezahlt jeden Klick — unabhängig davon, ob das beworbene Produkt gerade lieferbar ist. Die teuerste Fläche im Shop arbeitet dann nicht.

Warum Bordmittel hier nicht greifen

Bei Produkt-Rastern gibt es einen bekannten Weg ohne Code: eine automatische Kategorie mit der Bedingung „Lagerbestand größer als 0". Ausverkaufte Artikel fallen heraus, und ist die Kategorie leer, verschwindet der Abschnitt von selbst.

Für den Einzelprodukt-Abschnitt gilt das nicht. Dort wählen Sie im Theme-Editor ein konkretes Produkt aus, und diese Auswahl hat Vorrang — eine Option „ausblenden, wenn nicht verfügbar" ist nicht vorgesehen. Für diese Automatik braucht es einen kleinen Eingriff in die Sektionsdatei.

Die Lösung im Theme-Code

Die Logik ist simpel: Wenn ein Produkt gewählt ist und dieses Produkt nicht verfügbar ist, wird der Abschnitt nicht ausgegeben. Umgesetzt wird das in vier Schritten:

1. Theme duplizieren. Unter „Onlineshop → Themes" beim aktiven Theme eine Kopie anlegen und ausschließlich in dieser arbeiten.
2. Code-Editor der Kopie öffnen und in den Ordner Sections wechseln.
3. Datei finden: meist featured-product.liquid, je nach Theme-Version auch main-featured-product.liquid. Der Dateiname im Theme-Editor unter „Abschnitt bearbeiten" hilft bei der Zuordnung.
4. Bedingung einsetzen — der Block gehört an den Anfang der Datei, das Gegenstück ans Ende.

Der Code im Detail

Die verbreitete Kurzfassung blendet den Abschnitt per CSS aus:

{%- comment -%} Schnelle Variante — mit Einschränkungen {%- endcomment -%}
{%- if section.settings.product != blank
      and section.settings.product.available == false
      and request.design_mode == false -%}
  <style>#shopify-section-{{ section.id }}{display:none !important;}</style>
{%- endif -%}

Das funktioniert, hat aber zwei Haken: Der komplette Abschnitt wird trotzdem gerendert, der Browser lädt also Bilder für einen unsichtbaren Bereich. Und ohne die Abfrage auf request.design_mode wäre der Abschnitt auch im Theme-Editor unsichtbar — Sie könnten ihn dort nicht mehr anfassen, um ein anderes Produkt zu hinterlegen.

Sauberer ist es, den Inhalt gar nicht erst auszugeben. Dafür umschließt eine Bedingung den bestehenden Code der Datei:

{%- comment -%} Zeile 1 der Sektionsdatei {%- endcomment -%}
{%- assign featured = section.settings.product -%}
{%- assign hide = false -%}
{%- if featured != blank and featured.available == false -%}
  {%- unless request.design_mode -%}
    {%- assign hide = true -%}
  {%- endunless -%}
{%- endif -%}

{%- if hide -%}
  <style>#shopify-section-{{ section.id }}{display:none;}</style>
{%- else -%}

... hier steht der bestehende Code der Sektion ...

{%- endif -%}
{%- comment -%} und diese Zeile ganz ans Ende der Datei {%- endcomment -%}

Achtung beim Einfügen: Der abschließende {%- endif -%} muss vor dem {% schema %}-Block stehen, nicht dahinter. Liegt er falsch, lässt sich das Theme nicht speichern.

Alternativen ohne Code

Bevor Sie eine Theme-Datei anfassen, lohnt ein Blick auf zwei Wege, die ohne Wartungsaufwand auskommen:

Verstecken ist also nicht automatisch die beste Antwort. Bei einem Artikel, der in zehn Tagen wieder da ist, kostet das Ausblenden Adressen. Bei einem Artikel ohne Nachschub kostet das Anzeigen Umsatz.

Was nach dem Einbau zu tun ist

• Layout prüfen. Fällt ein großer, bildlastiger Bereich weg, verändert sich der Rhythmus der Startseite. Sehen Sie sich das Ergebnis auf dem Desktop und auf dem Handy an.
• Theme-Updates einplanen. Ein Update überschreibt die geänderte Datei. Notieren Sie den Eingriff, damit er nach dem Versionssprung wieder gesetzt wird — inklusive Dateiname und Fundstelle.
• Die Lücke füllen. Ein dauerhaft ausgeblendeter Bestseller ist ein kaufmännisches Signal, kein technisches. Hinterlegen Sie ein Ersatzprodukt oder rücken Sie einen anderen Abschnitt nach oben.
• Wirkung messen. Beobachten Sie in Analytics, wie sich die Klicks auf die darunterliegenden Bereiche verändern, wenn die Startseite kürzer wird. Manchmal ist die straffere Variante die bessere.

Solche Eingriffe sind Kleinarbeit mit direkter Umsatzwirkung — genau das, was wir in der Shopentwicklung und über unsere Sofortmaßnahmen für Shops übernehmen. Wie ein durchgängig gepflegtes Sortiment aussieht, zeigen unsere Case Studies.

• Theme dupliziert, Änderung nur in der Kopie
• request.design_mode berücksichtigt, Abschnitt im Editor weiterhin bearbeitbar
• {% endif %} vor dem Schema-Block platziert
• Darstellung auf Desktop und Mobil geprüft
• Eingriff für das nächste Theme-Update dokumentiert