Der Everything Design Guide für Shopify Stores

Schriftarten, Farben, Aktion! Für künstlerisch Interessierte kann die Gestaltung Ihres Shopify-Shops eine aufregende Herausforderung sein. Aber für Vermarkter und Unternehmer, die sich ein wenig klamm fühlen, wenn sie zwischen Serifen- und Nicht-Serifen-Schriftarten wählen müssen, kann dieser Prozess äußerst entmutigend sein.

Obwohl Shopify über zahlreiche Ressourcen verfügt, die den Einstieg erleichtern – wir sprechen von vorgefertigten Themenvorlagen, professionellen Designern zum Mieten und Marktplätzen voller Apps und Widgets – ist die Entscheidungslähmung ein sehr reales Leiden. Ein typisches Beispiel: Jeder möchte einen Shopify-Shop, der optisch ansprechend, aufmerksamkeitsstark und für Conversions optimiert ist – aber der Weg dorthin ist leichter gesagt als getan.

Wenn es um Designoptionen für Ihren Shopify-Shop geht, sind Ihnen praktisch keine Grenzen gesetzt. Wo fangen Sie also an? Legen Sie die Farbmuster ab – hier ist der ultimative Designleitfaden für Shopify, den Sie schon immer gebraucht haben, von dem Sie aber nicht wussten, dass er existiert, mit allen Tipps und Tricks, die Sie zum Anpassen, Starten und Verkaufen benötigen.

In diesem Artikel:
Shopify-Designs
Produktfotos
Theme-Anpassung
Menüstruktur
Homepage-Kopfzeile
3 Tipps zum Mitnehmen
Brauchen Sie Hilfe?

Shopify-Designs

Der erste Schritt zum Aufbau Ihres Shopify-Shops besteht in der Auswahl eines geeigneten Themas. Betrachten Sie es als das Rückgrat Ihrer Website, das die Benutzererfahrung, die visuelle Ästhetik und die Funktionalitäten Ihres Shops bestimmt.

Der Theme Store von Shopify, der Hunderte von Optionen bietet, macht es Ihnen leicht, Ihre perfekte Übereinstimmung zu finden. Außerdem bieten die meisten von ihnen mehrere Stilvariationen, was bedeutet, dass Sie sie in Bezug auf Farben, Schriftarten und Apps an das Erscheinungsbild Ihrer Marke anpassen können.

Überwältigt fühlen? Verwende die Filter von Shopify, um deine Auswahl einzugrenzen nach:

• Die Größe Ihres Produktkatalogs. Wenn Sie zahlreiche Produkte haben, benötigen Sie möglicherweise Funktionen wie unendliches Scrollen oder ein Rasterlayout.

• Ihre Branche. Modeunternehmen benötigen möglicherweise Themen, die es Käufern ermöglichen, aus mehreren Größen und Farben auszuwählen, während Kunst- und Fotomarken möglicherweise größere Produktbild-Slots benötigen.
• Preis. Obwohl Shopify verschiedene kostenlose Themen anbietet, können komplexere Themen bis zu 180 US-Dollar kosten.

Obwohl Sie Typografie und Farbschemata später anpassen können, ist der Anpassungsprozess einfacher, wenn Sie ein Thema auswählen, das Ihrer Vision für die Website in Bezug auf Gesamtästhetik und Layout entspricht.

Produktfotos

Obwohl wir große Fans von Shopifys robustem Theme-Marktplatz sind, besteht ein Risiko: ein Geschäft zu haben, das genauso aussieht wie das aller anderen, selbst wenn Sie die Anpassung berücksichtigen. Eine schnelle Lösung? Einzigartige Produktfotos.

Um Ihre Marke von Ihren Mitbewerbern abzuheben, ist es wichtig, Produktfotos zu machen, die die Identität und Einstellung Ihres Unternehmens widerspiegeln. Die Fotografie spielt eine große Rolle bei der Festlegung des Stils und Tons Ihrer Marke.

Scheuen Sie sich nicht, etwas Spaß zu haben und seien Sie mit Ihren Produktfotos etwas mutiger:

• Mischen Sie Ihre Produktfotos mit einigen Lifestyle-Fotos , auf denen Ihre Produkte vor Ort mit unterstützenden Requisiten und Modellen fotografiert werden.
• Experimentieren Sie mit verschiedenen Layouts . Anstatt beispielsweise Kleidung immer vor einem weißen Hintergrund zu fotografieren, sollten Sie in Betracht ziehen, ein Flat-Lay zu machen oder Models einzustellen.
• Beschneiden und fotografieren Sie aus interessanten Blickwinkeln und nicht direkt. Dies ist eine großartige Möglichkeit, Ihren Aufnahmen Stil und Flair zu verleihen.

Weitere Tipps zum Aufnehmen beeindruckender Produkt- und Lifestyle-Bilder finden Sie in dieser DIY-Anleitung.

Theme-Anpassung

Nachdem Sie nun Ihr Thema ausgewählt haben und eine ganze Reihe von Produktfotos zur Auswahl haben, kommt der lustige Teil: die Website in etwas zu verwandeln, das einzigartig für Sie ist.

Dank der Bequemlichkeit, die Shopify bietet, erfordert die Anpassung keine Programmierung Ihrerseits. Klicken Sie stattdessen einfach auf Designeinstellungen, und Sie werden eine Reihe von Möglichkeiten finden, den visuellen Stil Ihres Geschäfts anzupassen.

Farben

Im Menü Farben können Sie die Farben für viele Elemente in Ihrem Shop umschalten, einschließlich Text, Schaltflächen und Formularfelder.

Profi-Tipp: Um Ihren Call-to-Action (CTA) hervorzuheben, sollten Sie erwägen, ihn in einer kräftigeren und helleren Farbe zu gestalten, die sich vom Rest Ihrer Seite abhebt.

Typografie

Dieser Abschnitt steuert das visuelle Erscheinungsbild des gesamten Textes in Ihrem Geschäft. Sie können die Schriftart, das Gewicht und die Skalierung für Überschriften im Vergleich zu Fließtext anpassen.

Favicon

Favicons sind die kleinen Symbole – typischerweise ein Logo oder ein einfaches Bild, das mit einem Unternehmen verbunden ist – die auf der Registerkarte Ihres Browsers erscheinen.

• Haben Sie ein passendes Bild? Nach dem Hochladen passt Shopify die Größe automatisch auf 32 x 32 Pixel an.
• Sie haben keine? Shopify bietet unzählige kostenlose Bilder, die Sie verwenden können.

Checkout-Elemente

Ihr Checkout-Prozess ist zweifellos der wichtigste Teil Ihrer E-Commerce-Website. Ohne ein fantastisches Checkout-Erlebnis riskieren Sie, dass Käufer ihren Einkaufswagen mitten im Einkauf verlassen.

Um Ihren Checkout so nahtlos wie möglich zu gestalten, können Sie Folgendes anpassen:

• Die Farben für Akzente, Schaltflächen und Fehler
• Checkout-spezifische Typografie
• Das Hintergrundmuster, die Farbe oder das Bild für die Checkout- und Bestellübersichtsseiten

Menüstruktur

Während die meisten vorgefertigten Themes von Shopify mit diesen Schlüsselelementen geliefert werden, solltest du diese Tipps im Hinterkopf behalten, bevor du deinen Shop startest:

Navigationsleiste

Oben auf jeder Seite befindet sich eine Navigationsleiste, mit der Käufer schnell zwischen den Seiten wechseln können.

Profi-Tipp: Machen Sie es Käufern leicht, das zu finden, was sie brauchen, ohne sie zu überfordern. Um die Hauptnavigationsleiste relativ sauber und einfach zu halten, können Sie Kategorien und Unterkategorien als Dropdown-Optionen hinzufügen, die ausgeblendet werden, wenn Sie nicht mit der Maus darüber fahren.

Ankündigungsleiste

Ein zeitlich begrenzter Sale? Lieferverzögerungen? Neue Ladenöffnungszeiten? Wenn Sie für wichtige Informationen werben müssen, die alle Käufer wissen müssen, ist eine Ankündigungsleiste (auch bekannt als globale Kopfzeile) Ihre Antwort.

Die meisten Shopify-Designs verfügen über Ankündigungsleisten – Sie müssen sie nur anpassen und über den Shopify-Designeditor aktivieren.

Profi-Tipp: Stellen Sie sicher, dass Ihre Ankündigungsleisten genauso stilisiert sind wie Ihre Website (denken Sie an Markenfarben, Schriftarten und CTAs).

Fußzeilen

Fußzeilen sind einer der am meisten unterschätzten Bereiche auf Ihrer Website. Es stimmt zwar, dass nur wenige Käufer ganz durch Ihre Homepage scrollen und die Fußzeile erreichen, aber es ist einer der ersten Orte, an denen sie suchen, wenn sie schnellen Zugriff auf Informationen benötigen.

Um Ihre Fußzeile zu bearbeiten, müssen Sie zur Navigationsseite unter Online Store gehen.

Profi-Tipps:

• Ihre Fußzeile sollte nicht nur eine Wiederholung derselben Informationen in Ihrer Navigationsleiste sein. Fügen Sie stattdessen wichtige Links zu Seiten über Versand, Rückgabe und Umtausch, Website-Datenschutz, Stellenangebote und mehr hinzu.
• Verwenden Sie Social-Media-Symbole als Schaltflächen – dies reduziert die Wortigkeit in Ihrer Fußzeile.
• Ermöglichen Sie Käufern, sich für E-Mail- oder SMS-Updates anzumelden.
• Bieten Sie Kundenservice-Schnelllinks wie Hotlines, „Starten Sie einen Live-Chat“ oder E-Mail-Hilfe.

Homepage-Kopfzeile

Ihr Homepage-Header ist das erste, was Käufer sehen, wenn sie auf Ihrer Website landen. Machen Sie einen hervorragenden ersten Eindruck, und sie werden nach mehr scrollen. Gelingt es ihnen nicht, sie anzuziehen, schließen sie die Registerkarte. Vor diesem Hintergrund sollte Ihr Homepage-Header:

• Geben Sie einen schnellen Überblick darüber, was Ihre Marke ist oder welche Produkte Sie verkaufen
• Werben Sie für eine Verkaufsveranstaltung
• Demonstrieren Sie die Haltung und Identität Ihrer Marke
• Präsentieren Sie Ihre Top-Produkte

Unabhängig davon, ob es sich bei Ihrem Homepage-Header um ein Video, ein Karussell oder ein statisches Bild handelt, sollten Sie darauf abzielen, ihn regelmäßig zu ändern – Sie möchten niemals, dass sich Ihre Website für treue Kunden veraltet oder veraltet anfühlt.

3 Tipps zum Mitnehmen

Das Entwerfen Ihres Shopify-Shops kann viel Spaß machen, aber es kann auch außer Kontrolle geraten, wenn Sie anfangen, mit Schriftarten, Farben und Widgets auf einer im Wesentlichen leeren Leinwand zu experimentieren. Um den Shopify-Designprozess so überschaubar und kopfschmerzfrei wie möglich zu halten, sollten Sie folgende Tipps beachten:

1. Funktion über Form, immer

Sie können eine schöne Website haben, aber wenn sie nicht intuitiv fließt und eine fantastische Customer Journey bietet, werden die Verkäufe stagnieren. Wir empfehlen:

• Konzentrieren Sie sich darauf, was Sie mit Ihrer Website erreichen möchten, bevor Sie mit dem Designprozess beginnen. Auf diese Weise können Sie die benötigten Tools oder Widgets eingrenzen und die Wahllähmung verhindern, die wahrscheinlich beim ersten Besuch des Shopify App Store auftritt.
• Implementieren Sie nützliche Funktionen wie Empfehlungen und robuste Filter , damit Käufer ihre Produktsuche schnell eingrenzen können.
• Priorisierung der Seitengeschwindigkeit. Es ist zwar verlockend, eine Menge pfiffiger Animationen, coole Apps und hochauflösende Bilder hinzuzufügen, aber je mehr Elemente Sie einfügen, desto länger wird die Ladezeit Ihrer Website sein. Studien haben ergeben, dass jede zusätzliche Sekunde, die zum Laden Ihrer Seite benötigt wird, Conversions um bis zu 7 % und Seitenaufrufe um 11 % reduzieren kann. Auf der anderen Seite werden schnellere Websites mit höheren Platzierungen bei Google belohnt.
• Bilder komprimieren. Kostenlose Tools wie compress.io können Ihnen dabei helfen, qualitativ hochwertige Produktbilder gestochen scharf zu halten und gleichzeitig die Dateigröße zu reduzieren.
• Auswählen von Themes im Shopify Theme Store gegenüber denen von Websites von Drittanbietern. Da Themes von Drittanbietern den Bewertungsprozess von Shopify nicht durchlaufen, können einige unerwartete Ergänzungen im Backend haben, die Ihre Ladezeiten verlängern können.

Denken Sie daran: Das Starten Ihres Shopify-Shops ist kein einmaliger Vorgang. Nachdem Sie Ihre Website gestartet haben und beginnen, Verkäufe zu sehen, möchten Sie jede Seite kontinuierlich optimieren, von der Überarbeitung von Header-Bildern über das Umschreiben von SEO-Texten bis hin zum Aktualisieren von Bildern. Vertrauen Sie uns: Obwohl es mühsam ist, hilft es, die Conversions zu steigern, neue Käufer zu gewinnen und das Kundenerlebnis zu verbessern.

Profi-Tipp: Sie sind sich nicht sicher, wie Ihre Website in Bezug auf die Website-Geschwindigkeit abschneidet? Probieren Sie das PageSpeed ​​Insights-Tool von Google aus – geben Sie einfach Ihre URL ein, und Sie erhalten Einblicke und Empfehlungen zur Verbesserung der Website-Geschwindigkeit.

2. Halten Sie Ihre Website einfach

Es ist verlockend, alle Produkte, Bilder und Texte in Ihrem Arsenal zu präsentieren, aber meistens wird das die Kundenerfahrung verstopfen. Sie möchten Ihre Website nicht mit zu vielen Informationen überladen – niemand möchte Produkte in einer digitalen Version eines chaotischen Secondhand-Ladens durchsuchen. Halten Sie es stattdessen einfach, konzentrieren Sie sich auf Ihre Bestseller und reduzieren Sie das Fett, wo immer es möglich ist (ob es sich um Bilder, Texte, Widgets, Seiten oder sogar Produkte selbst handelt).

3. Testen Sie alles

Was wäre, wenn wir Ihnen sagen würden, dass Sie die Conversions steigern könnten, indem Sie einfach diese eine Schaltfläche von blau auf rot ändern? Obwohl Sie Ihre Website mit bestimmten Farben, Bildern und Grafiken gestartet haben, gibt es keine Möglichkeit zu wissen, ob sie gut funktionieren. (Wir würden Ihnen gerne ein Erfolgsrezept geben, aber die Wahrheit ist: Die besten Praktiken hängen von den einzigartigen Kunden, Produkten und Nischen einer Marke ab.)

Hier kommen A/B-Tests ins Spiel – ein Prozess, der entscheidend ist, um festzustellen, was am besten funktioniert. (Für neue Vermarkter finden Sie hier eine Anleitung zu allen Dingen, die mit A/B-Tests zu tun haben.) Anstatt nur aus reinem Instinkt zu handeln, sollten Sie diese Ladendesign-Elemente A/B-testen:

• Farben verschiedener Tasten
• Standorte von CTAs, Widgets und Bildern
• Navigationsleisten
• Design von Social-Media-Symbolen
• Bildstil – z. B. Produkt- vs. Lifestyle-Bild
• Hintergrundbilder oder Texturen

Brauchen Sie Hilfe?

Während die Benutzeroberfläche von Shopify es Vermarktern und Unternehmern leicht macht, ihre Shop-Designs selbst zu gestalten, kann dies zu einem zeitaufwändigen Prozess werden, wenn Sie ein Perfektionist mit einer kristallklaren Vorstellung davon sind, wie Ihr Shop aussehen soll.

Gut, dass es in Ordnung ist, um Hilfe zu bitten! Shopify bietet eine Fülle von Ressourcen und Hunderte von Experten, denen Sie vertrauen können, dass sie sich um Ihren Shop kümmern. Manchmal ist es besser, das Fachwissen eines professionellen Designers zu nutzen, als sich allein durch das Unkraut zu waten.

Was uns betrifft, AdRoll hält Ihnen den Rücken frei, wenn es darum geht, erstklassiges Marketing für Ihren Shopify-Shop bereitzustellen. Wenn Sie bereit sind, Ihre Verkäufe anzukurbeln, sehen Sie sich die AdRoll-Integration für Shopify an.