Zum Inhalt springen

Shop-Design und Conversion

Wie wählen Sie das passende Theme für Ihre Branche?

Ein Theme ist mehr als Farbe: Vom Header bis zur Produktkarte, von den Startseitenabschnitten bis zum mobilen Menü bestimmt es, wie man sich durch einen Shop bewegt. Dieser Leitfaden zeigt, welche Art von Theme zu Ihrer Branche passt und wie Sie die Wahl ausprobieren.

SEPETYA Editör EkibiVeröffentlicht: 8 Min. LesezeitAktualisiert:

In diesem Artikel

Die Theme-Wahl beginnt oft mit der Frage „Welche Farbe gefällt mir?“. Dabei bestimmt das Theme, wie man sich durch Ihren Shop bewegt: wo der Header sitzt, wie prominent die Suche ist, was die Produktkarte zeigt, mit welchen Abschnitten die Startseite beginnt und wie das Menü auf dem Smartphone funktioniert. Farbe und Schrift können Sie später ändern.

In SEPETYA gibt es derzeit vier Themes, und jedes ist strukturell eigenständig: mit eigenem Header, eigenem Einstiegslayout, eigener Produktkarte und eigenen Signaturabschnitten; es ist keine Kopie mit lediglich anderen Farben. In diesem Beitrag zeigen wir, welche Art von Theme zu Ihrer Branche passt, wie Sie die Wahl ausprobieren und was bestehen bleibt, wenn Sie es sich später anders überlegen. Die aktuelle Liste der Themes und ihre Preise finden Sie auf der Theme-Seite; hier sprechen wir nicht von Namen, sondern von Layouts.

Schauen Sie zuerst auf Ihren Katalog und Ihre Kundschaft

Beantworten Sie vor der Branchenfrage drei Fragen:

  • Was suchen Ihre Kundinnen und Kunden? Wer ein bestimmtes Produkt sucht, will Suche und Kategoriemenü; wer Inspiration sucht, will große Bilder und Kollektionen.
  • Wie viele Produkte umfasst der Katalog? Ein Shop mit einigen Hundert verschiedenen Produkten braucht schnelle Navigationswerkzeuge, ein Markenshop mit zwanzig Produkten eine starke Geschichte.
  • Welche Fotos haben Sie? Ein Theme, das große, kinoreife Bilder verlangt, zeigt schlechte Fotos gnadenlos; ein Theme mit kompakten Karten trägt schwächere Fotos besser.

Theme-Typen nach Branche

Die folgende Tabelle fasst die vier Layouts der SEPETYA-Themes zusammen und zeigt, für welche Branchen sie konzipiert sind. Da sich Theme-Namen ändern können, nennen wir hier nicht die Namen, sondern die Layouts.

BranchePassendes LayoutWas bietet dieses Layout?
Bekleidung, Schuhe, AccessoiresModemagazin-LayoutTransparenter Header über dem Bild, bildschirmfüllender Aktions-Slider, große Überschriften, „Look kaufen“-Punkte und rahmenlose Produktkarten im Hochformat.
Shop mit großem Katalog und vielen Kategorien; Wohnen, Elektronik, Sport und HeimtierbedarfKaufhaus-LayoutMenü „Alle Kategorien“, Aktions-Einstieg mit Kategorieliste, Story-Shortcuts, Angebot des Tages und Karten mit stets sichtbarer Schaltfläche „In den Warenkorb“.
Kosmetik, KörperpflegeRuhiges Layout mit runden FormenShortcuts nach Hauttyp, Pflegeroutine mit verlinkten Produkten, Inhaltsstoff-Glossar, Vorher-nachher-Vergleich und freigegebene Bewertungen.
Lebensmittel, Supermarkt, Feinkost, BioprodukteSchnelles Supermarkt-LayoutLeiste mit Lieferinformationen, optionale Abteilungs-Chips, kompakte Aktionskarten, Produktkarten mit Grundpreis und Mengenwähler, Menü unten auf dem Smartphone und schwebende Warenkorbübersicht.

Für Branchen wie Schmuck, Uhren, Spielzeug oder Möbel gibt es derzeit kein eigenes Theme. Für Schmuck und Uhren ist das Modemagazin-Layout (auch für Accessoires konzipiert), für Wohnprodukte, Elektronik und gemischte Kataloge das Kaufhaus-Layout der naheliegendste Ausgangspunkt. Kein Layout ist für Ihre Branche verpflichtend; ein für die Branche konzipiertes Layout enthält aber bereits die Werkzeuge, die die Kundschaft dieser Branche erwartet (Shortcut nach Hauttyp, Grundpreis, Menü „Alle Kategorien“), und erspart Ihnen, Abschnitte von Grund auf hinzuzufügen.

Die Besonderheiten jeder Branche beschreiben wir in eigenen Leitfäden: Bekleidung, Lebensmittel, Kosmetik, Schmuck und Uhren, Elektronik, Wohnen und Möbel sowie Spielzeug und Kinderprodukte. Bei einem großen Katalog beeinflusst auch der Leitfaden zu Kategoriestruktur und Filtern die Wahl des Layouts. Alle Möglichkeiten des Theme-Editors sehen Sie auf der Seite Shop-Design.

Was tun bei gemischtem Katalog?

Wenn Sie in mehreren Branchen verkaufen (zum Beispiel Haushaltswaren, Kleinelektronik und Sportartikel), ist der sicherste Ausgangspunkt das Kaufhaus-Layout mit dem Menü „Alle Kategorien“; Kundinnen und Kunden grenzen über die Kategorie ein, wonach sie suchen. Konzentriert sich Ihr Shop auf eine Produktgruppe und hat eine starke Markengeschichte, funktioniert das branchenspezifische Layout besser.

Haben Sie Inhalte für die besonderen Abschnitte?

Jedes Theme bringt eigene Signaturabschnitte mit, und einige davon erwarten Inhalte von Ihnen: Erklärungen für das Inhaltsstoff-Glossar, Schritte für die Pflegeroutine, echte und unbearbeitete Bilder für den Vorher-nachher-Abschnitt, echte Lieferbedingungen für die Leiste mit Lieferinformationen. Im Theme-Editor können Sie diese Abschnitte ausblenden oder löschen. Die Regel ist einfach: Lassen Sie einen Abschnitt, den Sie nicht füllen können, nicht leer oder halbfertig auf der Startseite stehen. Welcher Abschnitt für den oberen Teil der Startseite passt, erklären wir in unserem Beitrag zum Startseiten-Slider.

Demo-Shop, Bibliothek und Vorschau: So probieren Sie die Wahl aus

  1. Demo-Shop öffnen. In der Theme-Galerie unter Online-Shop › Meine Themes hat jedes Theme einen Demo-Shop mit vollständigen Inhalten. Produkte und Bilder im Demo-Shop sind Beispielinhalte, und im Demo-Shop sind keine Bestellungen möglich. Sehen Sie sich beim Durchklicken an, wie die Abschnitte aussehen, und öffnen Sie ihn auch auf Ihrem Smartphone.
  2. Zur Bibliothek hinzufügen. Fügen Sie das Theme, das Ihnen gefällt, zur Bibliothek hinzu. Themes in der Bibliothek können Sie bearbeiten und in der Vorschau ansehen, ohne sie zu veröffentlichen. Kostenpflichtige Themes werden mit einer einmaligen Lizenz gekauft.
  3. Mit eigenen Produkten in der Vorschau ansehen. Mit „Vorschau“ sehen Sie das Theme mit den Produkten und Seiten Ihres eigenen Shops; Besucher sehen währenddessen weiterhin das veröffentlichte Theme.
  4. Stil und Einstellungen wählen. Jedes Theme hat fertige Farbstile; im Theme-Editor ändern Sie Farben, Schriften und Abschnitte.
  5. Veröffentlichen. Sobald Sie auf „Veröffentlichen“ klicken, erscheint das Theme sofort im Shop. Das bisherige Theme bleibt in der Bibliothek; Sie können jederzeit zurückwechseln.

Was bleibt beim Theme-Wechsel erhalten? Ihre Produkte, Kategorien, Seiten, Menüs und Blogbeiträge sind vom Theme unabhängig; das Theme bestimmt nur, wie sie aussehen. Startseitenabschnitte sowie Farb- und Schrifteinstellungen gehören dagegen zum Theme: Das neue Theme kommt mit einer eigenen fertigen Startseite, und die Einstellungen Ihres alten Themes bleiben in der Bibliothek erhalten.

Drei Stellen, die Sie vor dem Veröffentlichen prüfen sollten

  1. Startseitenabschnitte. Das Theme kommt mit einer eigenen fertigen Startseite. Ordnen Sie die Abschnitte passend zu Ihrer Branche und blenden Sie aus, was Sie nicht brauchen.
  2. Produktkarte. In der Gruppe „Produktkarte“ der Theme-Einstellungen schalten Sie Bildformat (quadratisch, hoch, quer), Kartendarstellung (schlicht, gerahmt, gefüllt, mit Schatten), Bewertung, Marke, zweites Bild, Schnell-in-den-Warenkorb, alten Preis, „Neu“-Badge und Grundpreis einzeln ein und aus. Bei Bekleidung ist das Hochformat sinnvoll, im Supermarkt der Grundpreis. Wenn Sie den alten Preis anzeigen, beachten Sie die Hinweise zum früheren Preis in unserem Beitrag zu ehrlicher Dringlichkeit.
  3. Menü und Footer. Bauen Sie Hauptmenü und Footer-Menü passend zu Ihrer Kategoriestruktur auf; entscheiden Sie, ob im Footer ein Newsletter-Formular und Zahlungssymbole erscheinen.

Nach der Wahl des Layouts passen Sie das Theme an Ihre Marke an. Im Theme-Editor ändern Sie Farben (Hintergrund, Oberfläche, Akzent, Primärfarbe und Textfarben), Google-Schriften, Schriftstärke der Überschriften und Schreibweise; die fertigen Stile jedes Themes sind dafür ein guter Ausgangspunkt. Logo und Website-Symbol (Favicon) laden Sie unter Einstellungen › Allgemein hoch; sie bleiben in allen Themes gleich.

Achten Sie bei der Farbwahl neben der Schönheit auf Lesbarkeit. Die Barrierefreiheitsrichtlinie WCAG verlangt zwischen Text normaler Größe und Hintergrund ein Kontrastverhältnis von mindestens 4,5:1; bei großem Text (18 Punkt bzw. fett ab 14 Punkt) liegt es bei 3:1. Hellgrauer Text auf weißem Hintergrund oder eine helle Überschrift auf einem Foto verfehlt diese Grenze schnell. In Abschnitten mit Text auf Bildern löst ein höherer Abdunklungsgrad das Problem meistens.

Häufige Fehler bei der Auswahl

  • Ein bildlastiges Theme wählen, obwohl die Fotos nicht ausreichen. Verbessern Sie zuerst die Fotos oder wählen Sie ein Layout mit kompakteren Karten.
  • Demo-Inhalte für die eigenen halten. Produkte, Bilder und Texte im Demo-Shop sind Beispiele; sie zeigen, wie das Theme aussieht, nicht den Inhalt Ihres Shops. Sehen Sie sich Ihre eigenen Inhalte in der Vorschau aus der Bibliothek an.
  • Fertige Abschnitte unverändert lassen. Blenden Sie Abschnitte aus, die nicht zu Ihrer Branche passen oder die Sie nicht füllen können.
  • Nicht auf dem Smartphone testen. Ein Layout, das auf dem Desktop schön aussieht, kann auf dem Smartphone unerwartet lang werden.
  • Zu oft das Theme wechseln. Ihre Kundschaft gewöhnt sich an das Layout Ihres Shops; nehmen Sie Änderungen mit klarem Grund vor und messen Sie die Wirkung.

Testen Sie unbedingt das Erlebnis auf dem Smartphone

Ein großer Teil Ihrer Besucher kommt möglicherweise vom Smartphone. Das Supermarkt-Layout zeigt auf dem Smartphone ein Menü unten und eine schwebende Warenkorbübersicht; die anderen Layouts halten den Header schlicht. Öffnen Sie den Demo-Shop und Ihre eigene Vorschau auf Ihrem Smartphone und achten Sie darauf: Wie viele Tipps braucht es bis zum Menü, sind Preis und Bestand auf der Produktkarte sichtbar, lässt sich die Warenkorb-Schaltfläche bequem tippen? Wie die Produktseite auf dem Smartphone funktionieren sollte, erklären wir ausführlich in unserem Leitfaden zur mobilen Produktseite.

Checkliste für die Theme-Wahl

  • Die Größe meines Katalogs und die Art, wie meine Kundschaft sucht (Suche, Stöbern oder Inspiration), sind geklärt.
  • Die Demo-Shops der für meine Branche konzipierten Layouts habe ich auf Smartphone und Computer durchgesehen.
  • Die Qualität meiner Fotos erfüllt die visuellen Ansprüche des gewählten Layouts.
  • Signaturabschnitte des Themes, die ich nicht füllen kann, habe ich ausgeblendet oder gelöscht.
  • Das Theme ist in der Bibliothek und wurde mit meinen eigenen Produkten in der Vorschau angesehen.
  • Farben, Schrift und Logo passen zu meiner Marke; die Texte sind auf Türkisch und bei Bedarf in einer zweiten Sprache fertig.
  • Vor dem Veröffentlichen habe ich Checkout und Produktseite auf einem echten Smartphone getestet.

Wann sollten Sie wechseln?

Wechseln Sie nach der Veröffentlichung eines Themes nicht vorschnell zum nächsten; probieren Sie zuerst die Einstellungen des aktuellen Themes aus. Der Zeitpunkt für einen Wechsel ist gekommen, wenn Sie sehen, dass Kundinnen und Kunden immer wieder an derselben Stelle hängen bleiben: wenn sie das Menü nicht finden, die Suche nicht nutzen können oder auf der Produktkarte die benötigten Informationen fehlen. Sie können die Theme-Einstellungen exportieren (JSON) und sichern und bei neuen Versionen unter Beibehaltung Ihrer Einstellungen und Abschnitte aktualisieren. Für alle ersten Schritte lesen Sie auch unseren Leitfaden Wie man einen Online-Shop aufbaut.

Um Themes in Ihrem eigenen Shop auszuprobieren, starten Sie kostenlos; vor Ihrer Entscheidung können Sie mehrere Themes zur Bibliothek hinzufügen und in der Vorschau ansehen.

  • tema
  • tasarim
  • sektor
  • vitrin
  • kategori

Alle Beiträge

  • Arbeitsweise im Theme-Editor: Entwurf, Vorschau, Veröffentlichung

    Die größte Sorge beim Ändern des Shop-Designs ist, dass Besucher eine halbfertige Seite sehen. Der Theme-Editor arbeitet mit einem Entwurf: Bis Sie veröffentlichen, bleibt der Shop unverändert.

    · SEPETYA Editör Ekibi

  • Ehrliche Dringlichkeit: Versandleiste und echte Bestandshinweise

    Gefälschte Countdowns und erfundene Bestandshinweise bringen kurzfristig vielleicht Bestellungen, kommen aber sowohl werberechtlich als auch für das Kundenvertrauen teuer zu stehen. Dieser Beitrag fasst die einschlägigen Regeln verständlich zusammen und stellt die auf echten Daten beruhenden Dringlichkeitswerkzeuge in SEPETYA vor.

    · SEPETYA Editör Ekibi

  • Checkout-Design: Einstellungen gegen Warenkorbabbrüche

    Im Checkout entscheidet sich, ob aus einem Produkt im Warenkorb eine Bestellung wird. Dieser Leitfaden zeigt, wie Sie überflüssige Felder reduzieren, wie Gastbestellung und Schnellregistrierung funktionieren und wie die Vertragsunterlagen über der Bestellschaltfläche angezeigt werden.

    · SEPETYA Editör Ekibi