Tipps für Brooklyn

In diesem Artikel erhältst du einige hilfreiche Tipps und Best Practices, die dir bei der Einrichtung von Brooklyn für deinen Onlineshop helfen.

Tipps für die Navigation

Ein Dropdown-Menü hinzufügen

Um Drop-down-Menüs zu deinem Hauptmenü hinzuzufügen, musst du zuerst Menüs auf deiner Navigationsseite erstellen. Weitere Informationen findest du unter Drop-down-Menüs in deinem Onlineshop einrichten.

Das Hauptmenü in einem Onlineshop. Der Mauszeiger befindet sich über dem Link

Das Hauptmenü wird zu einem Seitenleistenmenü

Wenn Ihr Hauptmenü viel Platz beansprucht, wird das Menü in ein Seitenleistenmenü umgewandelt, das sich öffnet, wenn Sie auf eine Schaltfläche im Header-Abschnitt klicken.

Sie können verhindern, dass sich Ihr Hauptmenü im Seitenleisten Stil ändert, indem Sie die folgenden Schritte ausführen:

  • Füge nicht mehr als vier oder fünf Links zu deinem Hauptmenü hinzu.
  • Verwende eine schmale Schriftart für deine Hauptmenü-Links. Du kannst die Schriftart Akzenttext aus den Typografie-Einstellungen ändern.
  • Erstelle Menüpunkte mit einer begrenzten Anzahl von Zeichen. Du kannst beispielsweise "FAQ" anstelle von "Häufig gestellte Fragen" oder "Kontakt" statt "Kontaktiere uns" verwenden.

Bildtipps

Welche Produktbilder eignen sich am besten für Brooklyn?

  • Da hochauflösende Bilder ansprechend und professionell aussehen, sollten deine Produktbilder mindestens 1024 x 1024 Pixel groß sein. Die quadratische Form eignet sich am besten für deine Produktbilder.

  • Idealerweise sollten deine Bilder einen flachen Farbhintergrund haben. Eine flache Farbe ist eine einfarbige Farbe ohne Schattierung oder Hervorhebung. Alle deine Bilder sollten die gleiche Hintergrundfarbe haben.

  • Um den Rahmen von deinen Produktbildern zu entfernen, lege die Farbe für den Produkthintergrund auf transparent (aus den Farbeinstellungen) fest.

Beste Größe für Slideshow-Bilder

Beide im Brooklyn-Demo-Shop gezeigten Bildfolien haben eine Größe von 1200 x 800 Pixel. Deine Bildfolien sollten nach Möglichkeit alle gleich groß sein.

Abgeschnittene Bilder auf kleinen Bildschirmen oder Displays

Auf kleinen Geräten füllen Bildfolien den Bildschirm vom oberen Rand bis zum unteren Rand aus. Die Größe der Folien wird so geändert, dass ihre Höhe der Höhe des Gerätebildschirms entspricht. Um den Bildschirm zu füllen, ohne die Bilder zu verzerren, werden die Folien links und rechts abgeschnitten.

Auf großen Bildschirmen wird die Größe der Bildfolien so geändert, dass ihre Breite der Breite des Browserfensters entspricht. Um das Fenster auszufüllen, ohne die Bilder zu verzerren, werden die Folien unten abgeschnitten.

Das folgende Beispiel zeigt die Desktop- und Mobilversion desselben Onlineshops:

Die Desktop-Version der Slideshow zeigt ein Bild, das breiter als hoch ist. Die mobile Version zeigt dasselbe Bild in der gleichen Höhe, wobei jedoch beide Bildgrößen abgeschnitten sind, damit das Bild auf den schmalen Bildschirm passt.

Ein Bild für Blog-Beiträge festlegen

Das erste Bild in einem Blog-Artikel wird als Feature-Bild für die Blog-Seite verwendet. Unter Verfassen von Blog-Beiträgen erfährst du, wie man ein Bild zu einem Blog-Artikel hinzufügt.

Produkttipps

Angebotshinweise zu Produkten hinzufügen

Du kannst einen Angebotshinweis zu einem Produkt hinzufügen, indem du einen durchgestrichenen Vergleichspreis festlegst, der höher ist als der reguläre Preis. Dieser Hinweis wird für das Produkt über dem Bild auf Kategorieseiten angezeigt.

Lege fest, welche Produkte auf den Kategorieseiten größer angezeigt werden

Wenn du deine Kategorieseiten so einrichtest, dass Produkte im Collage-Stilangezeigt werden, werden einige deiner Produkte mit großen Bildern und einige von ihnen mit kleinen Bildern angezeigt. Die Größe des Bildes basiert auf der Reihenfolge der Produkte in ihrer Kategorie. Du kannst die Reihenfolge der Produkte auf der Kategorieseite im Adminbereich ändern. Klicke auf die Kategorie, die du bearbeiten möchtest, und wähle dann im Bereich Produkte die Option manuell aus dem Dropdown-Menü Sortieren aus. Ziehe anschließend die Produkte in die gewünschte Reihenfolge, in der sie in deinem Onlineshop angezeigt werden sollen.

Bei sechs Produkten werden jeweils das erste und das sechste Bild mit großen Produktbildern dargestellt. So werden beispielsweise Bild 1, 6, 7, 12, 13 und 18 in der Kategorie groß angezeigt:

Eine Kategorieseite, auf der Produkte im Collage-Stil angezeigt werden. Zahlen zeigen die Produkte an, um zu veranschaulichen, wie die Reihenfolge der Produkte mit der Größe des Bildes zusammenhängt.

Um ein Raster von Produktbildern anzuzeigen, die alle dieselbe Größe haben, lege deine Kategorien so fest, dass Produkte stattdessen im Rasterstil angezeigt werden.

Scroll-Animation bei Auswahl einer Variante

Wenn die Produktbeschreibung auf der Produktseite kurz genug ist, um auf den Bildschirm zu passen, ohne dass gescrollt werden muss, wird eine Scroll-Animation angezeigt, wenn du eine Variante auswählst, die ein Bild enthält. Wenn die Beschreibung zu lang ist, um ohne Scrollen auf den Bildschirm zu passen, wird das obere Bild einfach durch das Variantenbild ersetzt und es wird keine Scroll-Animation angezeigt.

Wenn Sie die Scroll-Animation anzeigen möchten, stellen Sie sicher, dass Ihre Produktbeschreibungen kurz sind.

Bereit, mit Shopify zu verkaufen?

Kostenlos ausprobieren