Shopify-Themes, Liquid, Logos und ähnliche Themen
Hallo,
Ich habe hier im Forum und im Internet nach einer Lösung gesucht und konnte nicht fündig werden, daher stelle ich meine Fragen hier:
1. Wie kann ich die Größe vom Logo ändern ohne das die Leistengröße beeinflusst wird?
2. Wie kann ich die Leistengröße verändern?
Die Änderung sollte responsiv sein.
Theme ist Dawn 3.0
Vielen Dank
Hey @EO4S
Danke für die 2 Fragen und ich nehme mal an du hast deine Logo Größe im Dawn Theme Editor geändert, aber es gefällt dir nicht wie die Header Leiste sich dann ändert, ist das richtig? Ein gute Richtlinie ist das Logo bei ca. 2000x500/600px zu haben und dann die maximale Breite von 250px einstellen um auch eine optimale Responsiveness zu gewährleisten wie beim Narrative Theme (
Ab einer Bildschirm Px Breite von ca. 700-800px wird das volle Dawn Menü ja zum Hamburger Menü. Das kannst du selber testen wenn du dein Chrome Browser Tab mit der Maus schmaler machst und siehst wann das Menü zum Hamburger/Sandwich wechselt.
Die folgenden Angaben sind ohne Gewähr und wir empfehlen das in einer Testumgebung zu testen und auch einen Coding Experten zu konsultieren:
Um die Headergröße zu beeinflussen kannst du ein Code wie das folgende im base.css
einpflegen:
.header-wrapper header.header { max-width: 1170px; padding: 0 15px; }
.header__heading header__heading-link{padding:0;}
Aber wir empfehlen das in einer Testumgebung zu machen - mehr dazu hier wie man das Code bearbeiten kann.
Ein weiteres Code Example um den Header anzupassen wäre folgendes ganz unten im base.css
, dass man auch nach Belieben anpassen kann:
.section-template--15696924868832__1645067183dba6fd6d-padding .collapsible-content-wrapper-narrow {
max-width: 90% !important;
}
.main-page-title { display: none !important;}
@media screen and (min-width: 990px) {
.grid--2-col-tablet.grid--4-col-desktop .multicolumn-list__item {
max-width: 30% !important;
width: 30% !important;
}
}
Etwas hilfreich wären ein paar weitere Angaben von dir, wie z. B. ein Link zum derzeitigen Logo auf der Landingpage so dass wir das "Padding" des Logo in der Leiste in der Chrome Developer Console anschauen können. Ggf. kann man die Leiste minimal vergrößern wenn man weiss wie viel Padding das Logo hat. Hier ein Beispiel:
Logo mit wenig Padding:
Logo mit viel Padding dass man weg-croppen kann im Bild Editor:
Lass wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!
2022 wird dein Jahr! Haltet Abstand und bleibt Gesund.
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Ich danke dir für die Lösungsschritte. Der erste Codeschnipsel verkleinert tatsächlich die Leiste, jedoch bei Änderungen an den Werten ändert sich kaum was, nur das es grob groß oder klein wird. Beim zweiten Code passiert nichts und auch die Änderung der Werte hat kein Einfluss.
Den zweiten Code müsste man anpassen und in einer Kopie von Dawn testen "im Sandkästchen". Wenn dein Live Dawn Theme noch nicht im Code geändert ist und du auf einem bezahlten Plan dann können wir das ggf. anschauen als Teil deiner 60-Min Design Time.
Obwohl der Shopify Support in der Lage ist, eine Vielzahl von grundlegenden Anpassungen zu unterstützen, solltest du daran denken, dass Shopify bei den folgenden Aufgaben nicht helfen kann:
Bevor du dich an den Shopify Support wendest, solltest du die folgenden Schritte ausführen:
Wenn das Setup deines Shops abgeschlossen ist und die von dir gesuchte Anpassung mit dem Theme-Editor nicht möglich ist, kannst du den Support kontaktieren, damit er die Anfrage überprüft.
Nachdem du unser Support-Team kontaktiert und deine Anfrage erläutert hast, kannst du innerhalb von 2–4 Werktagen mit einer Antwort rechnen.
Um dir dabei behilflich zu sein, sende bitte eine E-Mail an unseren Support hier (https://bit.ly/3cwO7ym) von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest, und gib deine myshopify.com-URL da auch ein. Sobald die dein Konto authentifiziert haben, können sie dir weiterhelfen.
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024