How To - Add images and icons to extensions
Adding pictures
Technical requirements
Size: 1920x1080 pixels or higher (max. 4000x2250 pixels)
Aspect ratio: 16:9
Format: PNG (recommended) or JPEG
File size: max. 1mb
No transparency: We will replace all transparency with a white background as a fallback
Shape: Full-bleed rectangle Rounded corners, shadows, borders or similar will be added by our applications related to
the use case
Elements
Make sure that the focus of the screenshot is your extension or theme and nothing else.
Don’t use graphical elements that look close or identical to user interface elements such as buttons, notification badges,
checkboxes or similar (outside of the ones included in the screenshot itself).
Don't use promotional elements like "SALE" banners or similar, which imply a ranking or sale status of your extension.
In case you are using text on the “Preview”-image, try to avoid using small texts. Use large headline text instead.
To visualize the views on other devices, create a composition with the desktop view or focus only on the specific device.
Sizing
Try to position the screenshot using the sizing guidelines provided. Stay within the red dashed line. This way they are not
overlapped by slider-arrows or other UI elements. To support the visuals of the screenshot, try using a light version of its
accent colors as the background-color or background-gradient, but make sure it has a good enough contrast and it’s not
too distracting.
Illustrative elements and backgrounds are allowed to extend beyond the red dashed line of the sizing guidelines. However,
you should always try to keep your main elements within these guidelines.
Background and Shape
You should provide your screenshot with a full-bleed, rectangle background. We will fall back to a white background color
for any transparent area.
Don't round corners or add drop shadows to the background of your screenshot. The shape of the screenshot is
automatically defined by Shopware products. You can, however, use shadows and rounded corners within your
screenshot design
Create your screenshots now
To create new screenshots or to adapt your existing ones to the Shopware Store guidelines, try our Icon & Screenshot Template in Figma (Free).
Adding Icons
Technical requirements
Size: 256x256 pixels
Aspect ratio: 1:1
Format: PNG (recommended) or JPEG
No transparency: We will replace all transparency with a white background as a fallback
Shape: Full-bleed square
Rounded corners, shadows, borders or similar will be added by our applications related to the use case
Elements
You should always prefer graphical elements or logos to photos or screenshots in your icon designs.
Don’t use graphical elements that look close or identical to user interface elements such as buttons, notification badges,
checkboxes or similar.
Don't use promotional elements like "SALE" banners or similar, which imply a ranking or sale status of your extension.
To prevent text from becoming unreadable at smaller icon sizes, try to avoid using written elements whenever possible.
Sizing
Try to position elements such as logos using the sizing guidelines provided. To do this, align them to the closest fitting
shape and stay within the red dashed line.
Illustrative elements and backgrounds are allowed to extend beyond the red dashed line of the sizing guidelines. However,
you should always try to keep your main elements within these guidelines.
Background and Shape
You should provide your icon with a full-bleed, square background. We will fallback to a white background color for any
transparent area.
Don't round corners or use different icon shapes such as circles, stars, diamonds, etc. in your icon file. The shape of the
icon is automatically defined by Shopware products.
Don’t add drop shadows to the background of your icon. You can, however, use shadows within your icon design.
Adaptation of existing logos
To adapt your existing brand to the Shopware Store icon guidelines, try the following:
Scale and position elements according to the sizing guidelines
Try to adjust the icon background color to best match your brand
Don't force your logo to fill the entire icon space
Create your icon now
To create a new icon or to adapt an existing one to the Shopware Store guidelines, try our Icon & Screenshot Template in Figma (free)