Mein erster onlineshop
mit shopware 5
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.
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.
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.
Als Erstes fügen wir das Hintergrundbild in folgendes Verzeichnis ein:
themes/Frontend/DEINTHEME/frontend/_public/src/img/background.pngWir 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
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.lessWenn 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.lessDer 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.
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!
Unsere Standorte
Zentrale
Technologiepark 23
33100 Paderborn
Leipzig
Bernhardstraße 34
04315 Leipzig
Kontakt
E-Mail: support@8mylez.com
Telefon: +49 (0) 5251 284 710
Shopware Dienstleistungen
Ü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
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
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
War zumindest mein Fehler.
MfG Steven
vielen Dank für den Hinweis!
Gruß
Alexander
Bin genau nach Anleiung vorgegangen, habe die .less-Dateien erstellt, doch leider bleibt der Hintergrund noch immer Grau (vorher natürlich noch kompiliert).
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
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!
vielen Dank für dein Feedback. Ich habe den Zusatz noch dazu geschrieben.
Viele Grüße
Ewald
Kann man diese Anleitung auch irgendwie so anpassen das Sie im footer oder haeder geht!
LG Claus
danke für Deinen Input, vielleicht gibt es dazu ja bald einen weiteren Blogpost :-)
LG
Marc
@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
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
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
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?