Shopify-Themes, Liquid, Logos und ähnliche Themen
Hallo Shopify-Community,
Ich verwende das Dawn-Menü, und ich möchte gerne das Schließen-Symbol (X) im Einschubmenü (Siehe Bild unten) von der rechten Seite auf die linke Seite verschieben. Auf dem PC erscheint es bereits auf der linken Seite, aber auf dem Handy ist es auf der rechten Seite. Ich habe im Dawn-Menü nach möglichen Anpassungsoptionen gesucht, jedoch bisher ohne Erfolg. Könnt ihr mir bitte mitteilen, wie ich diese Änderung vornehmen kann? Ich habe das Community-Forum durchsucht, konnte aber keine passende Lösung finden.
Vielen Dank im Voraus für eure Hilfe!
Gelöst! Zur Lösung
Erfolg.
Hey @Sabo1
Danke für die Frage und dazu wollte ich fragen ob du auch andere Themes ausprobiert hast die das ggf. besser als und standard Free Dawn Theme können?
Um das Schließen-Symbol (X) im Einschubmenü des Dawn-Themes von Shopify auf Mobilgeräten von der rechten auf die linke Seite zu verschieben, wird es einen Eingriff in das Code deines Themes verlangen.
Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/ Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Suche nach der Datei component-menu-drawer.css
in den Assets deines Themes und füge entweder am Ende dieser Datei oder im CSS Editor im Theme den folgenden Code ein:
.menu-drawer {
transform: translate(100%);
left: unset;
right: 0;
}
.js details[open].menu-opening>.menu-drawer {
transform: translate(0);
}
Dieser Code bewirkt, dass das Menü von rechts einfließt, was bedeutet, dass das Schließen-Symbol auf der linken Seite erscheinen sollte.
Bitte beachte, dass Änderungen am Code deines Themes Auswirkungen auf andere Bereiche deiner Website haben können. Diese Lösung basiert auf Diskussionen und Lösungen, die in der Shopify-Community vorgeschlagen wurden.
Desweiteren, um das Schließen-Symbol (X) im Einschubmenü deines Shopify Dawn-Themes auf Mobilgeräten auf die linke Seite zu verschieben, kannst du folgenden CSS-Code verwenden. Bitte beachte, dass die genaue Platzierung abhängig von deinem spezifischen Design und weiteren individuellen Stilelementen angepasst werden muss:
@media (max-width: 749px) {
.drawer__close-button {
position: absolute;
right: auto; /* Entfernt die rechte Platzierung */
left: 1rem; /* Setzt das Symbol nach links mit einem Abstand von 1rem */
}
}
Dieser CSS-Snippet verwendet eine Media-Query, um sicherzustellen, dass die Änderungen nur auf Mobilgeräten angewendet werden. Nachdem du den Code hinzugefügt hast, sollte das Schließen-Symbol (X) auf Mobilgeräten auf der linken Seite erscheinen.
---
Habt ihr auch den Shop auf die Weihnachtssaison und den Winterschlussverkauf umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 oder Schnäppchen 👀!
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.
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
Erfolg.
Hey @Sabo1
Danke für die Frage und dazu wollte ich fragen ob du auch andere Themes ausprobiert hast die das ggf. besser als und standard Free Dawn Theme können?
Um das Schließen-Symbol (X) im Einschubmenü des Dawn-Themes von Shopify auf Mobilgeräten von der rechten auf die linke Seite zu verschieben, wird es einen Eingriff in das Code deines Themes verlangen.
Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/ Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Suche nach der Datei component-menu-drawer.css
in den Assets deines Themes und füge entweder am Ende dieser Datei oder im CSS Editor im Theme den folgenden Code ein:
.menu-drawer {
transform: translate(100%);
left: unset;
right: 0;
}
.js details[open].menu-opening>.menu-drawer {
transform: translate(0);
}
Dieser Code bewirkt, dass das Menü von rechts einfließt, was bedeutet, dass das Schließen-Symbol auf der linken Seite erscheinen sollte.
Bitte beachte, dass Änderungen am Code deines Themes Auswirkungen auf andere Bereiche deiner Website haben können. Diese Lösung basiert auf Diskussionen und Lösungen, die in der Shopify-Community vorgeschlagen wurden.
Desweiteren, um das Schließen-Symbol (X) im Einschubmenü deines Shopify Dawn-Themes auf Mobilgeräten auf die linke Seite zu verschieben, kannst du folgenden CSS-Code verwenden. Bitte beachte, dass die genaue Platzierung abhängig von deinem spezifischen Design und weiteren individuellen Stilelementen angepasst werden muss:
@media (max-width: 749px) {
.drawer__close-button {
position: absolute;
right: auto; /* Entfernt die rechte Platzierung */
left: 1rem; /* Setzt das Symbol nach links mit einem Abstand von 1rem */
}
}
Dieser CSS-Snippet verwendet eine Media-Query, um sicherzustellen, dass die Änderungen nur auf Mobilgeräten angewendet werden. Nachdem du den Code hinzugefügt hast, sollte das Schließen-Symbol (X) auf Mobilgeräten auf der linken Seite erscheinen.
---
Habt ihr auch den Shop auf die Weihnachtssaison und den Winterschlussverkauf umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 oder Schnäppchen 👀!
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.
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