Shopify-Theme anpassen: Header, Footer & Startseite für Einsteiger

Du hast ein Theme ausgewählt und willst jetzt Header, Footer und Startseite gestalten? Diese Anleitung zeigt dir, wie du dein Shopify-Theme anpasst, ohne programmieren zu können, und löst die Probleme, an denen Einsteiger am häufigsten hängen bleiben. Sie gehört zu unserem Überblick Shopify-Design & Technik.

Bevor du anfängst: drei Dinge vorbereiten

1. Theme duplizieren

Shopify empfiehlt, vor dem Anpassen eine Sicherungskopie anzulegen. Dupliziere dein Theme über das Aktionsmenü mit den drei Punkten. Gefällt dir das Ergebnis nicht, veröffentlichst du einfach wieder die Kopie. Einen „Zurücksetzen“-Knopf gibt es nämlich nicht.

2. Erst Produkte, dann Design

Leg zuerst ein paar echte Produkte an und sortiere sie in Kollektionen. Viele Startseiten-Abschnitte zeigen Produkte aus einer Kollektion. Solange es keine gibt, siehst du nur graue Platzhalter oder Beispielprodukte und kannst das Layout schlecht beurteilen. Wie du deine Struktur sinnvoll aufbaust, zeigt Kollektionen und Menü in Shopify.

3. Adminbereich auf Deutsch stellen

Ist dein Adminbereich auf Englisch? Die Sprache stellst du in deinem Profil um: Shop-Name oben rechts, dann Profil, Abschnitt „Bevorzugte Sprache“. Laut Shopify ändert das nur die Anzeige im Adminbereich, nicht die Sprache deines Shops. Die Shopsprache legst du separat fest.

Shopify-Theme anpassen: So funktioniert der Theme-Editor

Du öffnest den Editor im Shopify-Adminbereich unter Onlineshop. Beim gewünschten Theme klickst du auf „Theme bearbeiten“. Ältere Tutorials zeigen hier noch den Button „Anpassen“. Gemeint ist dasselbe.

Der Editor hat drei Bereiche:

• Seitenauswahl oben: Hier wechselst du zwischen Startseite, Produktseite, Kollektionsseite, Warenkorb und weiteren Vorlagen. Wer nur die Startseite bearbeitet, wundert sich sonst, warum sich die Produktseite nicht ändert.
• Seitenleiste links: Sie zeigt die Abschnitte der aktuellen Seite. Über Symbole erreichst du außerdem die Theme-Einstellungen und die App-Einbettungen.
• Vorschau: Hier siehst du deine Änderungen sofort. Du kannst zwischen Desktop- und Mobilansicht umschalten.

Abschnitte und Blöcke: das Baukastenprinzip

Laut Shopify Help Center besteht eine Vorlage aus Abschnitten, die wiederum aus Blöcken bestehen. Ein Abschnitt ist zum Beispiel „Bild mit Text“. Die Blöcke darin sind Überschrift, Text und Button. Du kannst Abschnitte hinzufügen, per Drag-and-drop verschieben, ausblenden oder löschen. Das Gleiche gilt für Blöcke.

Pro Vorlage sind laut Shopify bis zu 25 Abschnitte möglich. Bei Themes der Horizon-Familie kannst du Blöcke zusätzlich ineinander verschachteln. Das macht freiere Layouts ohne Code möglich. Mehr zur Wahl des Themes liest du in Shopify-Theme wählen: kostenlos oder Premium.

Header anpassen: Logo, Menü, Ankündigungsleiste

Der Header erscheint auf jeder Seite. Änderungen hier wirken also überall.

Logo einfügen statt „My Store“

Steht oben noch der Shopname als Text, ist noch kein Logo hinterlegt. Klicke im Editor auf den Header und lade dein Logo hoch, je nach Theme direkt im Header oder in den Theme-Einstellungen unter „Logo“. Shopify empfiehlt für das Standardlogo PNG oder JPEG mit mindestens 512 Pixel Breite und ohne Ränder oder Leerraum. Sonst wirkt das Logo im Header kleiner, als es soll. Die Logobreite stellst du per Regler ein. Wenn sich dabei der ganze Header vergrößert, ist dein Logo zu hoch oder hat Leerraum oben und unten. Schneide es knapp zu.

Das Logo im Checkout ist übrigens eine eigene Einstellung. Du setzt es laut Shopify-Hilfe im Checkout-Editor unter den Checkout-Einstellungen, nicht im Theme. Wie du ein Logo erstellst und welche Formate du brauchst, steht in Shopname und Logo finden.

Menü verknüpfen

Welche Punkte im Hauptmenü stehen, legst du nicht im Theme-Editor fest, sondern im Adminbereich unter Inhalt > Menüs. Im Header wählst du nur aus, welches Menü angezeigt wird. Halte das Hauptmenü kurz: fünf bis sieben Punkte reichen für die meisten Shops.

Ankündigungsleiste

Die schmale Leiste über dem Header eignet sich für eine einzige, wichtige Botschaft: etwa „Kostenloser Versand ab 50 €“ oder „Versand in 1–2 Werktagen“. Mehrere wechselnde Meldungen lenken eher ab.

Transparenter oder fixierter Header

Ob das Menü direkt über dem Startbild liegt (transparenter Header) oder beim Scrollen mitläuft (fixierter Header), hängt vom Theme ab. Viele aktuelle Themes bieten beides als Einstellung im Header-Abschnitt. Fehlt die Option, geht es nur per Code. Prüf dann lieber ein anderes Theme, als den Header umzuprogrammieren.

Startseite aufbauen: Abschnitte in sinnvoller Reihenfolge

Die Startseite muss in wenigen Sekunden drei Fragen beantworten: Was gibt es hier? Warum hier kaufen? Wohin klicke ich als Nächstes? Eine bewährte Reihenfolge:

1. Startbild oder Slideshow: Ein klares Bild deines Produkts im Einsatz, eine Überschrift mit deinem Nutzenversprechen, ein Button zur wichtigsten Kollektion.
2. Bestseller oder Hauptkollektion: Der Abschnitt „Ausgewählte Kollektion“ zeigt Produkte direkt auf der Startseite.
3. Vorteile: Drei bis vier kurze Punkte wie Versandzeit, Rückgabe, Herkunft, Material.
4. Bild mit Text: Kurz, wer hinter dem Shop steht und warum es ihn gibt.
5. Bewertungen: Echte Kundenstimmen schaffen Vertrauen. Mehr dazu in Bewertungen und Vertrauen im Shop.
6. Newsletter-Anmeldung: Optional, aber sinnvoll, wenn du E-Mail-Marketing planst.

Produkte erscheinen nicht auf der Startseite?

Das ist eine der häufigsten Einsteigerfragen. Prüfe der Reihe nach:

• Hast du im Abschnitt „Ausgewählte Kollektion“ (oder ähnlich benannt) überhaupt eine Kollektion ausgewählt? Ohne Auswahl zeigt das Theme Beispielprodukte.
• Liegt das Produkt in dieser Kollektion?
• Ist das Produkt aktiv und im Vertriebskanal Onlineshop veröffentlicht?
• Ist die Anzahl der angezeigten Produkte im Abschnitt hoch genug eingestellt?

Hakt es schon beim Anlegen oder Veröffentlichen der Produkte, hilft Produkte in Shopify anlegen, importieren und sichtbar machen.

Wird auf der Startseite ein niedrigerer Preis angezeigt als auf der Produktseite, ist das meist normal: Bei Produkten mit Varianten zeigt die Kollektion den Preis der günstigsten Variante.

Banner, Slideshow und Video

Für ein Startbild nutzt du den Abschnitt „Bildbanner“, für mehrere wechselnde Bilder die „Slideshow“. Die meisten aktuellen Themes haben auch einen Video-Abschnitt. Darin kannst du ein hochgeladenes Video oder ein YouTube-/Vimeo-Video einbinden.

Feste Pixelmaße für Banner gibt Shopify nicht vor, sie hängen vom Theme ab. Laut Shopify-Hilfe zu Theme-Bildern darf ein Bild höchstens 20 MB und 20 Megapixel haben. Wähle ein Seitenverhältnis, das zum Bildbereich des Abschnitts passt, und setze einen Fokuspunkt, damit das Motiv beim Zuschneiden sichtbar bleibt.

Footer: Rechtstexte, Kontakt, Newsletter

Der Footer ist in Deutschland mehr als Deko. Hier gehören die Links zu deinen Rechtstexten hin, damit sie von jeder Seite erreichbar sind:

• Impressum
• Datenschutzerklärung
• AGB und Widerrufsbelehrung
• Versand- und Zahlungsinformationen
• Seit 19.06.2026 zusätzlich die elektronische Widerrufsfunktion, also ein gut sichtbarer Button zum Widerrufen während der Widerrufsfrist

Die Texte selbst legst du als Seiten oder Richtlinien an und verknüpfst sie über ein eigenes Footer-Menü. Welche Texte du brauchst und wo Abmahnfallen lauern, erklärt Shopify abmahnsicher machen.

Daneben passen in den Footer: Kontaktdaten, Social-Media-Links und eine Newsletter-Anmeldung. Wie du Anmeldungen sinnvoll nutzt, zeigt E-Mail-Marketing in Shopify.

Den Hinweis „Powered by Shopify“ blendest du bei vielen Themes über Onlineshop > Drei-Punkte-Menü beim Theme > „Standard-Theme-Inhalt bearbeiten“ aus: nach „Powered“ filtern und den Text durch ein Leerzeichen ersetzen. Manche Themes haben dafür auch eine Option direkt im Footer.

Theme-Einstellungen: Farben, Schriften, Warenkorb

Seitenübergreifende Gestaltung regelst du in den Theme-Einstellungen, die du über ein Symbol in der Seitenleiste des Editors öffnest. Typische Bereiche:

• Farben: Lege zwei bis drei Markenfarben fest und nutze Farbschemata für Abschnitte. Achte auf genug Kontrast zwischen Text und Hintergrund. Gut lesbare Texte sind auch für die Barrierefreiheit wichtig.
• Typografie: Eine Schrift für Überschriften, eine für Text. Mehr wirkt unruhig. Eine eigene, heruntergeladene Schrift geht nur per Datei-Upload und CSS, nicht über die Schriftauswahl.
• Warenkorb: Ob ein Einschub-Warenkorb (Drawer), ein Pop-up oder eine eigene Warenkorb-Seite erscheint, stellst du je nach Theme hier ein. Fehlt die Option, unterstützt dein Theme sie nicht.
• Favicon und Social-Media-Links: Kleines Symbol im Browser-Tab und deine Profile.
• Benutzerdefiniertes CSS: Für kleine optische Korrekturen, etwa eine Button-Farbe, die das Theme nicht anbietet. Laut Shopify gibt es das Feld in den Theme-Einstellungen (bis 1.500 Zeichen) und pro Abschnitt (bis 500 Zeichen). Im Checkout wirkt es nicht.

Seiten, Vorlagen und Formulare

Seiten wie „Über uns“, FAQ oder Kontakt legst du im Adminbereich unter Onlineshop > Seiten an, nicht im Theme-Editor. Damit Besucher sie finden, verlinkst du sie anschließend im Haupt- oder Footer-Menü.

Änderung erscheint auf allen Seiten?

Laut Shopify wirken Änderungen an einer Vorlage auf alle Seiten, die sie nutzen. Ein neuer Abschnitt auf „Über uns“ taucht also auch auf der FAQ-Seite auf, wenn beide die Standardvorlage verwenden. Die Lösung: Im Theme-Editor oben in der Seitenauswahl den Vorlagentyp wählen, „Vorlage erstellen“ klicken und sie danach der Seite im Adminbereich unter „Theme-Vorlage“ zuweisen. Bei Produkten geht es genauso. Header und Footer gelten dagegen für alle Seiten. Einen anderen Header pro Seite gibt es nur per Code.

Kontaktformular und eigene Formulare

Das Kontaktformular hängt an der Seitenvorlage „contact“. Hast du es gelöscht, legst du eine neue Seite mit dieser Vorlage an. Zusätzliche Pflichtfelder oder eigene Formulare brauchen etwas Code oder eine Formular-App. Für Newsletter-Anmeldungen und Pop-ups gibt es die kostenlose App Shopify Forms. Sie erscheint im Editor als App-Block bzw. App-Einbettung, nicht in der normalen Abschnittsliste.

Checkout anpassen: Was geht und was nicht

Der Checkout gehört nicht zum Theme, deshalb fehlt er in den Theme-Einstellungen, anders als in älteren Videos. Du öffnest ihn laut Shopify-Hilfe zum Checkout-Design unter Einstellungen > Checkout, Abschnitt „Konfigurationen“, über „Bearbeiten“. Dort stellst du in jedem Tarif ein:

• Logo mit Breite und Ausrichtung, Farben und Schriften
• Einseitigen oder dreiseitigen Checkout
• Adress-Autovervollständigung, Rabattcode-Feld auf dem Handy, App-Blöcke

Tiefere Eingriffe in die Schritte Information, Versand und Zahlung sind Shopify Plus vorbehalten, mehrere Checkouts oder eigenen Code gibt es in den normalen Tarifen nicht. Welche Zahlungsarten erscheinen, regelst du unter Einstellungen > Zahlungen, siehe Zahlungsarten in Shopify einrichten. Express-Buttons wie PayPal oder Apple Pay auf der Produktseite schaltest du bei vielen Themes im Produktinformations-Abschnitt als „dynamische Checkout-Buttons“ ein.

Kundenkonten und Login im Header

Ob Kunden sich anmelden können, legst du unter Einstellungen > Kundenkonten fest. In den aktuellen Kundenkonten melden sich Kunden ohne Passwort mit einem sechsstelligen Code per E-Mail an, alternativ über Shop (mit Shop Pay), Google oder Facebook. Im Konto sehen sie ihre Bestellungen und deren Status. Die alten Kundenkonten bezeichnet Shopify als veraltet. Sind die Anmelde-Links aktiv, zeigen die meisten Themes ein Konto-Symbol im Header. Ein Pflicht-Konto vor dem Kauf ist selten sinnvoll: Jede zusätzliche Hürde kostet Bestellungen.

Wann du doch Code brauchst

Für die meisten Einsteiger-Wünsche brauchst du keinen Code. Wenn doch, gilt:

• Erst „Benutzerdefiniertes Liquid“ prüfen: Viele Themes haben einen Abschnitt oder Block, in den du kleine Code-Schnipsel einfügen kannst, ohne Theme-Dateien zu verändern. Was darüber hinaus geht, zeigt Shopify-Code anpassen: Liquid, Custom Code und wann du einen Entwickler brauchst.
• Theme-Dateien nur an der Kopie ändern: Direkte Code-Änderungen werden bei Theme-Updates laut Shopify nur übernommen, wenn sie nicht mit dem Update kollidieren. Dokumentiere jede Änderung.
• Apps statt Code-Schnipsel: Moderne Apps arbeiten über App-Blöcke und App-Einbettungen. Die aktivierst du laut Shopify-Anleitung im Editor über das Symbol „App-Einbettungen“ und musst nichts in den Code kopieren.

Lässt du einen Entwickler oder App-Support an deinen Shop, nutze einen Mitarbeiter- oder Partnerzugang mit nur den Berechtigungen, die wirklich nötig sind, zum Beispiel nur „Themes“. Gib niemals dein eigenes Passwort weiter.

Bevor dein Shop online geht, prüfe das Ergebnis auf dem Handy und mit echten Testbestellungen. Die komplette Liste findest du in Shopify-Shop live schalten. Und für die wichtigste Seite überhaupt lohnt ein eigener Blick: die Produktseite optimieren.

Häufige Fragen

Wie füge ich ein Produkt auf der Shopify-Startseite ein?

Füge im Theme-Editor auf der Startseite den Abschnitt „Ausgewählte Kollektion“ oder „Ausgewähltes Produkt“ hinzu und wähle dort die Kollektion oder das Produkt aus. Das Produkt muss aktiv und im Vertriebskanal Onlineshop veröffentlicht sein. Zeigt der Abschnitt nur Beispielprodukte, hast du noch keine Kollektion ausgewählt. Prüfe auch, wie viele Produkte der Abschnitt anzeigen soll.

Wie bekomme ich mehrere Bilder in einen wechselnden Banner?

Nutze statt „Bildbanner“ den Abschnitt „Slideshow“. Darin fügst du für jedes Bild eine eigene Folie als Block hinzu und kannst Überschrift, Text und Button pro Folie festlegen. Ob die Folien automatisch wechseln, stellst du in den Abschnittseinstellungen ein. Weniger ist hier oft mehr: Viele Besucher sehen nur die erste Folie, deshalb sollte die wichtigste Botschaft vorne stehen.

Kann ich ein Video als Banner auf der Startseite zeigen?

Ja, die meisten aktuellen Shopify-Themes haben einen Video-Abschnitt. Je nach Theme lädst du das Video direkt hoch oder bindest es von YouTube oder Vimeo ein. Achte auf eine kleine Dateigröße und darauf, dass das Video ohne Ton funktioniert. Externe Videoplattformen können Cookies setzen und gehören dann in deinen Cookie-Banner und deine Datenschutzerklärung.

Warum sieht mein Shop im Editor anders aus als im Live-Shop?

Häufige Gründe: Du bearbeitest nicht das veröffentlichte Theme, sondern einen Entwurf. Oder du hast die Änderungen nicht gespeichert. Oder dein Browser zeigt eine zwischengespeicherte Version. Prüfe im Bereich Onlineshop, welches Theme live ist, speichere im Editor und lade den Shop im privaten Fenster neu. Wirken Elemente zu groß, prüfe die Mobil- und Desktop-Einstellungen getrennt.

Kann ich Handy- und Desktop-Ansicht unterschiedlich gestalten?

Nur begrenzt. Der Editor zeigt beide Ansichten, die meisten Einstellungen gelten aber für beide. Manche Abschnitte bieten eigene Handy-Optionen, etwa ein separates Bild oder eine andere Textposition. Fehlen sie, legst du zwei Abschnitte an und blendest je einen per benutzerdefiniertem CSS mit einer Media-Query auf Handy oder Desktop aus. Prüfe jede Änderung in der Mobilansicht.

Sollte ich erst Produkte hochladen oder erst das Design machen?

Erst ein paar Produkte und Kollektionen anlegen, dann das Design. Viele Abschnitte der Startseite zeigen Inhalte aus Kollektionen. Mit echten Produkten und Fotos siehst du sofort, ob Bildformate, Farben und Schriften zusammenpassen. Mit Platzhaltern sieht jedes Layout gut aus und die Überraschung kommt später.

Ist es sicher, einem App-Entwickler Mitarbeiterzugang zu geben?

Ja, wenn du die Rechte begrenzt. Shopify lässt dich beim Zugang einzelne Berechtigungen auswählen. Gib nur das frei, was für das konkrete Problem nötig ist, oft reichen „Themes“ oder „Apps“. Zugriff auf Finanzen, Auszahlungen oder Kundendaten braucht ein Theme-Support normalerweise nicht. Entferne den Zugang wieder, wenn die Arbeit erledigt ist.

Stand: Oktober 2026. Bezeichnungen im Theme-Editor unterscheiden sich je nach Theme und Version. Aktuelle Anleitungen findest du im Shopify Help Center zum Theme-Editor.