Banner für Kollektionen

Ausgewählte Links

1. Shopify-Dokumentation zu Abschnitten und Blöcken
2. Company XYZ-Dokumentation zum Collection-Banner-Block
3. Company XYZ-Dokumentation zur Verwendung von Video
4. Google Material Icons
5. Company XYZ-Dokumentation zu Icons
6. Company XYZ-Dokumentation zu Banner-Farbeinstellungen
7. Shopify-Dokumentation zum Anpassen von Abschnitten
8. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen

Hilfreiche Videos

Shopify Academy-Video: Ihren Shop anpassen

Shopify Academy-Video: Ihren Shop anpassen

Verwenden Sie diesen Block, um eine Werbebotschaft direkt im Kollektionenraster zu platzieren. Er kombiniert Hintergrundmedien, Overlay-Inhalt, optionale Vordergrundgrafiken und benutzerdefinierte Farben, damit Sie kollektion­spezifische Kampagnen erstellen können, die sich nahtlos in das Produkt-Browsing einfügen.

Für einen umfassenderen Überblick darüber, wie Theme-Blöcke funktionieren, sehen Sie sich Shopify-Dokumentation zu Abschnitten und Blöcken an.

Dieser Block wird nur angezeigt, wenn die Kollektion genügend Produkte hat, damit er in das Raster passt. Ein großes Banner benötigt mindestens 6 Produkte, und ein kleines Banner benötigt mindestens 11 Produkte.

Sie können auch den vom Quelltext bereitgestellten Leitfaden für zusätzliche Details verwenden: Banner für Kollektionen.

Grundeinstellungen

Die zentrale Größeneinstellung steuert, wie viel Platz das Banner im Raster einnimmt. Da nur ein Banner jeder Größe angezeigt wird, wählen Sie die Größe bewusst, wenn Sie mehr als ein Banner in derselben Kollektion verwenden möchten.

Verwenden Sie ein Large-Banner, wenn die Aktion deutlich hervorstechen soll. Verwenden Sie Small, wenn Sie einen dezenten Werbemoment wünschen, der nicht so stark mit den Produktkacheln konkurriert.

Banner-Hintergrund

Diese Gruppe steuert die Medien hinter dem Bannerinhalt. Sie können ein Bild oder Video verwenden, mit separaten mobilen Medien, wenn die Desktop-Version auf kleineren Bildschirmen nicht gut zugeschnitten wird.

Wenn Sie die Felder für mobile Medien leer lassen, werden die Haupt-Hintergrundmedien erneut verwendet. Das ist praktisch für einfache Konfigurationen, aber separate mobile Assets lohnen sich oft, wenn Text oder Brennpunkte enger gerahmt werden müssen.

Anpassung des Hintergrundbilds verändert, wie bildbasierte Hintergründe den verfügbaren Platz ausfüllen. Verwenden Sie einen Full-bleed-Look, wenn das Bild überwiegend atmosphärisch ist, und eine zurückhaltende Anpassung, wenn das gesamte Motiv sichtbar bleiben muss.

Tipp

Wenn das Banner Text über Fotografie oder Video enthält, planen Sie frühzeitig mit ausreichend Kontrast. Unruhige Medien benötigen in der Regel ein stärkeres Overlay oder einfacheren Vordergrundinhalt.

Anleitung zur Videoeinrichtung finden Sie in Company XYZ-Dokumentation zur Verwendung von Video.

Banner-Vordergrund

Diese Gruppe steuert den Inhalt, der über den Hintergrund gelegt wird, einschließlich Ausrichtung, Symbol, Text und dem primären Call-to-Action. Jedes leer gelassene Feld bleibt ausgeblendet, wodurch sich alles von einer minimalen Beschriftung bis zu einer ausführlicheren Werbebotschaft leicht umsetzen lässt.

Horizontale und vertikale Ausrichtung helfen Ihnen dabei, Inhalte um den Brennpunkt der Hintergrundmedien herum zu platzieren. Wenn das Bild bereits ein starkes Motiv hat, platzieren Sie den Text im freien Raum, statt alles standardmäßig zu zentrieren.

Sie können ein Symbol mit einem Emoji oder einem unterstützten Symbolnamen hinzufügen, um einen schnellen visuellen Hinweis zu geben. Das funktioniert gut für saisonale Kampagnen, zeitlich begrenzte Botschaften oder einfache Markenelemente. Vom Quelltext bereitgestellte Symbolhinweise finden Sie hier: Google Material Icons und Company XYZ-Dokumentation zu Symbolen.

Überschrift, Beschriftung und Unterüberschrift funktionieren am besten mit einer klaren Hierarchie. Halten Sie die Überschrift kurz, verwenden Sie die Beschriftung für leichten Kontext und die Unterüberschrift nur dann, wenn der zusätzliche Text Kunden hilft, die Aktion zu verstehen.

Die Schaltflächeneinstellungen steuern das Ziel, den Stil, die Symbolposition und die mobile Breite. Wenn Sie einen Vollblock-Link-Stil wählen, wird das Banner selbst zum primären Klickziel.

Achtung

Ein Vollblock-Link-Stil entfernt Links aus Unterüberschrifttexten. Verwenden Sie ihn, wenn Sie ein klares Ziel für das gesamte Banner möchten.

Banner-Vordergrundmedien

Diese Gruppe fügt optional ein Bild neben dem Vordergrundinhalt hinzu. Sie ist nützlich für Logos, Produktfreisteller, Badges oder unterstützende Grafiken, die über dem Hintergrund liegen sollen, statt ihn zu ersetzen.

Der Bildstil verändert die visuelle Darstellung, während die Breiteneinstellung steuert, wie dominant das Bild im Layout wirkt. Kleinere Breiten eignen sich in der Regel am besten für Logos, während größere Breiten auffällige Kampagnenmotive unterstützen können.

Sie können dem Vordergrundbild auch einen separaten Link hinzufügen. Verwenden Sie dies mit Bedacht, wenn das Banner bereits eine Schaltfläche oder einen Vollblock-Link enthält, damit der Block weiterhin vorhersehbar zu bedienen bleibt.

Banner-Farben

Diese Einstellungen überschreiben die übergreifende Bannergestaltung nur für diesen Block. Sie sind nützlich, wenn eine Kollektionkampagne eine eigene Farbpalette, stärkeren Kontrast oder eine stärker markengerechte Darstellung benötigt als die Standardgestaltung bietet.

Sie können den Banner-Hintergrund, die Rahmenlinie, den Text, das Symbol, die Überschrift, die Unterüberschrift und das Overlay fein abstimmen. Die allgemeine Textfarbe dient als Fallback, wenn keine spezifischeren Textfarben festgelegt sind.

Overlay-Farbe und -Deckkraft sind besonders wichtig, wenn das Hintergrundbild oder -video mit der Botschaft konkurriert. Eine geringere Deckkraft macht Medien sichtbarer, kann aber die Lesbarkeit schnell verringern.

Weitere Informationen zu diesen gemeinsamen Farbsteuerungen finden Sie in der vom Quelltext bereitgestellten Referenz: Company XYZ-Dokumentation zu Banner-Farbeinstellungen.

Standard-Block-Einstellungen

Sichtbarkeitseinstellungen

Diese gemeinsame Gruppe steuert, ob der Block auf dem Desktop, auf dem Mobilgerät oder auf beiden angezeigt wird. Sie ist nützlich, wenn Sie auf kleineren Bildschirmen eine andere Merchandising-Mischung wünschen oder das Raster auf einer Gerätegröße vereinfachen müssen.

Seien Sie vorsichtig, wenn Sie Sichtbarkeitsregeln mit Bannergröße und Produktanzahl-Anforderungen kombinieren, da sich die Kollektion auf verschiedenen Geräten unterschiedlich anfühlen kann, wenn das Banner auf einer Bildschirmgröße ausgeblendet ist. Für ein umfassenderes Editor-Verhalten sehen Sie sich Shopify-Dokumentation zum Anpassen von Abschnitten an. Der vom Quelltext bereitgestellte Leitfaden zur Sichtbarkeit befindet sich hier: Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen.

Nutzungshinweise

1. Kollektionsgröße prüfen. Wenn das Banner nicht angezeigt wird, bestätigen Sie, dass die Kollektion genügend Produkte für die gewählte Bannergröße hat.
2. Aktion klar halten. Verwenden Sie nach Möglichkeit nur ein primäres Ziel, damit das Banner leicht verständlich ist und angeklickt werden kann.
3. Für Kontrast gestalten. Stimmen Sie Medien-, Overlay- und Textfarben so aufeinander ab, dass die Botschaft auf Desktop und Mobilgerät lesbar bleibt.
4. Bei Bedarf mobil-spezifische Medien verwenden. Tauschen Sie separate mobile Assets ein, wenn der Desktop-Zuschnitt auf kleineren Bildschirmen wichtige Inhalte verdeckt.
5. Beide Ansichten prüfen. Desktop- und Mobilsteuerungen können Ausrichtung, Sichtbarkeit und Medienverhalten ändern. Prüfen Sie das Banner daher vor der Veröffentlichung in beiden Größen.
6. Fallback-Styling bewusst verwenden. Lassen Sie Farben und Medien leer, wenn der Block das umliegende Erscheinungsbild übernehmen soll, und setzen Sie explizite Überschreibungen, wenn das Banner eigenständiger wirken soll.