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
Image-Banner / Hero Ein Abschnitt in voller Breite mit einem Hintergrundbild und Overlay-Text. Das primäre Hero-Element der Startseite. Die meisten Themes enthalten dies mit Einstellungen für Headline, Subtext, Button, Overlay-Deckkraft und Textausrichtung.
Rich Text Ein zentrierter Textblock. Nützlich für Marken-Statements, Ankündigungen oder jeden inhaltsorientierten Abschnitt, bei 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 Brand-Story-Abschnitte, Feature-Highlights oder Produkt-Spotlights.
Ausgewählte Kollektion (Featured collection) Zieht Produkte aus einer gewählten Kollektion und zeigt sie als Produktraster an. Lege die Kollektion in den Abschnittseinstellungen fest.
Ausgewähltes Produkt (Featured product) Hebt ein einzelnes Produkt mit Bild, Titel, Preis und In-den-Warenkorb-Button direkt auf der Startseite hervor.
Mehrspaltig (Multicolumn) Zwei bis vier Spalten Inhalt – Icon oder Bild oben, Headline und Text. Gut geeignet für „So funktioniert’s“-Bereiche, Markenmerkmale oder Vorteilslisten.
Testimonials Ein Raster oder Carousel mit Kundenbewertungen. Kann im Theme integriert oder als Blocktyp innerhalb anderer Abschnitte verfügbar sein.
Video Ein eingebettetes Video oder ein Hintergrundvideo-Abschnitt. Die meisten Themes unterstützen YouTube- und Vimeo-URLs.
Countdown-Timer / Ankündigung Einige Themes enthalten Urgency-Abschnitte für Sales oder Launches. Nicht universell verfügbar.
E-Mail-Anmeldung / Newsletter Ein Call-to-Action-Abschnitt zur Erfassung von E-Mail-Adressen. Enthält normalerweise ein Textfeld und einen Submit-Button.
Kollektionsliste (Collection list) Zeigt mehrere Kollektionen als Bildkacheln an – nützlich für Shops mit unterschiedlichen Produktkategorien.
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. Schau dir im Theme Editor bei ausgewählter Startseite die Abschnittsliste in der linken Seitenleiste an.
Schritt 2. Fahre mit der Maus über einen Abschnittsnamen – ein Griff zum Ziehen erscheint.
Schritt 3. Ziehe ihn an die gewünschte Stelle.
Schritt 4. Speichern.
