Probleme bei der Positionsgebung für Benutzerdefiniertes Liquid

gioacchino20 · ‎12-29-2023

Hallo!👋

Ich bin aktuell mit folgender Situation überfordert:

aktuell nutze ich das Theme Dawn. Ich habe eine Kategorie-Liste erstellt, in der Platz für insgesamt 4 Kategorien in einer Reihe wäre.

Ich habe beabsichtigt nur 3 Kategorien hinzugefügt, da an der 4. Position ein Benutzerdefiniertes Liquid setzen möchte.

Für den Besucher der Website soll es nämlich so aussehen, als gehöre die "4. Kategorie" zu den anderen.

Jedoch hat die 4. Kategorie die Funktion, den Nutzer einen Autoscroll zu geben.

Das heißt der Nutzer bleibt auf derselben Seite, wird aber um (z.B.) 700 Pixel runter gescrollt, da sich dort die angegebene Kategorie bereits befindet.

Mein Problem ist jedoch folgendes:

Dieser Button des Benutzerdefiniertes Liquid passt sich einfach nicht auf den Vollbild-Modus an.

Falls mir da jemand weiterhelfen kann, wäre ich sehr dankbar!

Hier der "Quellcode":

<!DOCTYPE html>
<html>
<head>
<title>Smooth Scroll Button mit Bild</title>
<style>
/* Stil für den Button */
.scroll-btn {
position: absolute;
bottom: 18.5%; /* Abstand vom unteren Bildschirmrand */
right: -5%; /* Abstand vom rechten Bildschirmrand */
padding: auto;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: transparent;
}

/* Stil für das Bild im Button */
.scroll-btn img {
width: 56%; /* Bildgröße wird an den Elterncontainer angepasst */
height: auto; /* Behalte das Seitenverhältnis bei */
vertical-align: middle; /* Zentriere das Bild vertikal im Button */
margin-right: 0px; /* Füge etwas Abstand zum Text des Buttons hinzu */
}

/* Media Query für kleinere Bildschirme wie iPhones */
@media only screen and (max-width: 768px) {
.scroll-btn {
width: 300px;
top: 585px;
left: 112px;
}
}
/* Media Query für Vollbildschirm am PC */
@media only screen and (max-width: 1200px) {
.scroll-btn {
width: 300px;
top: 585px;
left: 300px;
}

</style>
</head>
<body>

<button class="scroll-btn" onclick="scrollDown()">
<img src="https://cdn.shopify.com/s/files/1/0792/4826/1450/files/Kickboxen_Grundausruestung_480x480.png?v=1703...">
</button>

</body>
</html>

Gabe · ‎01-01-2024

Hey @gioacchino20

Danke für den Code und ich sehe im Bild du führst ein sportliches Kickboxing Shop Artikel Shop. Dazu wollte ich zuerst fragen, ob du verschiedene Themes aus unserem Theme Store getestet hast, die das besser als das Dawn Theme können? Klicke mal durch ein paar Demois hier und füge sie zum Shop, um zu schauen, ob die das besser machen!

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!

Es scheint, dass in einem Code der benutzerdefinierte Scroll-Button sich nicht korrekt an den Vollbild-Modus auf einem PC anpasst. Die Ursache hierfür liegt wahrscheinlich in den Media Queries und den definierten Styles für .scroll-btn. Hier ein paar Tipps aber ohne Gewähr (bitte alles weitere mit einem Programmierer besprechen😞

Anpassung der Media Queries: Es scheint, dass die Media Queries für verschiedene Bildschirmgrößen nicht ganz korrekt eingestellt sind. Die Regel für kleinere Bildschirme (max-width: 768px) ist korrekt, aber die für Vollbildschirme am PC (max-width: 1200px) könnte das Problem verursachen. Für Vollbildschirme am PC solltest du eine größere max-width oder gar keine Beschränkung nutzen.
Positionierung des Buttons: Die Position des Buttons wird absolut bestimmt, was bedeutet, dass sie in Bezug auf den nächstgelegenen relativ positionierten Elterncontainer festgelegt ist. Du solltest sicherstellen, dass diese Positionierung auch auf großen Bildschirmen funktioniert.
Responsive Design: Es ist wichtig, dass der Button auf verschiedenen Bildschirmgrößen gut aussieht. Dies kann durch die Verwendung von prozentualen Werten oder flexibleren Einheiten wie vw (Viewport Width) für Breite und vh (Viewport Height) für Höhe erreicht werden.

Ich schlage folgende Änderungen vor aber, wie gesagt, ohne Gewähr:

<!DOCTYPE html>
<html>
<head>
<title>Smooth Scroll Button mit Bild</title>
<style>
/* Stil für den Button */
.scroll-btn {
    position: absolute;
    bottom: 10vh; /* Prozentsatz der Bildschirmhöhe */
    right: 10vw; /* Prozentsatz der Bildschirmbreite */
    padding: auto;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: transparent;
}

/* Stil für das Bild im Button */
.scroll-btn img {
    width: 50px; /* Feste Breite, kann angepasst werden */
    height: auto; /* Behalte das Seitenverhältnis bei */
    vertical-align: middle; /* Zentriere das Bild vertikal im Button */
}

/* Media Query für kleinere Bildschirme wie iPhones */
@media only screen and (max-width: 768px) {
    .scroll-btn {
        bottom: 5vh; /* Kleinerer Abstand vom unteren Rand */
        right: 5vw; /* Kleinerer Abstand vom rechten Rand */
    }
}
</style>
</head>
<body>

<!-- Hier ist der Button mit dem Bild -->
<button class="scroll-btn" onclick="scrollDown()">
    <img src="https://cdn.shopify.com/s/files/1/0792/4826/1450/files/Kickboxen_Grundausruestung_480x480.png?v=1703726258">
</button>

<script>
// Funktion für das sanfte Scrollen um 700 Pixel nach unten
function scrollDown() {
    window.scrollBy({
        top: 700,
        behavior: 'smooth' // Fügt die sanfte Scroll-Animation hinzu
    });
}
</script>

</body>
</html>

Diese Änderungen sollten dafür sorgen, dass der Button sich besser an verschiedene Bildschirmgrößen anpasst. Es ist jedoch wichtig, dass du diese Änderungen in deinem spezifischen Kontext testest und bei Bedarf weiter anpasst.

Um ein responsives Design für einen benutzerdefinierten Scroll-Button zu erreichen, kannst du flexible Grids und Media Queries verwenden. Flexible Grids ermöglichen eine Anpassung des Layouts an verschiedene Bildschirmgrößen, ohne dass jede Gerätegröße spezifisch angesprochen werden muss. Sie erlauben es, CSS-Stile abhängig von der Bildschirmbreite oder anderen Kriterien anzuwenden und so das Layout für verschiedene Bildschirmgrößen zu optimieren. Zum Beispiel können sie für mobile Geräte ein einfaches, einspaltiges Layout erreichen und bei größeren Bildschirmen auf ein mehrspaltiges Layout wechseln. Dabei sollte man relative Einheiten anstelle von festen Pixelgrößen verwenden, um eine bessere Anpassungsfähigkeit zu gewährleisten.

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

Probleme bei der Positionsgebung für Benutzerdefiniertes Liquid

Probleme bei der Positionsgebung für Benutzerdefiniertes Liquid

Community Blog Artikel