Zum Hauptinhalt springen

Charming Theme

DE
Custom Shopify homepage with hero tiles on desktop and mobile

Jonas führt KANTE, eine Direct-to-Consumer-Marke für Männerpflege aus Berlin. Sein Shopify-Shop hatte gute Produkte, faire Preise und ein Premium-Theme. Trotzdem landeten die meisten Besucher auf der Startseite, sahen ein großes Banner und gingen wieder. „Unsere Startseite sieht aus wie eine Vorlage“, schrieb er uns. „Ich will, dass sie so verkauft wie unsere besten Instagram-Ads.“

Das ist die Geschichte, wie wir diese Startseite mit drei individuellen Shopify Sections zum besten Verkäufer des Shops gemacht haben, ohne neues Theme und ohne eine einzige neue App.

Zu dieser Geschichte: KANTE ist eine fiktive Marke. Das Projekt fasst echte Shopify-Arbeit zusammen, die wir umgesetzt haben; Namen, Produkte und Details wurden geändert. Die Sections, Probleme und Lösungen sind echt.

Individuelle Shopify-Startseite mit Hero-Kacheln auf Desktop und Smartphone
Die neue KANTE-Startseite auf Desktop und Smartphone. (Illustration.)
KundeKANTE, Männerpflege, Berlin (fiktiv)
ShopShopify, deutscher Shop, Premium-Theme mit Online Store 2.0
GeliefertHero-Kacheln, Spotlight-Karussell mit Warenkorb-Button, Feature-Slider
Neue AppsKeine
Bearbeitbar vonDem KANTE-Team, im Theme-Editor
Solche Sections für deinen Shopify-Shop?

Sag uns, was du brauchst. Du bekommst einen Festpreis, einen Vorschaulink vor dem Launch und Code, der dir gehört.

Festpreis anfragenKostenlos und unverbindlich. Antwort meist innerhalb eines Werktags.

Das Problem: eine Startseite, die zeigt, aber nicht verkauft

Die alte Startseite hatte eine Slideshow und ein Produktraster. Ordentlich, aber ohne Grund weiterzuklicken: keine klare Kampagne, keine Abkürzung zu den Sets und keine Erklärung, warum ein KANTE-Trimmer seinen Preis wert ist. Deutsche Käufer vergleichen genau, bevor sie kaufen; dieses fehlende „Warum“ kostete Umsatz.

Section 1: Hero-Kacheln, die jedem Besucher einen Weg zeigen

Shopify-Section mit Hero-Kacheln: große Kampagnenkachel und zwei Link-Kacheln
Eine große Kampagnenkachel plus zwei Abkürzungen zu Sets und Bestsellern. (Illustration.)

Statt eines Banners gibt es jetzt eine große Kampagnenkachel mit Badge, starker Überschrift und Button, dazu gestapelte Kacheln, die direkt zu Sets und Bestsellern führen. Wer sich nicht für die Kampagne interessiert, ist trotzdem nur einen Klick von den meistverkauften Produkten entfernt.

Alles wird im Theme-Editor eingestellt: Kachelbreiten, getrennte Höhen für Desktop und Smartphone, Textposition, Overlay-Stärke und Farben. Die Section kommt ohne JavaScript aus, damit der wichtigste Teil der Seite sofort lädt.

Section 2: ein Spotlight-Karussell, das erklärt und verkauft

Shopify Spotlight-Karussell mit zentriertem Slide und Produktleiste mit Warenkorb-Button
Jeder Slide erklärt eine Funktion und hat seinen eigenen Warenkorb-Button. (Illustration.)

Das Spotlight-Karussell zeigt pro Slide einen technischen Vorteil (Motor, Hautkomfort, Wasserdichtigkeit) mit Produktleiste und Warenkorb-Button direkt auf dem Slide. Der aktive Slide ist zentriert, die Nachbarn schauen seitlich herein; auf dem Smartphone lädt das zum Wischen ein.

Es unterstützt Wischen, Ziehen, Pfeiltasten, Autoplay und Endlosschleife und öffnet den Warenkorb-Drawer des Themes. Der Kauf fühlt sich also genauso an wie auf einer Produktseite.

Shopify Theme-Editor mit Einstellungen für den Slide-Abstand
Slide-Abstand, Breite und Autoplay sind ganz normale Einstellungen im Theme-Editor. (Illustration.)

Der Fehler, den jedes Premium-Theme verursachen kann

Nach der ersten Installation war die Überschrift des Karussells im Live-Shop unsichtbar. Das Theme malt Section-Hintergründe mit einer positionierten Ebene, die unseren Inhalt verdeckte, und Shopify lieferte noch ein altes, zwischengespeichertes Stylesheet aus. Wir haben den Inhalt über die Ebene gehoben, das kritische CSS inline ausgegeben und jeder Einstellung einen sicheren Standardwert gegeben. Solche Details zeigen sich nur in einem echten Shop; deshalb testen wir immer auf einer Kopie deines Live-Themes.

Liquid-Code und Schema einer individuellen Shopify Section
Sauberes Liquid mit sicheren Standardwerten für jede Einstellung. (Illustration.)

Section 3: ein Feature-Slider für den Daumen

Auf dem Smartphone ersetzt eine wischbare Reihe von Feature-Karten mit Produktlinks einen langen, statischen Textblock. Jede Karte ist ein Block im Editor; das Team ergänzt für jeden Produktlaunch in Sekunden eine neue Karte.

Mobile Ansicht der Hero-Kacheln auf der Shopify-Startseite
Auf dem Smartphone stapeln sich die Kacheln mit eigener Höhe; die Kampagne bleibt ohne Scrollen sichtbar. (Illustration.)

Was KANTE bekommen hat und was gemessen wird

  • Eine Startseite mit klarer Kampagne und Ein-Klick-Wegen zu Sets und Bestsellern
  • In den Warenkorb direkt von der Startseite
  • Drei Sections, die das Team für jede Kampagne wiederverwendet, ohne monatliche Gebühren
  • Sauberer, schneller Code im bestehenden Theme

Conversion-Zahlen von Kunden veröffentlichen wir nicht. Stattdessen legen wir klare Kennzahlen für den Vergleich mit der Vorsaison fest: Klicks auf die Hero-Kacheln, Warenkorb-Events aus der Spotlight-Leiste und den Anteil der Bestellungen mit einem Set.

Lohnt sich eine individuelle Startseite für deinen Shop?

Wenn deine Startseite Traffic bekommt, aber wenige Klicks auf Produkte, sind Custom Sections meist der schnellste Hebel. Du behältst dein Theme, deine Apps und deinen Checkout und bekommst eine Startseite, die zu deinen Kunden passt.

Eine Startseite, die verkauft

Hero-Kacheln, Spotlight-Karussells, Feature-Slider oder die Section, die deinem Theme fehlt. Festpreis, Vorschau vor dem Launch.

Angebot anfragenAntwort meist innerhalb eines Werktags.

Häufige Fragen

Wie lange dauert eine individuelle Startseiten-Section?

Eine einzelne Section dauert meist einige Tage vom freigegebenen Angebot bis zur Vorschau. Ein komplettes Startseiten-Set dauert länger; den genauen Zeitplan bekommst du im Angebot.

Funktioniert das mit meinem Theme?

Ja, mit jedem Online-Store-2.0-Theme. Wir passen uns an Schriften, Buttons und Produktkarten deines Themes an.

Kann ich die Inhalte später selbst ändern?

Ja. Jeder Text, jedes Bild, jedes Produkt, jede Farbe und jeder Abstand ist eine Einstellung im Theme-Editor.

Brauche ich dafür eine App?

Nein. Alles ist in dein Theme eingebaut, also ohne monatliche Gebühren.

Share this article