Shopify-Themes, Liquid, Logos und ähnliche Themen
Hallo,
Wir nutzen Archetype's Expanse Theme und finden es leider etwas schwierig, die mobile Ansicht unserer Seite anzupassen.
Ganz besonders geht es um Header / Search Bar, wenn man auf unseren Online Shop kommt:
www.spessarttraum.de
Der ganze obere Bereich ist etwas zu groß und lang.
Lieber hätten wir, dass die Lupe nach oben rutscht und die Search Bar verschwindet. Sie sollte sich im Idealfall nur öffnen, wenn man die Lupe klickt.
Sobald man etwas scrollt, passiert das auch, aber wir hätten dies gerne permanent.
Gibt es außerdem die Möglichkeit, den oberen Bereich etwas schmaler zu gestalten?
Die weiße Fläche nimmt etwas zu viel Platz ein.
Das Logo kann dabei selbstverständlich ebenfalls kleiner werden.
Wir würden uns sehr freuen, wenn jemand weiterhelfen kann 🙂
Vielen Dank
Gelöst! Zur Lösung
Erfolg.
@lajones Man einiges davon nur per CSS umgestalten, das wird das eine ganz schöne Pixelschieberei – aber man kann es durch die Anpassung von Äbstanden schmaler gestalten.
Wenn Ihr anstatt des aktuellen Logos für die Mobile Ansicht eines verwendet, wo dir Schrift bzw. der Titel rechts vom Logo steht, reduziert sich der Weißraum und die ganze Navigation wird bestimmt um 20-30px schmaler.
Was das Verhalten der Lupe angeht, muss man zunächst schauen, ob und wie ein Script oder reines CSS greift. Dieses kann man ggf. dann auch anpassen, damit nur die Lupe in der mobilen Ansicht angezeigt wird.
Auch die Announcement-Bar könnte man in der mobilen Ansicht etwas schmaler machen, wenn man die Nachrichten (idealerweise) nacheinander einblendet, statt alles auf einmal.
Wie sind denn eure Kenntnisse in den Bereichen CSS, JS und HTML?
Schöne ist eure Seite geworden! Habt ihr die Produktseite selbst erweitert oder eine Agentur?
Geht das ohne Programmierkenntnisse?
Hey @lajones
Vielleicht hilft dir meine Empfehlung in meinem kurzen Video hier.
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. Oder lass wissen, wenn du weitere Fragen dazu hast oder zum Shop und Business und gerne können wir das hier weiter besprechen! 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.
@lajones Man einiges davon nur per CSS umgestalten, das wird das eine ganz schöne Pixelschieberei – aber man kann es durch die Anpassung von Äbstanden schmaler gestalten.
Wenn Ihr anstatt des aktuellen Logos für die Mobile Ansicht eines verwendet, wo dir Schrift bzw. der Titel rechts vom Logo steht, reduziert sich der Weißraum und die ganze Navigation wird bestimmt um 20-30px schmaler.
Was das Verhalten der Lupe angeht, muss man zunächst schauen, ob und wie ein Script oder reines CSS greift. Dieses kann man ggf. dann auch anpassen, damit nur die Lupe in der mobilen Ansicht angezeigt wird.
Auch die Announcement-Bar könnte man in der mobilen Ansicht etwas schmaler machen, wenn man die Nachrichten (idealerweise) nacheinander einblendet, statt alles auf einmal.
Wie sind denn eure Kenntnisse in den Bereichen CSS, JS und HTML?
Hallo @Finer ,
Danke für deine Nachricht und die Tipps.
Die Verkleinerung des Logos hat schon geholfen und auch die Navigation Bar wird angepasst, um die Abschnitte etwas zu verkleinern.
Unsere Kenntnisse sind okay, würde ich sagen.
Ich weiß, leicht anderes Thema, aber vielleicht kannst du mir bei einem verwandten Problem helfen. Es geht wieder um Anpassungen in der mobilen Ansicht bei den Kollektions-Bannern.
Schöner wäre, wenn der Text nicht in das Bild rechts einfließt.
Wir haben es mit margin-right versucht für diesen Abschnitt "hero__animation-contents" bei @media(max-width: 767px) aber es will nicht so recht.
Hast du vielleicht eine Idee, wie man das elegant lösen könnte?
Vielen Dank im Voraus
@lajones viele Themes blenden den Text von einem Banner in der mobilen Version weiter unten ein (unter dem Banner). Gerade weil der Text so lange ist, würde ich wahrscheinlich auch empfehlen.
Idealerweise gäbe es ein separates Bild für die mobile Ansicht und darunter (ggf. mit Hintergrundfarbe) der Text.
Den Verkauf im Großhandel steigern: In der Shopify Academy lernst du, wie das geht, zum...
By Shopify Feb 3, 2025Teil 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, 2024