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

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

Ewald Gering 15. Februar 2017 4

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:

@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 E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

4 Kommentare

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

8mylez Community

SHOPWARE

FORUM

shopware tutorial ebook mockup

Werde Teil einer einzigartigen Wissensdatenbank!

Zum 8mylez Shopware Forum

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
Logo Größe anpassen mit Less für Shopware 5
Plugin Theme anpassen
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Theme: Eigenes Listing Layout erstellen
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Wie du jedes Icon in Shopware 5 anpassen kannst
Shopware Logo aus dem Footer entfernen
Staging Umgebung – Was ist das und warum brauchst du eine?
© 2017 by 8mylez. Powered by Goltfisch GmbH.