FROM CACHE - de_header
Gelöst

Mobile Ansicht anpassen - Expanse Theme

lajones
Tourist
12 0 1

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.

 

lajones_0-1686662799447.png

 

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.

 

lajones_1-1686662894623.png

 

Wir würden uns sehr freuen, wenn jemand weiterhelfen kann 🙂

Vielen Dank

1 AKZEPTIERTE LÖSUNG

Finer
Shopify Expert
2039 426 729

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?

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency

Lösung in ursprünglichem Beitrag anzeigen

5 ANTWORTEN 5

zeit
Tourist
9 0 2

Schöne ist eure Seite geworden! Habt ihr die Produktseite selbst erweitert oder eine Agentur?

Geht das ohne  Programmierkenntnisse?

Gabe
Shopify Staff
17474 2765 4083

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

Finer
Shopify Expert
2039 426 729

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?

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
lajones
Tourist
12 0 1

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.

 

lajones_0-1686839946740.png

 

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

Finer
Shopify Expert
2039 426 729

@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.

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency