Mein erster onlineshop
mit shopware 5
Ihr habt euer Logo ausgetauscht aber irgendwie ist es für euch einfach zu klein?
Kein Problem!
Heute zeige ich euch, wie ihr ganz einfach und in nur 5 Schritten die Größe eures Logos anpassen könnt.
Vorab schonmal die Schritte, weiter unten mit Erklärung:
Gar nicht so schwer oder?
Los geht's!
Ich will nur den Code: Download
Hier findet ihr den Blogpost als Video!
Das ist eine grundlegende Aufgabe die wir öfter machen und schon gelernt haben. Könnt ihr hier: Was du über die Shopware 5 Themestruktur wissen musst und wie du ein Theme anlegst abchecken.
Nachdem ihr das Theme angelegt habt, müsst ihr unter "Theme konfigurieren" euer Logo hochladen.
Die all.less ist sehr wichtig für uns, da wir alle anderen LESS Dateien in diese einbinden und Shopware dann nur die all.less verwendet.
In den Ordner
themes/Frontend/DEINTHEME/frontend/_public/src/lesskommt die Datei all.less.
In diese Datei kommt folgender Code:
@import "_modules/modules";In dem Ordner
themes/Frontend/DEINTHEME/frontend/_public/src/less/_moduleserstellen wir nun die modules.less.
In diese Datei schreiben wir dann folgenden Code:
@import "header";Damit bindet ihr den Code aus der header.less Datei in eure modules.less ein, die wiederum in die all.less eingebunden wird.
Jetzt werden wir den Code für die Größe des Logos bearbeiten.
Dazu legt ihr erst einmal die Datei header.less im Ordner
themes/Frontend/DEINTHEME/frontend/_public/src/less/_modulesan.
Um die Größe des Logos anzupassen schreiben wir folgenden Code hinein
.header-main {
// Logo
.logo-main {
// Smaller logo for mobile viewports
.logo--shop {
.unitize-height(35, 16);
}
.logo--link {
.unitize-height(35, 16);
}
}
}
@media screen and (min-width: @tabletViewportWidth) {
.header-main {
// Logo
.logo-main {
// Bigger logo for tablet viewports
.logo--shop {
.unitize-height(80, 16);
}
.logo--link {
.unitize-height(80, 16);
}
}
}
}Ihr fragt euch wieso hier alles doppelt ist?
Responsive Design.
Die Zeilen 1 - 12 sind für Smartphones. Und der Rest für Tablets und aufwärts.
Auf Smartphones wird das Logo mit der Höhe 35px (Zeile 6 und Zeile 9) angezeigt und ab Tablets mit 80px (Zeile 19 und Zeile 22).
Ihr könnt da beliebige Werte eintragen und so die Höhe eures Logos steuern.
Wollt ihr das Logo breiter machen, schreibt es mir in die Kommentare und ich ergänze den Beitrag.
Manche Logos sind sehr breit und nicht hoch. Irgendwann ist eine gewisse Breite erreicht und das Logo wird nicht größer. Das liegt daran: Es gibt um das Logo Element einen weitern Block der auf 30% breite festgesetzt ist.
Das kannst du aber auch einfach anpassen (Beispiel):
.header-main {
.logo-main {
width: 40%;
.logo--shop {
.unitize-height(80, 16);
.unitize-width(300);
img {
width: 100%;
height: auto;
}
}
.logo--link {
.unitize-height(80, 16);
.unitize-width(300);
}
}
.shop--navigation{
width: 60%;
}
}
Achtung: Du musst darauf achten, dass .shop--navigation dann entsprechend kleiner gemacht wird. Zusammen müssen die Blöcke 100% Breite ergeben.
Zu guter Letzt den Cache leeren und anschließend das Theme kompilieren.
Jetzt wild am Tisch tanzen und sich freuen, dass ihr die Höhe des Logos selbst angepasst habt!
Hilfe: Bei Problemen meldet euch in den Kommentaren und ich helfe euch!
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
Ich glaube es ist der Schnipsel navigation--list block-group
Was muss ich und wo noch anpassen?
Danke.
Viele Grüße, Ildiko
freut mich :)
Gruß
Alexander
Es hat alles direkt auf Anhieb geklappt.
Wenn ich das Logo jetzt vergrößere dann sieht mir das alles ein wenig zerstreut aus.
Daher meine Frage... wie ist der Lösungsansatz wenn ich das Logo nach rechts verbreitern und nach oben vergrößern will ohne das Suchfeld und die Shopnavigation zu verschieben?
Vorab vielen Dank für die Hilfe.
Mit freundlichen Grüßen
dazu kannst du die Ausrichtung mit z.B. text-align: right; nach rechts verschieben.
Gruß
Alexander
Ich hätte da noch eine Frage:
Ich würde gerne den margin: 0 auto nur bei der Smartphone Ansicht haben wollen und nicht bei der Desktopansicht wäre das irgendwie möglich?
vielen Dank!
Das ist möglich :) Du musst den Code für margin: 0 auto; in den höheren Viewports in den Media Queries dann nur überschreiben.
Gruß
Alexander
dazu schaust du dir am besten an wie du HTML Code erweitern kannst bei Shopware über Smarty: https://www.youtube.com/watch?v=fNfjL59gaLM
Gruß
Alexander
vorab danke für die vielen Tutorials rund um Shopware.
Kannst du mir vielleicht kurz erklären, wie ich die Logo-Größe in der footer.tpl ändern kann? Speziell wie ich erkenne ob es sich um ein Smartphone bzw. Desktop handelt?
sehr gerne!
Um die Logo Größe im Footer anzupassen musst du die passenden Klassen raussuchen. Wenn du das Logo als Bild eingefügt und nicht wie Shopware als Icon eingefügt hast, musst du die height (Höhe) erhöhen.
Die Anpassungen gelten im Standard für das Smartphone. Wenn du diese für den Desktop anders haben willst, musst du mit den Media Queries arbeiten und diese Höhe dann überschreiben: @media screen and (min-width: @tabletViewportWidth)
Gruß
Alexander
ParseError: Unexpected input in modules.less on line 1, column 0
1| @import „header“;
bei header muessen beide Anfuehrungsstriche oben sein.
@import "header";
Moeglicherweise ist das beim Kopieren verschoben worden.
Gruß
Alexander
Das erste Mal, wo alles perfekt erklärt und funktioniert hat ich bin begeistert.
vielen Dank!
Gruß
Alexander
.header-main {
.logo-main {
width: 30%;
.logo--shop {
.unitize(margin-left, -24);
.unitize-height(70);
.unitize-width(400);
.unitize(margin-top, -10);
}
}
.logo--link {
.unitize(margin-left, -24);
.unitize(margin-top, -10);
.unitize-height(70);
.unitize-width(400);
img {
width: 100%;
height: auto;
}
}
.shop--navigation{
width: 70%;
}
}
von abel übernommen passt perfekt sieht gut aus, nur die mobile version egl was ich dranhänge klappt nicht.
wie in meinem Kommentar beschrieben ist es hier wichtig, dass der "mobile-first" Ansatz beibehalten wird, d.h. die Anpassungen muessen zunaechst in der mobilen Ansicht passen und werden dann mit den media queries erweitert. Hier findest du eine Erklaerung zu media queries: https://wiki.selfhtml.org/wiki/CSS/Media_Queries
Ansonsten kannst du dich gerne bei uns melden: support@8mylez.com
Gruß
Alexander
Ich konnte die Grösse und die Position des Logos perfekt für Desktop einrichten.
Nun hab ich das Problem das ich auf dem Smartphone total anders ist.
Ich verwende diese header.less Datei:
.header-main {
.logo-main {
width: 30%;
.logo--shop {
.unitize(margin-left, -24);
.unitize-height(70);
.unitize-width(400);
.unitize(margin-top, -10);
}
}
.logo--link {
.unitize(margin-left, -24);
.unitize(margin-top, -10);
.unitize-height(70);
.unitize-width(400);
img {
width: 100%;
height: auto;
}
}
.shop--navigation{
width: 70%;
}
}
Nun möchte ich das ganze noch Separat für die Smartphones einstellen. Ich habe schon versucht einen Mix von den beiden oben Beschriebenen Codes in der Anleitung zu machen, bin aber gescheitert.
Kannst du mir da helfen?
Grüsse
Shopware arbeitet mit dem "mobile-first" Ansatz, d.h. der Code ist im Standard fuer das Smartphone ausgelegt. Mit weiteren Regeln kann der Code dann ueberschrieben, damit dieser auch auf dem Desktop gut aussieht.
Dazu kannst du die media queries nutzen @media screen and (min-width: @tabletViewportWidth)
Wenn du moechtest schauen wir uns das Ganze genauer an. Schick uns doch bitte Zugangsdaten an support@8mylez.com
Gruß
Alexander
wie komme ich zu dem Ordner: themes/Frontend/DEINTHEME/frontend/_public/src/less?
Vielen Dank.
genau wie Darek es sagt. Du musst dich mit deinem Server wo die Dateien liegen mit einem FTP Client verbinden. Dann solltest du den Ordner themes und alle seine Unterordner sehen.
Vorausgesetzt du hast ein neues Theme, wie im Tutorial beschrieben, angelegt.
Gruß
Alexander
Also vielen Dank dafür.
Allerdings habe ich ein Problem. Am Handy ist es so, dass bei mir die Suchleiste und das Menü übereinander liegen.
Wie kann ich das denn lösen?
das freut mich! Kannst du mir einen Link zu deinem Shop an support@8mylez.com schicken, damit wir uns das genauer anschauen können?
Gruß
Alexander
Viele Grüße
hast du ein Beispiel wo es aktuell nicht glatt läuft? Dann könnte ich mir das genauer anschauen.
Gruß
Alexander
vielen Dank für den Beitrag.
Könnt Ihr auch aufzeigen wie man das Logo zentriert?
DAnke
kommt auf die Liste! Danke für deinen Kommentar.
Gruß
Alexander
Ich hab mal eine Frage, woran kann es liegen, wenn kein Tutorial und Code funktioniert?
Themes anlegen, Bild hochladen und Ordner erstellen ist immer gleich.
Leider hat keiner der gewünschten Codes dazu geführt dass das Logo größer wurde.
Man muss dazu sagen, dass wir die Community Version haben und der "Shop" über die IP aufgerufen wird. (Falls dies z.B. der Grund dafür sein sollte)
Vielleicht haben Sie noch einen Tipp.
Lg Jan
die Community Edition oder der Aufruf ueber die IP haben darauf keinen Einfluss.
Kompilierst du das Theme nach den Anpassungen auch? Moeglicherweise ueberschreibst du die falschen Dateien. Wenn du uns Zugangsdaten schickst, koennen wir da etwas genauer rueber schauen.
Gruß
Alexander
Dane für dieses kostenlose Plugin, das zuerst nicht zum gewünschten Ergebnis führte aber letztendlich doch - wahrscheinlich zuerst ein Versionsproblem und dann alle Caches leeren). Nach zig Versuchen per neuem Theme und Less-Dateien, die alle gescheitert sind, habe ich damit jetzt das gewünschte Resultat bekommen.
Gute Arbeit. Wo könnte man den Voten, damit bei Deinem Plugin auch ein paar Sternchen dazu kommen?
LG
Jotto
(die unten angegebene URL ist eine Testumgebung/-domain)
vielen Dank für das nette Feedback!
Es freut mich sehr, dass es am Ende doch noch geklappt hat.
Voten solltest du in deinem Shopware Account können, da gibt es eine Auflistung der Plugins die du gekauft hast (die kostenlosen sind auch dabei). Da kannst du auch die Plugins usw. bewerten.
Gruß
Alexander
Hatte ein zu kleines Browserfenster und da hat Shopware das kleinere Logo ausgeliefert.
Gruß Jan
super! Freut uns wirklich sehr, dass dir das Tutorial gefällt.
Gruß
Alexander
deine Anleitung hat Super geklappt, allerdings funktioniert das bei mir nur in Firefox.
Wenn ich den Shop mit dem Iexplorer oder Edge aufrufe, bekomme ich das alte DemoShop Logo angezeigt, woran liegt das?
Gruß Jan
vielen Dank für deine Hilfe. ich habe genau wie du geshrieben, aber bei mir funktioniert es irgendwie nicht. Woran könnte es liegen?
Beste Grüße,
Karakoz
dazu müsste ich mir den Code anschauen. Kannst du mir den per E-Mail schicken an i@8mylez.com?
Am besten nur die LESS Dateien die du selbst erstellt hast.
Gruß
Alexander
ich bin begeistert von deinem Blog. Du machst sehr gute Arbeit hier:-)
Kannst du mir sagen, wie ich mein Logo nach oben verschieben kann? Das Anpassen der Größe hat super geklappt, nur leider ist mein Content nun sehr weit nach unten gerückt. Wie bekomm ich mein Logo und den Content nach oben verschoben?
vielen Dank für die netten Worte! Das freut uns wirklich sehr.
Kannst du mir vielleicht einen Link zu deinem Shop schicken? Dann kann ich mir das genauer anschauen.
Gruß
Alexander
first of all: vielen Dank für den hervorragenden Blog! Ohne 8mylez wäre ich völlig aufgeschmissen!
Wie schon bei ein paar anderen Usern ändert sich bei mir die Größe des Logos nicht, wenn ich die Werte in der header.less Datei ändere, lediglich das ganze Menü rückt weiter nach unten. Ich habe auch .unitize-width(300); eingefügt ohne Erfolg (das Logo ist breit und schmal). Irgendeine Idee, was ich noch probieren könnte?
Tausend Dank im Voraus für die Hilfe, dass die Logo-Anpassung nicht klappt, treibt mich in den Wahnsinn ;)
schreib doch mal die gesamte Datei, um die es geht hier als Kommentar.
Am besten auch ein Link zu Deinem Shop.
Gruß
Sebastian // Shopdoktor.com
wozu soll ein Child-Theme angelegt werden?
Lässt sich das nicht direkt im Responsive Theme ändern und kompilieren?
Mit dem eigenen Theme werden die eigenen Änderungen stetig beibehalten ;)
theoretisch geht es. Aber wie Sebastian sagte, ist es nicht updatesicher. d.h. wenn die Shopware AG ein Update rausbringt und sich etwas an dem Theme ändert, werden deine Änderungen überschrieben.
Daher immer nur mit einem Child-Theme arbeiten.
Gruß
Alexander
vielen Dank! Ich habe den Link in dem Blog Post ergänzt.
Gruß
Alexander
erst mal vielen Dank für das ganze erklären.
Aber irgendwie klappt das bei SW5.1.2 nicht sowie gedacht.
Das Logo bleibt oben links klein und da drunter ändert sich das platz verhältnis
Ich häng mal ein bild zur ansicht an.
Gruß
Maik
[img]http://up.picr.de/24550167rm.jpg[/img]
vielen Dank!
Bei Logos die lang sind muss die Breite der Box auch noch angepasst werden. Probier es mal mit .unitize-width(300); für die Breite.
Wenn du nicht weiterkommst meld dich einfach bei mir per E-Mail i@8mylez.com
Gruß
Alexander
danke für das Tutorial - leider funktioniert das bei mir nicht. Wir nutzen SW5 und ich habe das Custom_Theme angelegt, Logos und Farbkonfig angepasst und sowohl header als auch all less-Dateien eingebunden. Mir erschliesst sich zum einen nicht, ob die Theme die Dateien tatsächlich kompiliert und falls ja, wieso sich nichts tut - wie mans ehen kann ist das Logo unleserlich klein!
Für Hilfe wäre ich sehr dankbar!
Viele Grüße
Julian
wenn ich mir deinen Shop anschaue, dann ist das Logo aber doch ziemlich groß.
Hat es geklappt oder kann ich dir vielleicht noch helfen?
Gruß
Alexander
Was muss ich dafür ändern?
normalerweise passt sich die Breite automatisch der Höhe an.
Probier mal
.unitize-width(300);aus.Falls es nicht klappt, kannst du mir deinen Shop per Mail i@8mylez.com schicken und ich gucke drüber.
Gruß
Alexander
Newsletter ist abonniert.
Versuche seit 8 Jahren und 7 Stunden die (padding) Abstände vom .content-main--inner Bereich zu entfernen aber ich komme nicht ans Ziel.
vielen Dank für die netten Worte.
Themes werden beim Zuweisen kompiliert bzw. es kommt eine Abfrage zum Kompilieren.
Manuell kann diese auch gestartet werden über: Grundeinstellungen / Cache / Themes kompilieren
Achtung: Gilt nur für Shopware 5. Bei Shopware 4 wird das automatisch kompiliert.
Zu dem .content-main--inner Problem:
Im Ordner themes/Frontend/DEINTHEME/frontend/_public/src/less/_modules
kannst du die Datei global.less anlegen und dort die Klasse mit padding: 0; reinschreiben.
Hat bei mir prima geklappt, falls es weiterhin Probleme gibt, schreib mir eine Email i@8mylez.com und ich schaue mir das genauer an :)
Gruß
Alexander
vielen Dank!
Freut mich sehr, wenn es geholfen hat :)
Gruß
Alexander
Was denkst du?