Das Wichtigste auf einen Blick
- Abschnitte über den Theme Editor hinzufügen: Customizer > 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 enthalten sind.
- Gängige Abschnitte: Image-Banner, Ausgewählte Kollektion, Rich Text, Bild mit Text, Testimonials, Video.
- Für Abschnitte, die nicht in deiner Theme-Bibliothek sind, kannst du Fudge nutzen, um sie als nativen Shopify-Code zu erstellen.
Die Shopify-Startseite ist aus modularen Abschnitten (Sections) aufgebaut. Jeder Abschnitt ist ein eigenständiger Block aus Inhalt und Layout. Mehr Abschnitte bedeuten mehr Storytelling, bessere Produktentdeckung und mehr Conversion-Möglichkeiten auf der Startseite deines Shops.
Warum du uns vertrauen kannst
Wir haben Homepages für Hunderte von Shopify-Stores erstellt und optimiert. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer 5,0-Bewertung 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. Öffnen Sie im Theme-Editor die Startseite und betrachten Sie die Liste der Abschnitte in der linken Seitenleiste.
Schritt 2. Fahren Sie mit der Maus über einen Abschnittsnamen – ein Griff zum Ziehen erscheint.
Schritt 3. Ziehen Sie den Abschnitt an die gewünschte Position.
Schritt 4. Speichern.
