Shopware Hintergrund ändern - Wie Du ein Bild einfügst

Shopware Hintergrund ändern - Wie Du ein Bild einfügst

Ewald Gering 15. Februar 2017 16

Wir hören oft, dass der Hintergrund in Shopware, auf der Startseite und dem Listing ein bisschen aufgefrischt werden könnte. Keine schlechte Idee dachten wir. Daher erklären wir Dir heute wie Du ein eigenes Bild in den Hintergrund Deines Shops setzen kannst.

Shopware Hintergrundbild ändern

Der Aufwand hierfür hält sich auch in Grenzen. Es muss lediglich eine Less Datei erstellt und ein Bild ins Theme eingebunden werden.

So sieht das ganze aus, wenn man nur den Hintergrund verändert.
Wirkt doch gleich viel bunter und angenehmer als der langweilige Grauton.

shopware shop mit beispiel hintergrund bild

Ab hier setzen wir voraus, dass Du bereits ein eigenes Theme hast. Sollte das nicht der Fall sein, kannst Du hier nachlesen, wie Du Dein eigenes Shopware 5 Theme erstellst.

Shopware Hintergrund anpassen - Schritt 1

Als Erstes fügen wir das Hintergrundbild in folgendes Verzeichnis ein:

themes/Frontend/DEINTHEME/frontend/_public/src/img/background.png

Wir gehen davon aus, dass Du bereits eine all.less hast.

Ansonsten kannst Du in diesem Video von uns wichtiges zum Thema Less nachschauen: Wie Du Dein erstes Shopware 5 Theme anlegst und mit less anpasst

Shopware Hintergrund anpassen - Schritt 2

In die all.less muss die modules.less eingebunden werden. Der Code sieht dann folgendermaßen aus:

@import "_modules/modules";

Anschließend erstellen wir die modules.less im folgenden Verzeichnis:

themes/Frontend/DEINTHEME/frontend/_public/src/less/_modules/modules.less

Wenn Du unter '_modules' schon eine global.less hast, kannst Du den nächsten Teil einfach mit einbinden. Wenn noch keine angelegt wurde, musst Du dies noch erledigen und dementsprechend in die modules.less importieren:

@import "global";

Die Datei sollte dann in folgendem Verzeichnis liegen:

themes/Frontend/DEINTHEME/frontend/_public/src/less/_modules/global.less

Shopware Hintergrund anpassen - Schritt 3

Der Code um das Bild als Hintergrund einzubinden ist folgender:

Dieser gehört ist die erstellte global.less Datei.

@media screen and (min-width: @desktopViewportWidth) {
  .page-wrap{
    background: url('../../img/background.png');
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
  }
}

Die zwei Punkte in der URL stehen dafür, dass man ein Verzeichnis weiter nach oben geht. In diesem Beispiel aus "_modules" nach "less" und schliesslich nach "src" und von dort aus in das Verzeichnis "img" und dann wird auf auch schon auf unser Bild verwiesen.

Shopware Hintergrund anpassen - fast fertig

Das war auch schon alles, was im Theme gemacht werden musste. Jetzt musst Du den Less Code noch neu kompilieren.

Dafür musst Du im Backend im Theme Manager das Theme neu kompilieren lassen - das sollte aber keine Herausforderung mehr für Dich sein.

Viel Spaß mit Deinem neuen Hintergrund im Shop!

16 Kommentare

  • Hallo,
    vielen Dank für die Super-Anleitung.
    Das Hintergrundbild wird angezeigt. Der Main-Content (Shop) arbeitet tadellos. Leider werden bei mir die Cookie-Einstellungen jetzt mit einem Overlay belegt und die Funktion der Buttons und der Einstellungen geht nicht mehr.
    Sidebar verschwinden sobald man mit der Maus darauf klickt.
    Sobald ich die global.less wieder leere, arbeitet die Cookie-Sidebar wieder normal. Könnt ihr mir sagen wie ich mein Problem lösen kann? Vielen Dank im Voraus.
    Viele Grüße
    Oliver
  • Hallo,

    habe nach Anleitung alles gemacht. Beim Laden der Seite wir das Hintergrundbild kurz angezeigt, und danach von der "Farbe" wieder "überlagert".
    Ich hoffe ich habe mich verständlich ausgedrückt...:)

    Was könnte das Problem sein?

    Danke
  • Hab das "Problem" selbst lösen können: In den Einkaufswelten muss im Reiter "Layout" der Haken bei "Vollflächig" deaktiviert werden...
  • Guten Morgen, falls der Post noch Relevanz hat, hier mein Fehler den ich hatte: Ich hatte das Background.png nur so genannt ( war aber immer noch eine jpeg Datei) also wäre der folgende Pfad background.png.jpeg oder ihr ändert es am Bild namen selbst.
    War zumindest mein Fehler.

    MfG Steven
  • Hey Steven,

    vielen Dank für den Hinweis!

    Gruß
    Alexander
  • Hallo,

    Bin genau nach Anleiung vorgegangen, habe die .less-Dateien erstellt, doch leider bleibt der Hintergrund noch immer Grau (vorher natürlich noch kompiliert).
  • Haftet ihr vielleicht diesbezüglich einen Lösungsvorschlag? Lg
  • Hey Andreas,

    eventuell hat sich ein Schreibfehler eingeschlichen. Du kannst auch in der Less Datei prüfen ob andere Änderungen erfolgreich übernommen werden oder diese garnicht geladen werden.

    Viele Grüße
    Ewald
  • Super Anleitung - schnell und kackig zum Ziel! Danke!

    Vielleicht als kleine Anregung... Schreib in Schritt 3 dazu, in welche Datei man den Code einfügen muss. Ich stand da etwas auf dem Schlauch, bis ich ihn in die global.less eingefügt hab.

    Sonst aber top!
  • Hey Hardy,

    vielen Dank für dein Feedback. Ich habe den Zusatz noch dazu geschrieben.

    Viele Grüße
    Ewald
  • Danke für die ganzen super Anleitungen !!! TOP !!!
    Kann man diese Anleitung auch irgendwie so anpassen das Sie im footer oder haeder geht!

    LG Claus
  • Hey Claus,

    danke für Deinen Input, vielleicht gibt es dazu ja bald einen weiteren Blogpost :-)

    LG
    Marc
  • Es geht auch anders: ab in die Theme Konfiguration - Farbeinstellungen

    @body-bg

    Statt einer Farbe in das Feld folgendes reinpacken:

    url("dein-shop.de/media/image/pfad/zu/deinem/bild.jpg") fixed*;

    * je nachdem was man braucht
    Klappt wunderbar :D
  • Hey Anni,

    das ist auch möglich. Jedoch muss man dann ein perfekt passendes Bild haben, da es sonst wiederholt wird oder nicht genau passt. Um das Bild perfekt anzupassen müsste man den ganzen less Code in dieses kleine Feld einbinden. Ich finde das ein wenig unübersichtlich.

    Aber toll, dass man auch andere Möglichkeiten lernt.
    Viele Dank dafür!

    Viele Grüße
    Ewald
  • Hallo,

    so einfach wie beschrieben scheint es doch nicht zu sein:

    Den Code habe ich genau so implementiert und in der all. less die global-less importiert.
    Der Hintergrund bleibt allerdings grau.
    In der global. less des original responsive Themes habe ich folgenden code gefunden und mit der entsprechenden url angepasst zusätzlich eingefügt. Nun ist der Hintergrund weiß.
    Kann es sein, dass das mit einer Themenwelt nicht funktioniert? (dort habe ich das Häkchen "vollflächig" entfernt.

    Fritz Behringer
  • Hallo Fritz,

    evtl. stimmt der Import für die global.less nicht. Ich habe den Beitrag nochmal angepasst, sodass die Verbindung zwischen den Less Dateien nachvollziehbarer ist.
    Löst die neue Anleitung dein Problem?
    Wenn es trotzdem nicht klappt kannst du uns gerne eine Mail mit den Zugangsdaten für deinen Shop an support@8mylez.com senden und wir schauen mal rein.

    Viele Grüße
    Ewald

Was denkst du?

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Social Media Icon mit Link im Footer
Shopware Theme: Eigenes Listing Layout erstellen
Logo Größe mit Less für Shopware 5 anpassen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes

Sicher Dir die besten Shopware 6
Tipps & Tricks

Trag Dich ein und Du erhältst unser Shopware 6 Whitepaper kostenlos!
Trag dich für unseren Newsletter an, im Anschluss erhältst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere Datenschutzerklärung.

Entdecke unsere ebooks

Unsere Standorte

Zentrale 

Technologiepark 23
33100 Paderborn


Leipzig
Bernhardstraße 34
04315 Leipzig

Kontakt

Über 8mylez

✓ 38 Mitarbeiter

✓ Shopware Gold Partner

✓ 40.000+ Plugin Downloads

✓ 160+ betreute Shops

✓ Full-Service Shopware Agentur

✓ 70 Shopware Videos auf Youtube

✓ Alle Shopware Zertifizierungen

Social


Unsere Partner
© 2024 by 8mylez GmbH //  Impressum + Datenschutz