In letzter Zeit kam häufiger die Frage, wie man die Größe des Logos im Shopware 5 Responsive Template anpassen kann.

Hierzu muss man wissen, dass das Shopware 5 Template Größen in Prozent und rem angibt, nicht in Pixel ( px ).

Das Logo wird immer ausgehend von der Original Größe dargestellt.

Neues Theme anlegen

Legt zunächst ein eigenes Theme im Shopware Backend an. Achtet darauf, dass Ihr als Abhängigkeit das Responsive Template auswählt. Shopware legt für euch automatisch die nötige Theme Struktur an.

Less Datei erstellen

In Shopware 5 haben wir nun Less Dateien anstatt die üblichen CSS Dateien. Man könnte auch eine eigene CSS Datei anlegen, jedoch folge ich hier der Struktur des neuen Themes, sodass wir hier eine Less Datei anlegen. Shopware 5 sucht automatisch nach der Datei all.less. Diese legen wir an in: themes/frontend/DEINTHEME/frontend/_public/src/less.
Alle nötigen LESS Dateien findet Ihr im Responsive Theme im Ordner: /frontend/_public/src/less.
Um herrauszufinden welche LESS Datei für was zuständig ist, könnt Ihr euch auch dem Shopware Styledocco Generator bedienen.

Um wie oben beschrieben unsere Struktur zu behalten, legen wir ebenfalls die Less Datei header.less im Ordner _modules an.

Hier schreiben wir nun folgenden kleinen Less / CSS Code:

.header-main {

    // Logo
    .logo-main {

        .logo--link {
            .unitize-height(45); // Anpassen der Höhe, Angabe in px
        }

        // Smaller logo for mobile viewports
        .logo--shop {
            .unitize-height(45); // Anpassen der Höhe, Angabe in px
        }

    }
}

@media screen and (min-width: @tabletViewportWidth) { // View für Tablets und Desktops
    .header-main {
        .logo-main {
            .logo--link {
                .unitize-height(50); // 50 auf eure Höhe anpassen
            }
            .logo--shop {
                .unitize-height(50); // 50 auf eure Höhe anpassen
            }
        }
    }
}

Die LESS Class unitize rechnet eure Pixel Angabe automatisch in den korrekten % / rem Wert um. Wie bei CSS ist der erste Wert für top/bottom und der zweite Wert für left/right

Speichert das ganze ab und öffnet eure vorhin angelegte all.less
Shopware 5 ruft diese Datei automatisch auf, aber nicht unsere angelegte header.less. Daher müssen wir diese in unsere all.less einfügen.
Schreibt dazu in eure all.less folgendes:

@import "_modules/header";

Beachtet, dass LESS die Dateien automatisch erkennt und Ihr nicht header.less schreiben müsst. Zu guter letzt müssen wir noch entsprechend unseren Shopware Cache löschen und unsere Seite aktualisieren. Die Höhe und Breite des Logos sollte nun entsprechend größer sein. Achtet wie vorher beschrieben darauf, dass Ihr die Höhe entsprechend der Größe eures Logos anpasst.

LESS

Less holt sich nun die header.less innerhalb des Ordners _modules und Shopware kompiliert diese automatisch zu einer CSS und komprimiert diese.

Shopware Onlinekurs Jetzt kostenlos anmelden.