Unser Angebot

Mit unserem Logo-Plugin können Sie die Logogröße bequem und einfach im Shopware Backend selbst einstellen.

Logo Plugin im Community Store herunterladen

Ihr eigenes Logo in Shopware 5

Auf dieser Seite haben wir für Sie eine Anleitung erstellt, die zeigt wie Sie Ihr eigenes Logo passend in Shopware 5 einbauen können. Sollten Sie dennoch nicht weiterkommen, helfen wir Ihnen gerne beim Einbau des Logos.

1. Theme erstellen

Erstellen Sie ein eigenes Theme für all Ihre Änderungen

2. Logo einbinden

Binden Sie Ihr eigenes Logo in Ihren Shop ein.

3. Logogröße anpassen

Stellen Sie Ihr Logo in der richtigen Größe dar.

4. Hilfe

Wir helfen Ihnen bei der Integration Ihres Logos.

1. Eigenes Theme erstellen

Als erstes erstellen Sie ein eigenes Theme für Ihre Anpassungen.

Logo auswahl im Shopware Theme Manager

Ihr neues Template

Mit dem Shopware Theme Manager erstellen Sie Ihr eigenes Theme.


Rufen Sie den Administrationsbereich Ihres Shopware Shops auf. Öffnen Sie dann das Menü "Einstellungen -> Theme Manager". Drücken Sie nun den Button "Theme erstellen". Sie finden den Button mittig oben im Theme Manager. Füllen Sie die Felder nun aus. Achten Sie darauf, dass Sie das Theme vom "Responsive" Theme ableiten. Klicken Sie auf speichern, um Ihr eigenes Shopware Theme zu erstellen. Shopware erstellt im Hintergrund alle notwendigen Dateien.

3. Logogröße anpassen

Sofern Sie eine andere Logo Größe als "DemoShop" haben, müssen Sie nun noch die Logogröße anpassen.

Logo auswahl im Shopware Theme Manager

LESS anpassen

In den Theme-Dateien können Sie nun die Logogröße richtig einstellen.


ACHTUNG! Führen Sie unbedingt Schritt 1 aus und legen Sie ein eigenes Theme für diese Änderungen an, falls Sie dies noch nicht getan haben. Benutzen Sie auf keinen Fall eines der vorinstallierten Themes "Bare" oder "Responsive".

Verbinden Sie sich per FTP zu Ihrem Shop. Nun müssen ein paar Dateien in Ihrem neuen Theme angelegt werden. Legen Sie die folgenden Dateien an und fügen Sie den unten angegebene Code ein:

  • /themes/Frontend/IHRE_THEMENAME/frontend/_public/src/less/all.less
  • /themes/Frontend/IHRE_THEMENAME/frontend/_public/src/less/modules.less
  • /themes/Frontend/IHRE_THEMENAME/frontend/_public/src/less/_modules/header.less

Codeschnipsel

all.less:
@import "modules";
modules.less:
@import "_modules/header";
header.less
// Smartphone
.header-main {
  .logo-main {
    .logo--link, .logo--shop {
      .unitize-height(40, 16); // Logohöhe = 40px
    }
  }
}

// Smartphone Landscape
@media screen and (min-width: @phoneLandscapeViewportWidth) {
  .header-main {
    .logo-main {
      .logo--link, .logo--shop {
        .unitize-height(60, 16); // Logohöhe =  50px
      }
    }
  }
}

// Tablet
@media screen and (min-width: @tabletViewportWidth) {
  .header-main {
    .logo-main {
      .logo--link, .logo--shop {
        .unitize-height(60, 16); // Logohöhe =  60px
      }
    }
  }
}

// Tablet Landscape
@media screen and (min-width: @tabletLandscapeViewportWidth) {
  .header-main {
    .logo-main {
      .logo--link, .logo--shop {
        .unitize-height(80, 16); // Logohöhe =  80px
      }
    }
  }
}

// Desktop
@media screen and (min-width: @desktopViewportWidth) {
  .header-main {
    .logo-main {
      .logo--link, .logo--shop {
        .unitize-height(100, 16); // Logohöhe =  100px
      }
    }
  }
}

Ändern Sie nun in der Datei header.less die Werte entsprechend Ihren Logogrößen ab. Dazu setzen Sie die Logohöhe der entsprechende Logogröße wie unten angegeben ein:

.unitize-height(IHRE_LOGO_GRÖSSE, 16);

Herzlichen Glückwunsch! Sie haben Ihre Shopware 5 Logo erfolgreich geändert. Nun müssen Sie nur noch den Cache (insbesondere den Template-Cache) leeren, damit Ihre Änderungen sichtbar werden.

4. Hilfe und Kontakt

Sie benötigen Hilfe beim Einbinden Ihres Logos? Wir integrieren Ihr Logo in Ihren Shopware Shop.



Ihr Ansprechpartner für Shopware:

Shopdoktor
Sebastian Lenz
Hörnliweg 6
79379 Müllheim

Telefon: 07631 9709910
Mail: info@shopdoktor.com