Worauf Sie bei einem Shopify-Theme achten sollten: Checkliste der wichtigsten Funktionen

Überblick

Die Wahl eines Themes bestimmt maßgeblich Benutzerfreundlichkeit, Performance und SEO. Das richtige Theme bietet Ihnen Steuerungsmöglichkeiten, die Layoutverschiebungen verhindern, die Navigation auf Smartphones vereinfachen und die benötigten SEO-Einstellungen zugänglich machen. Dieser Leitfaden führt Sie durch die wichtigsten Einstellungen, damit Sie eine Theme-Demo vor dem Kauf oder Wechsel bedenkenlos testen können.

Sie lernen, wie Sie die Einstellungen für das Bildseitenverhältnis, das Ein- und Ausblenden auf Mobilgeräten, Lazy-Loading-Optionen, das Verhalten des fixierten Headers, die flexible Navigation auf Desktop- und Mobilgeräten, die Steuerung einzelner H1-Überschriften und die Unterstützung von hreflang überprüfen. Jeder Abschnitt enthält einen Kurztest, den Sie im Theme-Editor oder in der Demo-Vorschau durchführen können.

Inhalt

Voraussetzungen – Nischenpassung und Unterstützung bestätigen

Stellen Sie zunächst sicher, dass das Theme zu Ihrer Nische passt und dass der Entwickler zeitnahe Updates und Support bereitstellt. Dadurch reduzieren Sie Nacharbeiten und vermeiden, an Fehlern hängenzubleiben.

  1. Öffnen Sie die Produktseite des Themes und prüfen Sie das Datum der letzten Aktualisierung, das Änderungsprotokoll und die Kompatibilität mit der aktuellen Shopify-Version.
  2. Durchsuchen Sie die Supportdokumente und suchen Sie nach einer klaren Kontaktmöglichkeit. Wählen Sie Anbieter, die bekannte Probleme und deren Lösungen dokumentieren.
  3. Vergleichen Sie die Demo mit Ihrem Katalog: Anzahl der Kollektionen, Bildstile und Anforderungen an die Warenpräsentation.

So testen Sie eine Theme-Demo sicher

Viele dieser Funktionen können Sie in einer Theme-Demo vor dem Kauf testen.

Im Shopify Theme Store können Sie jedes Theme kostenlos im Testmodus installieren. Dadurch haben Sie Zugriff auf alle Funktionen des Themes, außer auf die Quellcode-Einsichtnahme.

Sie können Ihr Theme praktisch vollständig einrichten, bevor Sie dafür bezahlen und es veröffentlichen.

Ziel ist es, ohne Codebearbeitung zu prüfen, ob die Steuerelemente vorhanden sind und sich vorhersagbar verhalten.

  • Nutzen Sie die Demo-Vorschau des Designs, um gängige Vorlagen wie Startseite, Kollektionsseiten und Produktseiten zu öffnen.
  • Suchen Sie nach Abschnittseinstellungen, die der Checkliste in diesem Leitfaden entsprechen. Machen Sie dabei Screenshots.
  • Beurteilen Sie nicht nur anhand der Animationen. Achten Sie vorrangig auf Klarheit, Abstände und Lesekomfort.
  • Erstellen Sie eine kurze Liste mit Dingen, die unbedingt notwendig sind und solchen, die wünschenswert wären, damit Ihre Entscheidungen praxisnah bleiben.

Schritt 1 – Überprüfen Sie „Überall Abschnitte“ und „App-Sperren“ (OS 2.0)

Alle Themes im Shopify Theme Store sind mit Online Store 2.0 kompatibel. OS 2.0 ermöglicht die Verwendung von Abschnitten in verschiedenen Templates und das Einfügen von App-Blöcken ohne Programmierung. Dies bietet Ihnen flexible Layouts bei gleichzeitig vorhersehbarer Performance.

Wenn Sie ein Drittanbieter-Theme außerhalb des Theme Stores testen, vergewissern Sie sich, dass es OS 2.0-kompatibel ist.

  1. Öffnen Sie eine Vorlage, die nicht die Startseite betrifft (z. B. Sammlungen, Seiten), und vergewissern Sie sich, dass Abschnitte hinzugefügt, entfernt und neu angeordnet werden können.
  2. Fügen Sie einen App-Block hinzu (falls Sie Apps verwenden) und prüfen Sie, ob dieser nach dem Laden ohne Inhaltsverschiebung gerendert wird.
  3. Entfernen Sie die App-Sperre und überprüfen Sie, ob das Layout stabil und schnell bleibt.

Schritt 2 – Bildseitenverhältnisse bestätigen

Die Steuerung des Seitenverhältnisses sorgt für eine einheitliche Produktdarstellung und verhindert Layoutverschiebungen beim Laden von Bildern. Designs, die die Auswahl eines quadratischen oder Hochformat-Seitenverhältnisses ermöglichen, verleihen Ihrem Katalog ein durchdachtes Erscheinungsbild und tragen zu schnellen Ladezeiten bei.

  1. Öffnen Sie den Online-Shop, dann „Designs“ und anschließend „Anpassen“. Wählen Sie eine Kollektionsvorlage aus.
  2. Wählen Sie den Produktrasterbereich aus. Suchen Sie nach einer Einstellung wie Bildverhältnis, Bild zuschneiden oder Kartenverhältnis.
  3. Wechseln Sie zwischen den Formaten Quadrat, Hochformat, Querformat und den Einstellungen „Anpassen“, „Automatisch“ und „Natürlich“. Stellen Sie sicher, dass das Raster ausgerichtet bleibt und keine Inhalte verrutschen.
  4. Untersuchen Sie ein Produktbildelement und prüfen Sie, ob es responsive Attribute wie srcset und sizes verwendet.

Warum Seitenverhältnisse wichtig sind

Durch die Reservierung von Platz für Medien wird die kumulative Layoutverschiebung reduziert – ein wichtiger Faktor für die wahrgenommene Qualität. Die Shopify-Richtlinien zu Bildern und Medien betonen die Verwendung geeigneter Größen und responsives Laden, um stabile und scharfe Seiten zu gewährleisten.

  • Verwenden Sie ein einheitliches Seitenverhältnis für die Rasterelemente, um Zeilen mit ungleichmäßigen Höhen zu vermeiden.
  • Legen Sie in Abschnitten ein definiertes Seitenverhältnis fest, sofern das Theme dies unterstützt.
  • Laden Sie Quellbilder in der richtigen Größe hoch, damit das Theme gestochen scharfe Grafiken ohne unnötigen Ballast darstellen kann.

Schritt 3 – Lazy Loading-Optionen bestätigen

Lazy Loading verzögert das Laden von Bildern und Videos, bis diese sich in der Nähe des sichtbaren Bereichs befinden. Dadurch werden die anfänglichen Netzwerkkosten reduziert und das erste Rendern beschleunigt. Themes bieten oft eine entsprechende Option oder implementieren Lazy Loading automatisch für Medien unterhalb der Falz.

  1. Öffnen Sie eine lange Homepage- oder Sammlungsvorlage mit mehreren Medienbereichen.
  2. Scrollen Sie langsam und beobachten Sie den Netzwerk-Tab. Die Medien unterhalb des sichtbaren Bereichs sollten erst geladen werden, wenn Sie sich nähern.
  3. Stellen Sie sicher, dass das Hero-Bild und der primäre Inhalt nicht verzögert geladen werden, da dies die Anzeige des größten inhaltsreichen Bildes verlangsamen kann.
  4. Aktivieren Sie, falls verfügbar, die Lazy-Load-Einstellung für Abschnitte und stellen Sie sicher, dass diese nur für nicht kritische Medien gilt.

Anmerkung: Shopify bietet Anleitungen zum verzögerten Laden für Partner und Theme-Entwickler. Selbst wenn Ihr Theme keine entsprechende Option bietet, lädt es Bilder möglicherweise bereits im Hintergrund mithilfe moderner Attribute verzögert.

Schritt 4 – Einstellungen für die fixierte Kopfzeile bestätigen

Fixierte Header sorgen dafür, dass Navigation und Suche stets griffbereit sind. Besonders auf Mobilgeräten, wo häufig gescrollt wird, sind sie hilfreich. Schlecht konfigurierte fixierte Header können Inhalte überlappen oder den Fokus fälschlicherweise blockieren. Testen Sie daher dieses Verhalten.

  1. Aktivieren Sie in den Header-Einstellungen die Option „Fixierter Header“. Falls verfügbar, legen Sie separate Optionen für Desktop und Mobilgeräte fest.
  2. Scrollen Sie eine lange Seite. Stellen Sie sicher, dass die Kopfzeile beim Springen zu Ankerpunkten den Inhalt nicht verdeckt und dass das Schließen-Symbol sichtbar bleibt, wenn ein Navigationsmenü geöffnet ist.
  3. Öffnen Sie das mobile Menü. Die Hintergrundseite sollte nicht scrollen und der Tastaturfokus sollte innerhalb des Menüs bleiben, bis Sie es schließen.
  4. Stellen Sie sicher, dass die Tippziele für Symbole und Links eine angenehme Größe haben, idealerweise 40px oder größer.

Tipp - Wenn der Header häufig Inhalte verdeckt, verwenden Sie auf Mobilgeräten eine kleinere, fixierte Variante oder deaktivieren Sie die Fixierung auf kleinen Bildschirmen gegebenenfalls.

Schritt 5 – Desktop- und Mobilnavigation prüfen

Die Navigation sollte flexibel genug sein, um sich an die Größe Ihres Katalogs und Ihre Zielgruppe anzupassen. Achten Sie auf übersichtliche Ausrichtungsoptionen, Unterstützung für Mega-Menüs und eine mobile Navigationsleiste, die sich bequem mit einem Daumen bedienen lässt.

  1. Öffnen Sie die Abschnitte „Kopfzeile“ und „Navigation“. Suchen Sie nach Optionen zum Festlegen des Hauptmenüs, der Ausrichtung und der Logoposition.
  2. Prüfen Sie bei großen Katalogen, ob mehrspaltige Menüoptionen oder Mega-Menüs verfügbar sind. Achten Sie auf eine flache Menüstruktur auf Mobilgeräten.
  3. Stellen Sie sicher, dass die Suchleiste gut sichtbar platziert ist. Die Suche sollte mit einem einzigen Tippen vom Header aus erreichbar sein.
  4. Überprüfen Sie die Vorschau auf einem kleinen Bildschirm und stellen Sie sicher, dass die Links so angeordnet sind, dass Sie sie ohne Fehlklicks antippen können.

Tipp: Platzieren Sie Shopping-Links wie „Shop“, „Kollektionen“, „Bestseller“ und „Sale“ an erster Stelle. Verschieben Sie „Über uns“ und „Blog“ weiter unten im Menü.

Schritt 6 – Überprüfung der einzelnen H1-Steuerung

Suchmaschinen und assistive Technologien benötigen eine klare Überschriftenhierarchie. Jede Vorlage sollte genau eine H1-Überschrift enthalten. Designs, die die Auswahl der Überschriftenebenen in Abschnitten ermöglichen, erleichtern die Vermeidung von Duplikaten.

  1. Öffnen Sie im Editor eine Produkt-, Kollektions- und Seitenvorlage. Ermitteln Sie, welches Element als H1 dargestellt wird.
  2. Prüfen Sie, ob Abschnitte und Blöcke eine Überschriftenebene haben. Ändern Sie dekorative Überschriften in H2 oder H3, wobei die visuelle Klasse beibehalten werden soll.
  3. Überprüfen Sie mithilfe der Entwicklertools Ihres Browsers, ob auf jedem Seitentyp nur eine H1-Überschrift vorhanden ist und ob die anderen Überschriften korrekt kaskadiert werden.

Anmerkung: Die Shopify-Theme-Anforderungen legen Wert auf gültiges HTML, semantische Überschriften und Barrierefreiheit. Korrekte Überschriftenebenen helfen sowohl Nutzern als auch Suchmaschinen-Crawlern, die Seitenstruktur zu verstehen.

Vorsicht – die Rich-Text-Editoren im Theme-Editor von Shopify ermöglichen es, Inhalte als h1 festzulegen, wodurch es leicht passieren kann, dass versehentlich mehrere h1-Überschriften auf einer Seite hinzugefügt werden.

Schritt 7 – Mega-Menü und Sammlungen innerhalb der Navigation validieren

Große Kataloge benötigen übersichtliche, mehrspaltige Menüs und visuelle Gruppierungen. Ihr Mega-Menü sollte sich auf Smartphones optimal anpassen.

  1. Aktivieren Sie in den Header-Einstellungen ein Mega-Menü oder ein mehrspaltiges Menü. Fügen Sie Beispiel-Linkgruppen und, falls unterstützt, kleine Bilder hinzu.
  2. Öffnen Sie die Ansicht auf einem Smartphone und prüfen Sie, ob die Spalten in eine gut lesbare Schublade zusammengeklappt werden können, ohne den Bildschirm zu überladen.
  3. Prüfen Sie, ob die Sammlungslinks mit zwei Klicks auffindbar sind und ob das Scrollen den Menüstatus nicht zurücksetzt.

Schritt 8 – Medienfunktionen des Produkts

Bessere Produktmedien schaffen Vertrauen. Prüfen Sie, ob das Theme die benötigten Medientypen und Galerie-Muster unterstützt.

  1. Fügen Sie einem Produkt Bild-, Video- und 3D-Modellbeispiele hinzu. Überprüfen Sie das Zoom- bzw. Lightbox-Verhalten und das Layout der Galerieminiaturen.
  2. Wechseln Sie die Varianten und stellen Sie sicher, dass für jede Option die korrekten Medien angezeigt werden. Ordnen Sie Farbmuster, sofern verfügbar, Bildern zu.
  3. Prüfen Sie, ob die Medien responsiv geladen werden und keine Layoutverschiebungen verursachen.

Schritt 9 – UX-Muster für den Warenkorb (Drawer vs. Seite)

Im Warenkorb entscheiden viele Kunden, ob sie fortfahren oder den Kauf abbrechen. Testen Sie, wie sich das Warenkorb-Design des Themes verhält und welche Funktionen es unterstützt.

  1. Aktivieren Sie den Warenkorb, falls verfügbar. Fügen Sie ein Produkt hinzu und öffnen Sie den Warenkorb. Stellen Sie sicher, dass der Tastaturfokus im Warenkorb fixiert ist und der Hintergrund nicht scrollt.
  2. Prüfen Sie, ob alle integrierten Upselling-/Cross-Selling-Blöcke, Fortschrittsbalken für kostenlosen Versand und Rabatteingabefelder funktionieren und eindeutig sind.
  3. Probieren Sie sowohl den Drawer- als auch den dedizierten Warenkorb-Seitenmodus aus, um zu sehen, welcher am besten zu Ihrem Shop und Ihrer App-Architektur passt.

Schritt 10 – Übersetzungen, RTL und Währung

Internationale Online-Shops benötigen gute Übersetzungen, gegebenenfalls Unterstützung für die Rechts-nach-links-Schreibweise und eine korrekte Währungsformatierung über Markets.

  1. Aktivieren Sie eine zusätzliche Sprache und zeigen Sie eine Vorschau der Zeichenketten in den Kernvorlagen an. Stellen Sie sicher, dass die Texterweiterung die Layouts nicht beeinträchtigt.
  2. Wenn Sie RTL-Sprachen anbieten, überprüfen Sie die Layoutspiegelung, die Symbolrichtung und die Ausrichtung von Schublade/Menü.
  3. Wechseln Sie in der Menüleiste die Länder und überprüfen Sie, ob Preisformate, Währungscodes und Trennzeichen korrekt angezeigt werden.

Schritt 11 – Schnellprüfung der Barrierefreiheit (WCAG 2.1 AA)

Barrierefreiheit verbessert die Benutzerfreundlichkeit für alle und reduziert Risiken. Ein kurzer Test deckt häufige Probleme vor der Markteinführung auf.

  1. Die Navigation sollte ausschließlich über die Tastatur erfolgen. Es muss sichergestellt sein, dass sichtbare Fokuszustände und ein Link zum Überspringen von Inhalten vorhanden sind.
  2. Öffnen Sie Menüs und Schubladen und überprüfen Sie, ob die ARIA-Attribute den erweiterten/reduzierten Zustand widerspiegeln und der Fokus korrekt verwaltet wird.
  3. Führen Sie einen automatisierten Scan durch und beheben Sie Probleme mit Farbkontrast und Landmarken. Testen Sie anschließend manuell erneut.
  4. Prüfen Sie bitte, ob Animationen erforderlich sind. Manchmal kann das Aktivieren von Animationen im Design die Barrierefreiheit beeinträchtigen.

Schritt 12 – Leistungsbudgets und Bewegung

Definieren Sie während der Evaluierung Leistungsziele, damit Sie Themen objektiv vergleichen und spätere Regressionen vermeiden können.

  1. Mit Lighthouse können Sie den größten Contentful Paint, die kumulative Layoutverschiebung und die gesamte Blockierungszeit auf wichtigen Vorlagen erfassen.
  2. Stellen Sie sicher, dass die Animationen die Einstellung für reduzierte Bewegungen berücksichtigen und dass aufwändige Effekte pro Abschnitt optional sind.
  3. Deaktivieren Sie große Abschnitte und führen Sie eine erneute Messung durch, um die Basisleistung des Themes ohne zusätzliche Elemente zu ermitteln.

Leistungs- und Zugänglichkeitsprüfungen

Selbst ein gutes Theme kann sich langsam oder frustrierend anfühlen, wenn es schlecht konfiguriert ist. Ein kurzer Testlauf hilft Ihnen, häufige Fehler vor der endgültigen Festlegung zu vermeiden.

  • Führen Sie Lighthouse auf den Seiten „Startseite“, „Kollektion“ und „Produktseiten“ aus. Protokollieren Sie die größte inhaltliche Änderung der Farbdarstellung und des Layouts.
  • Deaktivieren Sie nicht benötigte Abschnitte und testen Sie erneut, um die Auswirkungen auf Geschwindigkeit und Verständlichkeit zu überprüfen.
  • Navigieren Sie mit der Tastatur durch Kopfzeile und Menüleiste. Der Fokus sollte in Modalfenstern sichtbar und auf einen bestimmten Bereich beschränkt sein.
  • Prüfen Sie, ob der Farbkontrast ausreichend ist und der Text auf kleinen Bildschirmen gut skaliert wird.

Kaufcheckliste und Warnsignale

Nutzen Sie diese kurze Checkliste, um eine sichere Entscheidung zu treffen. Je mehr Punkte Sie abhaken können, desto einfacher lässt sich das Design im Laufe der Zeit beibehalten.

  • Kein Online-Shop 2.0
  • Keine Steuerung des Bildverhältnisses für Produktraster oder Bannerbereiche.
  • Keine Möglichkeit, die Geräte-Sichtbarkeit zu ändern, und keine Tendenz, wichtige Inhalte auf Mobilgeräten auszublenden.
  • Alles wird verzögert geladen, einschließlich des Hauptelements, was das Laden der primären Inhalte verzögert.
  • Ein fixierter Header, der den Inhalt überlappt oder den Fokus falsch lenkt.
  • Navigation, die präzise Tippvorgänge oder tiefe Verschachtelungen auf Smartphones erfordert.
  • Abschnitte, die überall H1 erzwingen oder keine Steuerung der Überschriftenebene vorsehen.

Häufig gestellte Fragen

Kann ich das Design später wechseln, ohne Inhalte zu verlieren? Ja. Ihre Produkte, Kollektionen, Seiten und Blogbeiträge bleiben erhalten. Sie müssen wahrscheinlich Abschnitte und Layouts für jede Vorlage neu erstellen. Testen Sie dies zunächst mit einer Kopie des Designs.

Ist Lazy Loading immer von Vorteil? Nein. Laden Sie den Hero-Code oder andere große Inhalte nicht verzögert. Halten Sie wichtige Bilder bereit, um die Ladezeit und die wahrgenommene Geschwindigkeit zu optimieren.

Wie viele Apps sind zu viele? Weniger ist besser. Verwenden Sie App-Blöcke anstelle von benutzerdefinierten Skript-Tags und führen Sie nach jeder Installation eine Überprüfung mit Lighthouse durch.

Stellen Sie wunderschöne Pakete zusammen.

Pakete und Kits auf Shopify

Maximieren Sie Ihren durchschnittlichen Bestellwert mit individuell kombinierbaren Bundles und Kits.

 Im App Store ansehen

+ 7 Tage kostenlose Testversion