Shopware 5 Logo Größe anpassen

In diesem Beitrag möchte ich Dir zeigen, die Du mit ein paar kleinen Änderungen, die Shopware 5 Logo Größe nach Deinen Wünschen anpassen kannst. Shopware ist von Haus aus responsive, also sowohl für Desktop, als auch mobile Endgeräte optimiert. Je nachdem was der Nutzer also für eine Auflösung hat, wird der Shop und damit auch das Logo Deines Shops dynamisch angepasst. Leider bietet Shopware von Haus aus keine Möglichkeit die Größe des Logos im Backend optimal auf Deine Bedürfnisse anzupassen – es wird einfach automatisch skaliert.

Ich zeige Dir anhand meines Gaming Shops kurz was ich damit meine:

Shopware 5 Logo Größe ändern Bild 1

Original inkl. automatischer Skalierung

Das Originale Logo findest Du übrigens hier. Wie Du siehst, wurde es erheblich skaliert (was im Ansatz ja auch gewollt und gut ist, aber eben nur fast).

Shopware 5 Logo Größe ändern Bild 2

Hier siehst Du meine bearbeitete Version

Und um das Ganze dann noch etwas zu verdeutlichen, habe ich beide Bilder mal übereinander gelegt.

Shopware 5 Logo Größe ändern Bild 3

Original und bearbeitete Version übereinander

Wie kann man nun also die Shopware 5 Logo Größe verändern

Dazu schauen wir uns einmal den Quelltext an:

Die Klassen „logo–link“ und „logo–shop“ werden wir jetzt so verändern, dass sich die dargestellte Größe des Logos verändert. Öffne dazu die Datei „header.less“ (sofern Du kein eigenes Theme installiert hast, befindet sich die Datei unter themes/Frontend/Responsive/frontend/_public/less/_modules/header.less

Hier suchst Du nach den oben beschriebenen Klassen und solltest in etwa folgendes finden:

Wenn Du nun den ersten Wert von „.unitize-height“ erhöhst, so verändert sich die errechnete Bildgröße. Mit „.unitize-height“ rechnet LESS (die Programmiersprache, mit der die CSS Dateien später erstellt werden) Deine 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.

Achte auch darauf, dass es in der header.less Datei verschiedene Angaben von „.logo–shop“ und  „logo–link“ gibt, da man mit Hilfe von z.B. „@media screen and (min-width: @tabletLandscapeViewportWidth)“ unterschiedliche Größen für unterschiedliche Auflösungen angeben kann. Hier kannst Du einfach ein wenig ausprobieren, wie sich die Größe Deines Logos ändert, wenn du die Werte manipulierst. Denk bitte immer daran, nach jedem Upload der header.less den Cache zu leeren und das Theme neu zu komplieren.

Solltest Du Fragen haben, schreib es einfach in die Kommentare.

/Martin

PS: Wenn Du mehr über das Thema Gaming Motherboards erfahren möchtest, dann empfehle ich Dir mein neuestes Projekt, wo ich Dir zeige worauf es beim Kauf eines Gaming Motherboards ankommt.

3 Comments

  1. Hallo,

    ich habe auch das Problem dass ich das Logo nicht verändern kann
    nur habe ich das Shopster Template und der Eintrag den Du schilderst ist dort im Plugin nicht vorhanden
    Vielleicht kannst Du mir ja helfen

    Reply
  2. Hallo Thomas,

    schick mir bitte den Link deiner Seite, damit ich mal einen Blick drauf werfen kann. Im Grunde genommen funktioniert das aber immer nach dem gleichen Prinzip – ein Template erbt immer vom Standard-Template und ändert den Inhalt dann entsprechend. Du müsstest also Ausschau halten nach der Klasse „logo–shop“ in den CSS Dateien deines Templates. So kann man sich dann rantasten.

    Einfacher gehts aber wie gesagt wenn ich direkt auf die Seite schaue, dann kann ich dir die Klasse sagen, die die Größe des Logos steuert.

    Reply
  3. Hey,
    Ich habe genau das gleiche Problem und suche schon den ganzen Tag aber leider finde ich deinen beschriebenen Pfad auch nicht 🙁

    Reply

Leave a Comment.