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

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

Ewald Gering 15. Februar 2017 11

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!

Hol dir unseren kostenlosen Shopware E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

11 Kommentare

  • 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
  • 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?

Shopware SEO
Guide 2018

shopware seo guide

Genug von schlechten Rankings?

mehr erfahren

Tools, die wir

verwenden

seobility

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes
Logo Größe anpassen mit Less für Shopware 5
Theme: Eigenes Listing Layout erstellen
Plugin Theme anpassen
Staging Umgebung – Was ist das und warum brauchst du eine?
Wie du jedes Icon in Shopware 5 anpassen kannst
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Wie du schnell und einfach Google Shopping für Shopware einrichtest
© 2017 by 8mylez. Powered by Goltfisch GmbH.