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 Dropdown-Menüs zu deinem Hauptmenü hinzuzufügen, musst du zuerst Menüs auf deiner Navigationsseite erstellen. Weitere Informationen findest du unter Dropdown-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 dein Hauptmenü viel Platz beansprucht, wird das Menü in ein Seitenleistenmenü umgewandelt, das sich öffnet, wenn du auf eine Schaltfläche im Header-Abschnitt klickst:

Ein Seitenleistenmenü auf der linken Seite eines Onlineshops. Hauptmenü-Links wie

Mit den folgenden Schritten kannst du verhindern, dass dein Hauptmenü in den Seitenleistenstil wechselt:

  • Füge nicht mehr als vier oder fünf Links zu deinem Hauptmenü hinzu.
  • Verwende eine schmale Schrift für deine Hauptmenü-Links. Du kannst die Schriftart Akzenttext aus den Typografie-Einstellungen auswählen.
  • Erstelle Menüelemente 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. Dabei handelt es sich um eine einfarbige Farbe ohne Schattierung oder Hervorhebung. Alle deine Bilder sollten die gleiche Hintergrundfarbe haben.

  • Um den Rahmen um Ihre Produktbilder zu entfernen, legen Sie die Farbe für den Produkthintergrund in den Farbeinstellungen auf "transparent" fest.

Beste Größe für Slideshow-Bilder

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

Abgeschnittene Bilder auf kleinen Bildschirmen oder Displays

Bei kleinen Geräten füllen Bildfolien den Bildschirm vom oberen Rand bis zum unteren Rand aus. Die Folien werden so skaliert, 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-Einträ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.

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

Wenn du deine Kategorieseiten so konfigurierst, dass Produkte im Collage-Stil angezeigt werden, werden einige deiner Produkte mit großen Bildern und einige mit kleinen Bildern angezeigt. Die Größe des Bildes richtet sich nach 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 ohne Scrollen auf den Bildschirm zu passen, wird eine Scroll-Animation angezeigt, wenn Sie eine Variante auswählen, 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 Varianten Bild ersetzt und es wird keine Scroll-Animation angezeigt.

Wenn du die Scroll-Animation anzeigen möchtest, stelle sicher, dass deine Produktbeschreibungen kurz sind.

Bereit, mit Shopify zu verkaufen?

Kostenlos ausprobieren