To ensure optimal image quality, we recommend:

1. Upload images in a suitable size

   • Use the thumbnail sizes configured in the corresponding folder in Media Manager.

   • Images with 1920x1920px are a good choice because Shopware often generates a 1920px thumbnail.

   • Alternatively, you can use a smaller format and deactivate the larger thumbnails.

   • If needed, add a custom size as an additional thumbnail size.

   • Use the templates from the for your theme.

2. Take performance into account

   • Product images should be neither too small nor unnecessarily large. Choose a size that offers a good balance between image quality and loading time.

   • Product images should be well compressed to keep the file size as small as possible.

3. Recommended image optimization

   • Optimize thumbnails: Go to Media Manager and adjust the thumbnail sizes to match your shop design, removing any unnecessary formats as necessary. This helps to prevent redundant data and ensures that images are loaded in the optimal size and quality.

   • Compress images: Uncompressed images can significantly slow down the loading time of the shop. Use tools like TinyPNG to reduce the file size without any visible loss of quality.

We are not only Theme Developers but also Graphic Artists and Designers. Therefore, we are well aware of the importance of the shop logo for the appearance of your shop. That's why our recommendation is to have your logo created by a professional - at least if you don't have a logo yet.

Of course, you may also create a logo yourself, use an online "logo maker" or purchase a logo from a stock provider. Alternatively, there is also the possibility to instruct a logo to be created by relevant freelancer portals or simply to use our logo template.

Maybe none of the points apply to you, because you simply want to continue using your existing logo or have it adapted or customized for your online shop.

No matter which variant you decide on: Please keep in mind that your logo is and will be THE trademark for your shop. It is therefore an essential part of your visual appearance and a key to the recognizability of your shop.

In the following we will provide you with a few tips helping you with your logo design:

• Don't use too small-areaed or too detailed graphics for your shop logo. These are usually not well suitable for small viewports. Therefore, deposit at least for small logos a less detailed variant.

• In order to avoid interpolation blurring due to browser scaling of pixel graphics, use a logo in a size as suitable as possible - preferably slightly larger than required. Feel free to orientate yourself using our image templates.

• Compress a pixel graphic with a free online tool like TinyPNG when necessary.

• For perfect scalability the best way is to use a vector graphic of your logo.

• Logos in landscape format are a good choice, as they fit into most viewports to save space in the various headers or header layouts.

• Avoid unnecessary empty space surrounding the actual graphic. This greatly facilitates the placing and alignment of the logo.

Detail Level of Logo:

Unnecessary empty space in the graphic:

In diesem Artikel zeigen wir dir, wie du jedes Konfigurationsfeld in der Theme-Konfiguration sehr schnell finden kannst.

Beispiel

Angenommen du möchtest die Hintergrundfarbe der USP-Bar ändern, öffnest die Theme-Konfiguration und denkst dir "Nun, die USP-Bar ist im Header" und durchsuchst den gesamten Tab "Header". Nun findest du dort aber keine Konfiguration für die USP-Bar, also schaust du in den Tab "Footer", weil die USP-Bar ist ja auch im Footer. Aber auch dort findest du keine Konfiguration.

Bevor du nun lange weitersuchst, wechsle in den Tab "Allgemein" und öffne unsere legendäre "Feldsuchmaschine", den ThemeWare® Config Finder.

Der ThemeWare® Config-Finder haben wir bereits vor einigen Jahren entwickelt, weil wir irgendwann mit ThemeWare® hunderte Konfigurationsfelder hatten und selbst gemerkt haben, dass es recht lange dauern kann ein bestimmtes Feld zu finden.

Trage als Suchbegriff einfach ein was du bearbeiten möchtest und dann zeigt der ThemeWare® Config-Finder dir sofort wo du Konfigurationsfelder findest.

Wir tragen einmal "usp" in das Suchfeld ein, denn wir wollen ja die USP-Bar konfigurieren. Dann wollen wir eine Farbe bearbeiten, also geben wir nun "farbe" ein und wir wollen nicht irgendeine Farbe bearbeiten sondern die Hintergrundfarbe, also geben wir zusätzlich "hintergrund" ein.

Im Suchfeld steht nun "usp farbe hintergrund" ("usp hintergrundfarbe" würde natürlich ebenfalls funktionieren). Während der Eingabe der einzelnen Wörter siehst du wie das Suchergebnis immer weiter reduziert wird.

Die Ergebnisse werden gemäß der ThemeWare-Konfiguration (Tabs, Bereiche, Abschnitte, Konfigurationsfeld) strukturiert und gruppiert.

Die Suche nach "usp farbe hintergrund" hat in unserem Fall 2 Konfigurationsfelder gefunden. Die Anzahl der Treffer in dieser Gruppe wird dir als blaue Badge, rechts neben dem Pfad zur Konfiguration angezeigt.

Wir klicken auf den Pfad um die Gruppe zu öffnen und bekommen eine Liste mit passenden Konfigurationsfeldern.

Jetzt siehst du die Konfigurationsfelder "Hintergrundfarbe (Header)" und "Hintergrundfarbe (Footer)". Das erste Feld ist bereits aufgeklappt und zeigt die alle Details an.

Neben der Bezeichnung des Konfigurationsfeldes siehst du ein Icon welches den Feldtyp symbolisiert. In unserem Fall eine Farbpalette, da es sich um Konfigurationsfelder vom Typ "Farbauswahl" handelt.

Zusätzlich zeigt dir der ThemeWare® Config-Finder weitere Informationen wie "Technischer Name", "Pfad zur Einstellung", einem "Beispiel-Wert" und ggf. dem "Hilfe-Text" des Konfigurationsfeldes an.

Der technischer Name ist die eigentlich Theme-Variable für das entsprechende Feld, dies ist relevant für Profis, die mit Variablen arbeiten wollen. Dem "Pfad zur Einstellung" folgst du einfach in der Theme-Konfiguration um das entsprechende Konfigurationsfeld zu finden.

In unserem Beispiel findest du die Konfigurationsfelder für die Hintergrundfarbe im Tab "Erweiterungen" => Abschnitt "USP-Bar" => Bereich "Farbkonfiguration".

1. Download the ThemeWare® Utilities.

2. Watch the ThemeWare® Video Tutorial.

3. Read the ThemeWare® Introduction.

4. Save the link to our .

5. Save the link to the .

6. Always pay attention to the help texts in the ThemeWare® configuration.

7. Check the section regularly.

8. Before updates, check the .

9. Update Shopware and your ThemeWare® theme regularly.

10. Deactivate your theme before updating.

We sometimes receive questions on the compatibility of ThemeWare® and extension "XY". This questions are most of the time based on "bad" experiences with extensions (apps or plugins) and custom themes at Shopware 5 days. But since Shopware 5, a lot has happened in this regard with Shopware, extension developers and theme creators.

In fact, according to our experience, there have been and still are extremely few problems with extensions and custom themes. If so, the basic function is extremely rarely restricted, mostly it is just a matter of visual "problems" that can be solved easily.

Nevertheless, based on our experience (since 2017) as market leader in the field of themes, we have placed special emphasis on maximum compatibility with third-party extensions when redeveloping our themes for Shopware 6. This we achieve thanks to our new HC-Architecture®.

This architecture makes ThemeWare® highly compatible with almost all Shopware extensions (apps or plugins) straight from the foundation. In case of an incompatibility, you will be able to solve it yourself in just a few clicks by simply disabling the respective function section and thus setting it to the Shopware standard.

Unfortunately, some developers(often developers of especially small extensions) are quite inflexible as well as partly uncooperative and develop exclusively for Shopware's default theme (although even Shopware itself offers custom themes).

In this article please find useful links and tools that will help you working on and with your shop.

ThemeWare®

• Service Portal

• ThemeWare® Config Finder

• by Friends of Shopware ()

Bevor du mit der Konfiguration deines Themes jetzt richtig durchstartest, möchten wir dir ein paar Tipps zur idealen Vorgehensweise bei der Konfiguration deines Themes geben.

Das ist besonders wichtig wenn du Einsteiger bei Shopware oder Einsteiger bei ThemeWare® bist.

Nachfolgend findest du wichtige Tipps, die wir aus der Erfahrung der letzten 3 Jahre mit tausenden Kunden gewonnen haben und die wir selber berücksichtigen, wenn wir Themes konfigurieren.

Zuerst empfehlen wir dir, direkt mit Live-Daten oder möglichst genauen Demo-Daten zu arbeiten!

Denn die Wahrnehmung eines Designs wird nicht nur davon beeinflusst wie groß die Schrift ist, welche Farbe die Schrift hat oder was für eine Schriftart du nutzt, sondern beispielsweise auch wie lang beispielsweise einzelnen Navigationspunkte sind.

Wenn du das Design richtig schön machen möchtest und einfach schreibst "Menüpunkt 1", "Menüpunkt 2", "Menüpunkt 3", "...", "Menüpunkt 6", dann kann es sein, dass du die Navigation nett konfigurierst, später erstellst du die richtigen Kategorien und plötzlich sieht es nicht mehr ganz so gut aus.