Die wichtigsten Punkte
- Füge Abschnitte über den Theme Editor hinzu: Anpassen > Startseite > Abschnitt hinzufügen.
- Die verfügbaren Abschnittstypen hängen von deinem Theme ab - du kannst keine Typen hinzufügen, die nicht in der Bibliothek deines Themes vorhanden sind.
- Häufige Abschnitte: Image-Banner, Vorgestellte Kategorie (Featured Collection), Rich Text, Bild mit Text, Testimonials, Video.
- Für Abschnitte, die nicht in der Bibliothek deines Themes enthalten sind, kannst du Fudge nutzen, um sie als nativen Shopify-Code zu erstellen.
Die Startseite von Shopify besteht aus modularen Abschnitten (Sections). Jeder Abschnitt ist ein eigenständiger Block für Inhalte und Layout. Das Hinzufügen weiterer Abschnitte bedeutet mehr Storytelling, Produktentdeckungen und Conversion-Möglichkeiten für die Startseite deines Shops.
Warum du uns vertrauen kannst
Wir haben Homepages für Hunderte von Shopify-Shops gebaut und optimiert. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer Bewertung von 4.9 im Shopify App Store.
So fügst du einen Abschnitt zu deiner Shopify-Startseite hinzu
Schritt 1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes > Anpassen.
Schritt 2. Stelle sicher, dass die Seitenauswahl oben Startseite (Home page) anzeigt. Klicke darauf und wähle die Startseite aus, falls nötig.
Schritt 3. Scrolle in der linken Seitenleiste zum Ende der Abschnittsliste.
Schritt 4. Klicke auf Abschnitt hinzufügen.
Schritt 5. Ein Modal öffnet sich und zeigt alle Abschnittstypen an, die dein Theme enthält. Durchsuche die Liste und klicke auf den Abschnitt, den du hinzufügen möchtest.
Schritt 6. Der Abschnitt wird am Ende deiner Startseite hinzugefügt. Ziehe ihn in der linken Seitenleiste nach oben oder unten, um ihn zu positionieren.
Schritt 7. Klicke auf den Abschnitt in der Seitenleiste, um seine Einstellungen zu öffnen und den Inhalt zu konfigurieren.
Schritt 8. Speichern.
Gängige Shopify-Abschnittstypen für die Startseite
Bildbanner / Hero Ein vollflächiger Bereich mit Hintergrundbild und überlagertem Text. Das primäre Hero-Element der Startseite. Die meisten Themes enthalten diesen Abschnitt mit Einstellungen für Überschrift, Untertext, Button, Deckkraft des Overlays und Textausrichtung.
Rich Text Ein zentrierter Textblock. Nützlich für Leitbilder der Marke, Ankündigungen oder jeden inhaltsfokussierten Bereich, in dem kein Bild benötigt wird.
Bild mit Text Ein zweispaltiges Layout – Bild auf der einen Seite, Text auf der anderen. Vielseitig einsetzbar für Markengeschichten, Highlight-Funktionen oder Produktvorstellungen.
Vorgestellte Kollektion Zieht Produkte aus einer ausgewählten Kollektion und zeigt sie als Produktraster an. Die Kollektion kann in den Abschnitteinstellungen festgelegt werden.
Vorgestelltes Produkt Hervorhebung eines einzelnen Produkts mit Bild, Titel, Preis und „In den Warenkorb“-Button direkt auf der Startseite.
Mehrspaltig Zwei bis vier Spalten mit Inhalten – Icon oder Bild oben, Überschrift und Text. Gut geeignet für „Wie es funktioniert“-Abschnitte, Markenmerkmale oder Vorteilslisten.
Kundenbewertungen Ein Raster oder Karussell mit Kundenrezensionen. Kann fest im Theme integriert oder als Blocktyp innerhalb anderer Abschnitte verfügbar sein.
Video Ein eingebettetes Video oder ein Hintergrundvideo-Bereich. Die meisten Themes unterstützen YouTube- und Vimeo-URLs.
Countdown-Timer / Ankündigung Einige Themes enthalten Bereiche, um Dringlichkeit für Verkäufe oder Produkteinführungen zu erzeugen. Nicht universell vorhanden.
E-Mail-Anmeldung / Newsletter Ein Call-to-Action-Bereich zur Erfassung von E-Mail-Adressen. Enthält normalerweise ein Textfeld und einen Absenden-Button.
Kollektionsliste Zeigt mehrere Kollektionen als Bildkacheln an – nützlich für Shops mit verschiedenen Produktkategorien.
Verwandt: Fudge Page Builder.
Verwandt: Blöcke zu einem Shopify-Abschnitt hinzufügen.
Weitere Details finden Sie in unserem Leitfaden zum Neuaufbau Ihrer Shopify-Startseite.
Warum du einen benutzerdefinierten Abschnitt nicht direkt im Theme Editor hinzufügen kannst
Das „Abschnitt hinzufügen“-Modal des Theme Editors zeigt nur Abschnitte an, die bereits in dein Theme einprogrammiert sind. Du kannst keinen neuen Abschnittstyp von Grund auf innerhalb des Theme Editors erstellen.
Wenn du einen Abschnittstyp benötigst, den dein Theme nicht enthält – ein Quiz, einen Countdown, einen Produktvergleich, ein spezielles Testimonial-Layout, eine Sticky Announcement Bar – benötigst du einen dieser Ansätze:
A – Eine Shopify App. Einige Apps fügen der Theme Editor-Bibliothek neue Abschnittstypen hinzu. Nützlich für spezifische Funktionen.
B – Code. Ein Developer fügt einen benutzerdefinierten Abschnitt zum Code deines Themes hinzu. Der Abschnitt erscheint dann im Theme Editor zur Verwendung.
C – Fudge. Beschreibe den gewünschten Abschnitt in einfachem Englisch und Fudge erstellt ihn als nativen Liquid-Code in deinem Theme. Du musst selbst nicht programmieren.
Einen benutzerdefinierten Abschnitt mit Fudge zur Shopify-Startseite hinzufügen
Öffne Fudge und beschreibe, was du auf deiner Startseite hinzufügen möchtest:
-
„Füge einen ‘So funktioniert’s’-Abschnitt mit drei Schritten hinzu, jeder mit einem nummerierten Icon, einer fettgedruckten Headline und zwei Zeilen Beschreibungstext. Platziere ihn zwischen dem Hero und der ausgewählten Kollektion.“
-
„Füge ein Testimonial-Carousel zur Startseite hinzu, das fünf Kundenzitate mit Sternbewertungen, Name und Wohnort anzeigt. Gestalte es mit der primären Markenfarbe als Hintergrund.“
-
„Füge einen Countdown-Timer-Abschnitt für unseren Summer Sale Launch hinzu. Zeige Tage, Stunden, Minuten, Sekunden an. Dunkler Hintergrund, weißer Text. Positioniere ihn ganz oben auf der Startseite unter der Ankündigungsleiste.“
Fudge generiert den Abschnitt als Entwurf in deinem Theme. Du prüfst ihn im Theme Editor, nimmst eventuelle Anpassungen vor und veröffentlichst ihn.
Homepage-Abschnitte neu anordnen
Schritt 1. Wähle im Theme Editor die Startseite aus und schau dir die Abschnittsliste in der linken Seitenleiste an.
Schritt 2. Fahre mit der Maus über einen Abschnittsnamen – ein Drag-and-Drop-Symbol (Ziehpunkt) erscheint.
Schritt 3. Ziehe ihn in die gewünschte Reihenfolge.
Schritt 4. Speichern.
Wenn die Reihenfolge nicht das eigentliche Problem ist, zeigt dir unser kostenloses Shopify Website Redesign Tool drei originelle Entwürfe für deine Startseite, basierend auf deinen eigenen Produkten und Inhalten.
FAQ
Sechs bis neun funktionieren in der Regel am besten. Bei weniger als fünf wirkt die Startseite oft zu leer; bei mehr als zehn hören die Käufer auf zu scrollen, bevor sie unten angekommen sind. Jeder Abschnitt sollte seine Daseinsberechtigung haben – wenn ein Abschnitt nicht zu einem Klick oder einem Add-to-Cart führt oder Vertrauen aufbaut, entferne ihn.
Ja. Du kannst drei Rich-Text-Abschnitte, zwei Image-Banner, vier mehrspaltige Abschnitte hinzufügen – ganz wie es die Seite erfordert. Jede Instanz hat ihre eigenen Einstellungen, sodass sie völlig unterschiedliche Inhalte haben können. Die einzige Grenze ist das, was die max_blocks oder Abschnittslimits deines Themes vorgeben.
Drei häufige Ursachen: (1) Du hast im Theme Editor nicht auf Speichern geklickt, (2) der Abschnitt wurde hinzugefügt, aber der erforderliche Inhalt (Bild, Kategorie, Produkte) ist leer, sodass das Theme nichts rendert, oder (3) der Abschnitt hat Sichtbarkeitsregeln in seinen Einstellungen (z. B. "Nur auf dem Desktop anzeigen"), die ihn auf dem Gerät ausblenden, auf dem du gerade nachsiehst.
Nicht nativ. Die Abschnitte im Theme Editor sind statisch – jeder sieht dieselbe Startseite. Für eine kundenbezogene Personalisierung kannst du die Regel in Fudge beschreiben ("Zeige diese Hero-Variante eingeloggten VIP-Kunden, die Standardvariante allen anderen") und es erstellt einen Abschnitt mit auf Kunden-Tags basierendem Liquid, das serverseitig gerendert wird. Alternativen: Shopify Markets für regionale Inhalte oder eine Personalisierungs-App.
Ein Template ist die JSON-Datei, die definiert, welche Abschnitte auf einer Seite erscheinen (z. B. index.json für die Startseite). Eine Section (Abschnitt) ist der modulare Inhaltsblock, der innerhalb des Templates gerendert wird. Templates setzen Abschnitte zusammen; Abschnitte rendern den Inhalt.
