Shopify-Themes, Liquid, Logos und ähnliche Themen
Hey,
Wie man im unteren Bild erkennen kann, lässt sich die Mobile Page im Venture Theme leider durch "Zur Seite ziehen" beim bedienen der Website weiter zur Seite ziehen als eigentlich sein sollte. Dadurch entsteht hier rechts ein Balken, der eigentlich nicht sein dürfte und das Shopping-Erlebnis massiv beeinträchtigt. Kann das Design so begrenzt werden, dass es nicht mehr möglich ist die Website zu "verschieben"?
Danke im Vorhinein!
Gelöst! Zur Lösung
Erfolg.
Hey @Julian_HR @mk798 @ChristianDE
Ich habe das etwas nachgehakt in den Entwickler Foren in Github und es scheint dies wird vom #StickNavWrapper
verursacht der keinen overflow
hat im "mobile set". Ein Hotfix wäre es ggf. ganz unten im theme.scss
das folgende Code hinzufügen, aber es klappt nicht immer:
@include media-query($small) {
#StickNavWrapper {
overflow: hidden;
}
}
Hier sollte man die ID verwenden anstatt die Sticky Class
, da die add-to-cart notifications die Class teilen, was das Problem verursacht hat, dass die Message nicht angezeigt wird.
Beispiel im Google Chrome Inspector Tool (Rechtsklick -> Inspect):
Die andere Möglichkeit ist (wie ich weiter oben im Leitfaden sage), dass es vom .notification__message span
verursacht wird, dass es nicht auf Wrap oder Umbruch auf Handy eingestellt ist. Da der Text nicht umgebrochen ist, verursacht er den zusätzlichen schwarzen Balken auf der rechten Seite.
Hier das obige Beispiel mit der eigentlichen Nachricht, die erscheint, nachdem etwas in den Warenkorb gelegt wurde:
Man kann die overflow: hidden;
Lösung implementieren im #StickNavWrapper
aber es ist nicht optimal, da die Message immer noch abgeschnitten wird:
Vor diesem Hintergrund wäre hier eine andere Lösung, den Text auslaufen zu lassen:
.notification__message span {
white-space: pre-wrap;
}
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
Hey @mk798
Gabe aus Shopify hier! Dieser Balken ist eine Art Platzhalter für einen sog. "Modal Cart". Wenn man diesen nicht hat dann ist dieser leerer Balken zu sehen leider. Genau genommen, wird das verursacht durch eine leere "Add to cart"-Nachricht, die Kunden normalerweise sehen, nachdem sie etwas in den Warenkorb gelegt haben. Aus irgendeinem Grund wird ein "Style" verwendet, der dem Browser mitteilt, den Text nicht "umzubrechen". Dadurch geht dieser von der Seite über und verursacht diesen schwarzen Kasten. Wir können ein neues Styling am unteren Rand anwenden, um den Text umzubrechen, so dass die Nachricht in eine neue Zeile verschoben werden kann, anstatt von der Seite zu fallen.
Schicke uns doch ein Ticket und unser Theme Team kann das machen.
VG,
Gabe
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
Hallo,
Wir haben genau das selbe Problem mit dem Rand.
Mit freundlichen Grüßen
Christian
Hey @ChristianDE
Wie oben erwähnt, am besten ein Ticket an uns schicken. Kannst gerne die Ticket Nr. hier dann posten.
VG,
Gabe
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
Hallo,
vielen Dank für ihr hilfreiches Angebot. Wir nehmen es sehr gerne an, jedoch wissen wir nicht, wie man ein solches Ticket erstellt. Können Sie uns das kurz erläutern?
Vielen Dank
Christian
Hey Christian! @ChristianDE
Klicke hier und erstelle ein Ticket. Dann lass mich bitte hier die Ticket Nummer wissen.
Das werde ich dann an die Entwickler weiterleiten.
Gabe
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
Hi Gabe,
ich habe das selbe Problem. Meine Ticketnummer ist: 20095352. Ich hoffe Ihr könnt das so schnell wie möglich beheben.
Viele Grüße
Erfolg.
Hey @Julian_HR @mk798 @ChristianDE
Ich habe das etwas nachgehakt in den Entwickler Foren in Github und es scheint dies wird vom #StickNavWrapper
verursacht der keinen overflow
hat im "mobile set". Ein Hotfix wäre es ggf. ganz unten im theme.scss
das folgende Code hinzufügen, aber es klappt nicht immer:
@include media-query($small) {
#StickNavWrapper {
overflow: hidden;
}
}
Hier sollte man die ID verwenden anstatt die Sticky Class
, da die add-to-cart notifications die Class teilen, was das Problem verursacht hat, dass die Message nicht angezeigt wird.
Beispiel im Google Chrome Inspector Tool (Rechtsklick -> Inspect):
Die andere Möglichkeit ist (wie ich weiter oben im Leitfaden sage), dass es vom .notification__message span
verursacht wird, dass es nicht auf Wrap oder Umbruch auf Handy eingestellt ist. Da der Text nicht umgebrochen ist, verursacht er den zusätzlichen schwarzen Balken auf der rechten Seite.
Hier das obige Beispiel mit der eigentlichen Nachricht, die erscheint, nachdem etwas in den Warenkorb gelegt wurde:
Man kann die overflow: hidden;
Lösung implementieren im #StickNavWrapper
aber es ist nicht optimal, da die Message immer noch abgeschnitten wird:
Vor diesem Hintergrund wäre hier eine andere Lösung, den Text auslaufen zu lassen:
.notification__message span {
white-space: pre-wrap;
}
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
Perfekte Lösung, Gabe Danke!
Super freut mich!
VG,
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
Hey Gabe,
ich benutze das Venture Theme für meinen neuen Shopify Shop und habe das gleiche Problem in der mobilen Ansicht. Es wird dadurch verursacht, dass die Nachricht, dass das Produkt in den Warenkorb gelegt wurde, nicht umgebrochen wird. Ich bin mir allerdings nicht sicher wie ich den zweiten Teil deiner Lösung implementieren kann. Meine Ticketnummer lautet: 22813712
Vielen Dank schon mal für deine Hilfe!
Kim
Edit: Der englischsprachige Support hat mir bereits geantwortet und eine weitere Lösung bereitgestellt. Damit hat es auch funktioniert:
@media only screen and (max-width: 749px) {
.notification__message span {
white-space: initial !important;
}
}
Hey @Kim_DE
Ah gut, freut mich, dass das geklappt hat! Diese Lösung wird auch andere helfen können!
VG,
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
Shopify unterstützt die weltweit innovativsten Marken und Unternehmer:innen. Um Unterne...
By SarahF_Shopify Mar 25, 2024Was ist ein kleines Element eines Shopify Shops mit großer Wirkung? Ein Element ganz we...
By Kai Mar 14, 2024Was genau ist POD? Von T-Shirts bis hin zu Plakaten, Kaffeetassen, Wandmatten, alles was m...
By Kai Feb 29, 2024