Shopify-Banner: Größen, Produktbilder und Sale-Grafiken

Ein gutes Shopify-Banner misst 1920×1080 Pixel, trägt eine kurze Headline und einen Button und hält beides in der Mitte des Bildes, weil die meisten Themes auf dem Handy die Seiten abschneiden. Kombiniere es mit Produktbildern, die als Quadrate in 2048×2048 auf demselben Hintergrund hochgeladen sind, und der Shop wirkt wie eine Marke statt wie ein Katalog. Der Rest dieser Seite behandelt die Größen, Layouts, die auf jedem Bildschirm bestehen, und Sale-Banner, die trotzdem nach dir aussehen.

Banner- und Bildgrößen bei Shopify

Shopify schreibt dir keine feste Bannergröße vor: Jedes Theme entscheidet, wie hoch der Hero ist und wie er beschnitten wird. Am sichersten arbeitest du mit einer Vorlage in 16:9, denn sie füllt einen Laptop-Bildschirm und lässt genug Höhe, um für ein Handy zuzuschneiden.

Quadratische Produktbilder sind wichtiger, als es scheint. Hat jedes Foto einer Kollektion dieselbe Form, fluchtet das Raster, und das Auge vergleicht Produkte, statt ausgefranste Kanten zu bemerken. 2048 Pixel geben dem Zoom auf einer Produktseite außerdem genug Details, damit sich das Antippen lohnt. Die Größe der Linkvorschau erklärt Open-Graph-Bildgröße.

Ein Hero-Banner, das auf dem Handy besteht

Auf dem Laptop ist der Hero breit und flach. Auf dem Handy wird dasselbe Bild oft fast quadratisch beschnitten, oder das Theme stapelt den Text darunter. So oder so verschwinden die Ränder, und alles Wichtige an den Rändern gleich mit.

1. 1

   Mit 1920×1080 beginnen

   Gestalte die volle Breite und markiere dann eine mittlere Spalte von etwa 1080 Pixeln. Diese Spalte behält ein Handy am wahrscheinlichsten.

2. 2

   Eine Zeile statt drei

   „Die Herbstkollektion ist da.“ schlägt Headline, Unterzeile und Rabattcode, die um Platz kämpfen. Details gehören auf die Kollektionsseite.

3. 3

   Ein Button mit Verb

   Kollektion ansehen, Kerzen shoppen, Neuheiten entdecken. Die meisten Themes setzen den Button für dich, also lass eine ruhige Fläche, wo er sitzen wird.

4. 4

   Den Hintergrund die Marke tragen lassen

   Ein Produktfoto mit unruhigem Raum dahinter konkurriert mit dem Text. Eine einheitliche Farbfläche oder ein Material hinter einem freigestellten Produkt funktioniert in jedem Zuschnitt.

5. 5

   Auf dem eigenen Handy prüfen

   Theme-Vorschauen helfen, doch öffne den Live-Shop auf einem echten Handy, bevor du ihn für fertig erklärst.

Produktbilder, die wie ein Shop aussehen

Kunden beurteilen einen Shop an seinem Raster, lange bevor sie eine Beschreibung lesen. Steht ein Produkt auf weißer Hohlkehle, das nächste auf einer Küchenarbeitsplatte und das dritte auf einem Bettlaken, wirkt der Shop improvisiert, selbst wenn die Produkte hervorragend sind. Wähle einen Hintergrund und eine Art der Beleuchtung und wiederhole sie.

Ein weicher Verlauf hinter einem freigestellten Produkt funktioniert gut, weil er Tiefe gibt, ohne dass du ein echtes Set brauchst. Halte ihn kontrastarm, damit das Produkt das Hellste im Bild bleibt. Weitere Aufbauten findest du unter Hintergründe für Produktfotos.

Sale-Banner für Shopify, die trotzdem nach dir aussehen

Beim Sale verlieren die meisten Shops ihren Look. Der übliche Reflex ist Rot, ein Stern und das Wort SALE in Großbuchstaben, und das sieht aus wie jeder andere Shop am selben Wochenende. Behalte deinen eigenen Hintergrund und deine Schrift und ändere nur die Wörter und vielleicht die Intensität der Farbe.

• Nenne das Angebot in unter sechs Wörtern: „Winter-Sale. 30 % Rabatt.“
• Setze das Enddatum in die Zeile darüber, damit die Dringlichkeit ehrlich ist.
• Nutze auf Hero, E-Mail-Header und Story dieselben Wörter und halte den Text der Story innerhalb der mittleren Safe Zone.
• Nimm das Banner herunter, wenn der Sale endet. Ein veralteter Sale-Hero sagt Besuchern, dass sich niemand um den Shop kümmert.

Für volle Wochenenden haben Social-Media-Posts zum Black Friday und Sale-Posts gestalten Layouts und Formulierungen zum Ausleihen.

Ein Look für Shop, E-Mail und Social Media

Hero, Produktraster, E-Mail-Header und Instagram-Post sieht dieselbe Kundin innerhalb weniger Tage. Teilen sie Hintergrund, Überschriftenschrift und eine kleine Palette, erinnert jedes Element an das vorige. Genau das bedeutet Markenkonsistenz in der Praxis für einen Shop.

Hier hilft Gradiently einem kleinen Shop. Gestalte den Hero einmal auf einem Mark, einem lebendigen Verlaufshintergrund, mit dem nur du exportieren kannst, sobald du ihn dir gesichert hast, und Pro formatiert ihn in einem Schritt auf Story, E-Mail-Header und Linkvorschau um. Die Massenerstellung, ebenfalls in Pro, füllt eine Produktkarten-Vorlage aus einer Tabelle mit Namen und Preisen, sodass die Grafiken einer neuen Kollektion einheitlich herauskommen. Ein Look, jede Größe zeigt den Ablauf.