# Shopify-Banner: Größen, Produktbilder und Sale-Grafiken [Canonical HTML page](https://gradiently.design/de/guide/shopify-store-design) Ein Shop wirkt vertrauenswürdig, wenn Banner, Produktraster, Sale-Grafiken und E-Mails aussehen, als kämen sie vom selben Ort. So kommst du dahin, mit den Größen, die Shopify wirklich nutzt. ## The short version - Ein Shopify-Banner, das Hero-Bild oben auf der Startseite, funktioniert gut in 1920×1080 Pixeln. - Produktbilder lädst du bei Shopify am besten als Quadrate in 2048×2048 Pixeln hoch, damit das Raster gleichmäßig und der Zoom scharf bleibt. - Die meisten Shopify-Themes beschneiden den Hero auf Handys anders, deshalb gehören Headlines und Buttons in eine mittlere Spalte von etwa 1080 Pixeln Breite. - Produktfotos wirken wie ein Shop, wenn sie Hintergrund, Lichtrichtung und den Raum um das Produkt teilen. - Sale-Banner, E-Mails und Social Posts sollten Hintergrund und Schrift des Shops übernehmen, damit Kunden den Shop erkennen, bevor sie ein Wort lesen. 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. | Wo es erscheint | Gestaltungsgröße | Verhältnis | | --- | --- | --- | | Hero-Banner auf der Startseite | 1920×1080 px | 16:9 | | Produktbild | 2048×2048 px | 1:1 | | Blog-Banner | 1200×600 px | 2:1 | | E-Mail-Header | 1200×600 px | 2:1 | | Linkvorschau, wenn der Shop geteilt wird | 1200×630 px | 1,91:1 | | Instagram-Feed-Post | 1080×1350 px | 4:5 | | Instagram-Story | 1080×1920 px | 9:16 | Das Grundset für einen kleinen Shop. Gestalte jede Größe bewusst, statt ein Bild auf alle zu strecken. - Hero 16:9: 1920 × 1080 - Produkt 1:1: 2048 × 2048 - Blog-Banner 2:1: 1200 × 600 - Story 9:16: 1080 × 1920 Die vier Formate, in denen ein Shop lebt, maßstabsgetreu. Hero und Story sind Gegensätze, deshalb deckt eine Datei nie beide ab. 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](https://gradiently.design/de/guide/open-graph-image-size). ## 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. **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. **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. **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. **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. **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. Ein breites Shopify-Hero-Banner mit dem Text Die Herbstkollektion ist da, mittig auf einem weichen Verlaufshintergrund Ein Hero mit dem Text in der mittleren Spalte, damit ein Handy-Zuschnitt die ganze Botschaft behält. ## 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. ### Wirkt improvisiert - Ein anderer Hintergrund für jedes Produkt - Licht in einem Foto von links, im nächsten von oben - Produkte füllen manche Bilder, in anderen sind sie winzig - Gemischte Formate: manche hoch, manche quadratisch - Text und Badges ins Foto eingebrannt ### Wirkt wie eine Marke - Eine Hintergrundfarbe oder ein Verlauf für das ganze Sortiment - Licht jedes Mal von derselben Seite - Das Produkt füllt etwa 70 bis 80 Prozent des Bildes - Jedes Bild ein Quadrat in 2048×2048 - Badges kommen vom Theme, die Fotos bleiben sauber 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](https://gradiently.design/de/guide/product-photo-backgrounds). Warmer Studiostein: `radial-gradient(circle at 50% 38%, #f7f3ee 0%, #ece4da 45%, #d9cdbf 100%)` Ein warmes gebrochenes Weiß, das zu den Rändern in Stein übergeht, wie Licht, das sich auf einem Tisch sammelt. Es schmeichelt Keramik, Kerzen, Hautpflege und Textilien. ## 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. Ein breites Sale-Banner für einen Shopify-Shop mit dem Text Winter-Sale 30 % Rabatt, endet am Sonntag Der Sale-Hero behält Hintergrund und Schrift des Shops. Eine Instagram-Story im Hochformat als Version desselben Winter-Sale-Banners, mit passendem Hintergrund und Text Dieselbe Botschaft als Story in 1080×1920, damit der Sale wie eine Kampagne wirkt. - 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](https://gradiently.design/de/guide/social-media-safe-zones). - 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](https://gradiently.design/de/guide/black-friday-post-ideas) und [Sale-Posts gestalten](https://gradiently.design/de/guide/sale-post-design) 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](https://gradiently.design/de/guide/brand-consistency) in der Praxis für einen Shop. - Regalweiß: #f7f3ee - Stein: #d9cdbf - Walnuss: #8a6f5a - Tinte: #2f2a26 - Terrakotta-Akzent: #c8553d Eine ruhige Shop-Palette: zwei Hintergründe, ein Mittelton, eine Tinte für Schrift und ein Akzent, reserviert für Buttons und Sale-Wörter. 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](https://gradiently.design/de/guide/one-look-every-size) zeigt den Ablauf. > **Alt-Text gleich beim Hochladen** Shopify lässt dich zu jedem Produktbild und Banner einen Alt-Text hinzufügen. Beschreibe in einfachen Worten, was auf dem Bild ist. Das hilft Menschen mit Screenreader und gibt Suchmaschinen etwas zum Verstehen. ## FAQ ### Welche Größe sollte ein Shopify-Banner haben? Gestalte den Hero der Startseite in 1920×1080 Pixeln und halte Headline und Button in einer mittleren Spalte von etwa 1080 Pixeln Breite, weil die meisten Themes auf Handys die Seiten abschneiden. ### Was ist die beste Größe für Produktbilder bei Shopify? Ein Quadrat mit 2048×2048 Pixeln. Es hält das Kollektionsraster gleichmäßig und gibt dem Produktzoom genug Details. ### Warum wirkt mein Shopify-Banner auf dem Handy abgeschnitten? Themes passen ein breites Banner in einen schmaleren Handybildschirm ein, indem sie die Seiten abschneiden oder die Höhe ändern. Halte wichtige Wörter und Produkte in der Bildmitte. ### Sollte ich Text auf mein Shopify-Bannerbild setzen? Kurzer Text ist in Ordnung, wenn er mittig sitzt, doch viele Themes lassen dich Headline und Button als Live-Text über das Bild legen, der scharf bleibt und sich leichter ändern lässt. ### Wie wirken meine Produktfotos einheitlich? Nutze einen Hintergrund, Licht von derselben Seite, quadratische Bilder in 2048×2048 und ein Produkt, das in jedem Bild einen ähnlichen Anteil füllt.