How To - Bilder und Icons zu Erweiterungen hinzufügen

In diesem Artikel erfährst Du, was Du zu beachten hast, wenn Du Bilder oder Icons in Deine Erweiterung einbauen möchtest.

Hinzufügen von Bildern

Technische Anforderungen

Größe: 1920x1080 Pixel oder größer (max. 4000x2250 pixel)
Seitenverhältnis: 16:9
Format: PNG (empfohlen) oder JPEG
Dateigröße: max. 1 MB
Keine Transparenzen: Wir ersetzen alle Transparenzen durch einen weißen Hintergrund
Form: Full-bleed rectangle

Abgerundete Ecken, Schatten, Border oder ähnliches werden von uns je nach Anwendungsfall hinzugefügt

Elemente

Achte darauf, dass der Schwerpunkt des Screenshots auf Deiner Erweiterung oder Deinem Theme liegt und auf nichts anderem.

Verwende keine grafischen Elemente, die ähnlich oder identisch zu Elementen der Benutzeroberfläche des Shopware Stores sind, wie z. B. Schaltflächen, Benachrichtigungs-Badges, Checkboxen oder ähnliches (abgesehen von denen, die im Screenshot selbst enthalten sind).

Verwende keine Werbeelemente wie "SALE"-Banner oder ähnliches, die ein Ranking oder einen Verkaufsstatus Deiner Erweiterung implizieren.

Falls Du Text auf dem "Vorschau"-Bild verwendest, versuche, kleine Texte zu vermeiden. Verwende stattdessen eine große Überschrift.

Um die Ansichten auf anderen Geräten zu visualisieren, erstelle eine Komposition mit der Desktop-Ansicht oder konzentriere Dich nur auf das jeweilige Gerät.

Größe

Positioniere Deinen Screenshot mithilfe der Größen-Richtlinien. Bleibe dabei immer innerhalb der roten, gestrichelten Linie. So stellst Du sicher, dass diese nicht von Elementen der Benutzeroberfläche verdeckt werden. Um die Optik Deines Screenshots zu unterstützen, verwende eine helle Version der Akzentfarben als Hintergrundfarbe oder -Verlauf. Stelle dabei immer sicher, dass ein guter Kontrast gewährleistet wird und der Hintergrund nicht zu stark ablenkt.

Illustrative Elemente und Hintergründe dürfen über die rote, gestrichelte Linie hinausragen. Stelle jedoch immer sicher, dass die Haupt-Elemente innerhalb der Größen-Richtlinien positioniert sind.

Hintergrund und Form

Du solltest Deinen Screenshot mit einem vollflächigen, rechteckigen Hintergrund versehen. Bei transparenten Bereichen wird auf eine weiße Hintergrundfarbe zurückgegriffen.

Runde keine Ecken ab und füge dem Hintergrund Deines Screenshots keine Schlagschatten hinzu. Die Form des Screenshots wird von Shopware automatisch festgelegt. Du kannst jedoch Schatten und abgerundete Ecken in Deinem Screenshot-Design verwenden.

Erstelle jetzt Deine Screenshots

Um neue Screenshots zu erstellen oder bestehende an die Shopware Store Richtlinien anzupassen, teste unser Icon & Screenshot Template in Figma (Kostenlos).

Hinzufügen von Icons

Technische Anforderungen

Größe: 256x256 Pixel

Seitenverhältnis: 1:1

Format: PNG (empfohlen) oder JPEG keine Transparenzen

Wir ersetzen alle Transparenzen durch einen weißen Hintergrund 

Form: Vollflächiges Quadrat

Abgerundete Ecken, Schatten, Border oder ähnliches werden von uns je nach Anwendungsfall hinzugefügt 

Elemente

Du solltest bei der Gestaltung Deiner Icons immer grafische Elemente oder Logos gegenüber Fotos oder Screenshots bevorzugen. 

Verwende keine grafischen Elemente, die ähnlich oder identisch zu Elementen der Benutzeroberfläche des Shopware Stores sind, wie z. B. Schaltflächen, Benachrichtigungs-Badges, Checkboxen oder ähnliches. 

Verwende keine Werbeelemente wie "SALE"-Banner oder ähnliches, die ein Ranking oder einen Verkaufsstatus deiner Erweiterung implizieren. 

Um zu verhindern, dass der Text bei kleineren Icon-Größen unleserlich wird, versuche, wann immer möglich, schriftliche Elemente zu vermeiden. 

Größe

Positioniere Elemente wie Logos mithilfe der Größen-Richtlinien. Skaliere es zur am besten passenden Box innerhalb der roten, gestrichelten Linie. 

Illustrative Elemente und Hintergründe dürfen über die rote, gestrichelte Linien hinausragen. Stelle jedoch immer sicher, dass die Haupt-Elemente innerhalb der Größen-Richtlinien positioniert sind. 

Hintergrund und Form

Du solltest Dein Icon mit einem vollflächigen, quadratischen Hintergrund versehen. Bei transparenten Bereichen wird auf eine weiße Hintergrundfarbe zurückgegriffen. 

Runde keine Ecken ab und verwenden keine anderen Icon-Formen wie Kreise, Sterne, Rauten usw. in Deiner Icon-Datei. Die Form des Icons wird automatisch von Shopware festgelegt. 

Füge dem Hintergrund Deines Icons keine Schlagschatten hinzu. Du kannst jedoch Schatten in Deinem Icon-Design verwenden. 

Anwendung auf bestehende Logos

Um Deine bestehende Marke an die Shopware Store Richtlinien anzupassen, versuche es wie folgt:

• Skaliere und positioniere die Elemente entsprechend der Größen-Richtlinien
• Versuche die Icon-Hintergrundfarbe passend zu Deiner Marke anzupassen 

• Vermeide, dass Dein Logo den kompletten Icon-Bereich ausfüllt 
   

Erstelle jetzt Dein Icon

Um ein neues Icon zu erstellen oder ein bestehendes an die Shopware Store Richtlinien anzupassen, teste unser Icon & Screenshot Template in Figma (kostenlos).