FROM CACHE - de_header

Debut Theme schiebt Seite nach unten

Debut Theme schiebt Seite nach unten

Atel2562
Besucher
2 0 0

Liebe Community

Ich brauche eine Lösung für folgendes Anliegen:

Wenn unsere Seite neu geladen wird, wird nach ca. 2s alles nach unten geschoben. Wie kann ich das verhindern?

Hier die Seite:

https://shop.atelierpassage.ch/

 

Danke für eure Hilfe

3 ANTWORTEN 3

Gabe
Shopify Staff
18409 2888 4251

Hi @Atel2562 

 

Danke für den Link und das habe ich in der Dev Console getestet und es scheint sich um den Announcement Banner ganz oben zu handeln. 

 

Siehe meinen kurzen Video dazu hier wo ich zeige wie ihr das etwas besser in der Chrome Develop Console analysieren könnt.


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

Atel2562
Besucher
2 0 0

Hallo @Gabe 

Das denke ich auch, habe das Problem von der Announcement Bar aber noch nicht gefunden, leider verstehe ich das Coden nicht wirklich. Habe im Netz noch nach Lösungen gesucht, aber leider noch nichts gefunden. Haben sie einen Lösungsansatz?

Gabe
Shopify Staff
18409 2888 4251

Hey @Atel2562 

 

Oh, mein Video scheint ohne Ton zu sein. My bad! Aber hier noch ein paar weitere Tipps zum Problem des sog. "layout shift" Problem.

 

An erster Stelle, wie genau verursacht das Verrutschen Probleme für den Shop? Wenn du es so lässt , wie würde es den Shop beeinträchtigen? Mich stört es an sich nicht und ich hätte es wahrscheinlich auch nicht gemerkt, hättest du mich nicht darauf aufmerksam gemacht.

 

Das Problem ist dass das Debut Theme sehr veraltet ist und wir es nicht supporten. Du kannst das aber an uns senden aber ob der Support hier helfen kann wage ich zu bezweifeln. Sende bitte eine E-Mail an unseren Support wie hier demonstriert 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.

 

Es scheint sich also um den sog. "Layout Shift" zu handeln was passiert, wenn Elemente auf der Seite ihre Position ändern, während die Seite geladen wird. Wenn du dein Live Theme duplizierst, passiert es auch in der neuen Kopie?

 

Hier sind ein paar Lösungsansätze, die du in einer Kopie deines Themes testen kannst:

  • Eine mögliche Lösung wäre, Platz für den Banner zu reservieren, bevor er geladen wird, indem du dem Container eine feste Höhe (in Pixel oder em) zuweist im Code. Wenn die Höhe des Containers festgelegt ist, wird sie nicht verändert, sobald der Inhalt geladen wird, was dazu führt, dass die übrigen Elemente auf der Seite nicht verschoben werden.
  • Oder CSS verwenden, um den Banner vor dem Laden der restlichen Seite zu laden. Zum Beispiel einen preload verwenden, um den Banner zu priorisieren und zu laden, bevor die Hauptinhalte der Seite geladen werden.
  • Eine andere Lösung könnte sein, den Banner asynchron zu laden. Dabei wird der Hauptinhalt der Seite sofort angezeigt, und der Banner wird geladen, wenn er bereit ist. Dies kann jedoch dazu führen, dass der Banner später erscheint, was je nach Anforderungen möglicherweise nicht ideal ist.
  • Man kann auch eine Verzögerung einbauen, bevor der Banner angezeigt wird. Anstatt ihn sofort zu laden, könnte er zum Beispiel erst angezeigt werden, nachdem die Hauptinhalte der Seite geladen wurden. Dies könnte das Verschieben der Seite verhindern, könnte aber auch dazu führen, dass Benutzer den Banner nicht sofort sehen.

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