Seite springt nach unten bei Auswahl der Variante

[Julia_Wonder]

Hallo! Ich habe diese Woche meine Seite von Dawn auf Pipeline transferiert und dort im Code meine Custom Swatch Bilder hochgeladen und aktiviert. Seitdem sprint die Produktseite immer nach unten, wenn man eine Variante auswählt. Ich glaube das tut es erst, seit ich die Swatches im Code geändert habe. Kann mir jemand helfen, was ich tun muss. 

Danke und viele Grüsse,

Julia

[Gabe]

Hey @Julia_Wonder 

Pipeline ist ein gute Wahl und tolles Theme! 😉

Bei "und dort im Code meine Custom Swatch Bilder hochgeladen und aktiviert" meinst du diese Anleitung bist du gefolgt, ist das richtig? Hier ist der Video der alles zeigt. Ich konnte das ohne ein Beispiel aus deiner Beschreibung nicht entnehmen, genau welche Schritte du gefolgt bist, und ggf. wären die Theme Entwickler hier die besten Ansprechpartner. 

Da steht, dass man die korrekten Trigger Words und Color Names einrichten muss und ggf. die swatches.json verwenden um deine eigenen Namen und HEX-Farbwerte, oder deine Farben Bilder zum Ordner "Assets" hinzufügen:

• Create a small square image (60x60 or 100x100 for best results).
• Upload to the Assets folder.
• Modify swatches.json to include your color name and image.

Wenn dein Bildname Leerzeichen enthält, diese durch einen Unterstrich oder Bindestrich ersetzen:

• Anstelle von "Light Navy.png" verwende "light_navy.png" oder "light-navy.png".

Für die JSON-Datei kann deine Mehrwortvariante wie folgt aussehen:

{
     "Light Navy": "light_navy.png"
   },

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

[Julia_Wonder]

Hi!
Thanks for your swift reply. I followed the tutorial exactly and the swatches are visible.
I am not 100% sure where the issue comes from, but when I select a colour variant the entire page jumps down / to the bottom.
I am talking about this page, the other products are the same: https://www.wonderwuzz.com/products/spielsofa?variant=41984669155491
Thanks,
Julia

[Gabe · Accepted solution]

Hey Julia! @Julia_Wonder 

Thanks for the link and it worked fine on my side. Could not reproduce the issue so i'm guessing there's a 🐞 on your side somewhere (as you can see below):

Have a great w-end! 😉

Hier sind einige Schritte, die du durchführen kannst, um das Problem zu beheben:

• Cache und Cookies löschen: Manchmal können veraltete oder beschädigte Cache-Daten und Cookies Probleme auf Websites verursachen. Lösche den Cache und die Cookies in den Browsereinstellungen und versuche dann, die Seite erneut zu laden.
• Browser-Erweiterungen überprüfen: Deaktiviere alle Browser-Erweiterungen, insbesondere solche, die das Verhalten von Webseiten beeinflussen können (wie z.B. Werbeblocker, Skript-Blocker oder ähnliche Tools), und sieh nach, ob das Problem damit behoben wird.
• Shopify-Theme überprüfen: Gehe zu deinem Shopify-Admin-Bereich und überprüfe das verwendete Theme. Manchmal können Probleme durch Updates oder Änderungen an den Themen-Einstellungen entstehen. Überprüfe auch, ob kürzlich Änderungen am Thema durchgeführt wurden und setze diese gegebenenfalls zurück.
• Konflikte mit JavaScript/CSS prüfen: Wenn du benutzerdefinierte Skripte oder Stylesheets zu deinem Shop hinzugefügt hast, könnten diese Konflikte verursachen. Prüfe den Code auf Fehler oder Inkompatibilitäten.
• Reaktion des Ladens bei unterschiedlichen Bildschirmgrößen testen: Öffne deinen Shop auf einem Desktop und verkleinere oder vergrößere das Browserfenster, um zu sehen, ob das Scrollen bei bestimmten Größen funktioniert. Dies könnte auf ein responsives Design-Problem hinweisen.
• Prüfe das Konsolen-Log: Öffne die Entwicklertools in deinem Browser (in der Regel mit F12 oder Rechtsklick und „Untersuchen“ zugänglich) und überprüfe die Konsole auf Fehlermeldungen beim Laden der Seite und beim Versuch zu scrollen.
• Überprüfen auf kürzlich installierte Apps: Manchmal können Shopify-Apps Konflikte verursachen. Überprüfe, ob du kürzlich Apps installiert hast und deaktiviere sie gegebenenfalls temporär.

Wenn das Problem weiterhin besteht, führe bitte alle folgenden Schritte durch um ein lokales Problem auszuschließen. 

Lokale Fehlerbehebungs-Schritte - Um sicherzustellen, dass es sich nicht um ein Problem mit deinem Browser, deinem Gerät oder deiner Internetverbindung handelt, versuche bitte Folgendes:

1. Lösche den Cache und die Cookies (verwende in Chrome die Zeitspanne "Alle Zeiten").
   • Warum: Dadurch werden gespeicherte Informationen aus dem Browser entfernt, die Fehler verursachen.
     Lösung: Lösche regelmäßig Cache und Cookies.
      
2. Stelle sicher, dass die Cookie-Einstellungen des Browsers NICHT auf "Alle Cookies blockieren" eingestellt sind.
   • Warum: Wenn sie "Alle Cookies blockieren", werden einige Apps wie Flow, Scripts, Launchpad oder andere Apps in der Verwaltung möglicherweise nicht richtig angezeigt.
     Lösung: Stelle entweder "Alle Cookies zulassen" oder "Cookies von Drittanbietern im Inkognito-Modus blockieren" ein.
      
3. Versuche es mit einem anderen Webbrowser UND im Inkognito-Modus des Browsers.
   • Warum: Das schließt den Browser oder die Version des Browsers aus, die Fehler verursacht.
     Lösung: Aktualisiere den Browser, deinstalliere ihn und installiere ihn neu.
      
4. Wenn du im Inkognito-Modus immer noch ein Anzeigeproblem hast, überprüfe, ob sie die Browsererweiterungen deaktiviert haben, da diese das Aussehen der Seiten verändern können.
   • Warum: So werden Erweiterungen, die Fehler verursachen, ausgeschaltet.
     Lösung: Lösche ungenutzte Erweiterungen, schalte Erweiterungen aus.
      
5. Vergewissere dich, dass der Webbrowser auf dem neuesten Stand ist (wir unterstützen nicht jeden Browser, aber diese hier).
   • Warum: So vermeidest du, dass die Browserversion zu Fehlern führt.
     Lösung: Aktualisiere den Browser, deinstalliere den Browser und installiere ihn neu, verwende einen unterstützten Browser.
      
6. Probiere ein anderes Gerät aus, z. B. einen anderen Computer oder ein Mobiltelefon.
   • Warum: Dadurch wird das Gerät, das die Fehler verursacht, ausgeschaltet.
     Lösung: Starte das Gerät neu, aktualisiere das Betriebssystem.
      
7. Versuche es mit der Shopify Mobile App.
   • Warum: Dadurch wird verhindert, dass die webbasierte Version von Shopify Fehler verursacht.
     Lösung: Geräteabhängiges Problem, andere Beispiele in dieser Liste können helfen, die Lösung zu finden.
      
8. Probiere eine andere Internetverbindung aus (wechsle z.B. mit deinem Telefon zu einem Mobilfunknetz statt zu WLAN).
   • Warum: Dies schließt eine schwache Internetverbindung oder ein ISP-Problem aus, das zu Fehlern führt.
     Lösung: Internetbasiertes Problem, sprich mit dem Internetanbieter.
      
9. Stelle sicher, dass im Webbrowser keine Pop-ups blockiert werden.
   • Warum: So kannst du verhindern, dass Pop-ups übersehen werden, z. B. wenn für eine Funktion ein neuer Tab geöffnet werden muss.
     Lösung: Wähle "Popups zulassen" im Gerät/Browser. Google den Browser/das Gerät, um passende Lösungen zu finden.
      
10. Vergewissere dich, dass auf deinem Gerät oder Netzwerk keine Firewalls oder VPNs (virtuelle private Netzwerke) aktiviert sind, die Shopify blockieren.
    • Warum: Dadurch wird verhindert, dass Firewalls oder VPNs Fehler liefern. Beispiel: Kaspersky kann Shopify blockieren.
      Lösung: Stelle sicher, dass Shopify nicht blockiert wird, verwende einen anderen Standort für VPN, schalte VPN aus.