Hey @KnarfReyab01
Einen Popup kannst du entweder mit einer Popup App implementieren und du findest einige im App Store mit dem Suchwort "Popup" - in jeder App einfach in die Demo klicken.
DIY - aber bitte in einer Theme-kopie zuerst testen
Du kannst einen "Hinweistext" über dem Theme Spracheditor im Cart oder im Checkout einpflegen (kann dir gerne zeigen wie).
Du kannst auch entweder einen Popup oder einen Tooltip oder einen Modal Lightbox in die Seite ein-coden über dem Liquid Code der Cart Page mit etwas JavaScript (Checkout ist ja gesperrt).
Beispiel Popup
Gehe in das theme.liquid und füge den folgenden JavaScript code direct vor dem </body> Tag:
<script>
document.addEventListener('DOMContentLoaded', function() {
var message = "Your custom message here";
alert(message);
});
</script>
Der obige Code zeigt ein Popup-Fenster mit deiner benutzerdefinierten Nachricht an, wenn die Warenkorb-Seite geladen wird. Du kannst ein anderes JavaScript-Plugin oder eine andere Library verwenden, um das Aussehen und das Verhalten des Popups bei Bedarf anzupassen.
Hier ist eine modifizierte Version des Codes, die einen Closing-Button enthält:
<div id="myModal" style="display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);">
<div style="background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%;">
<span id="closeBtn" style="color: #aaaaaa; float: right; font-size: 28px; font-weight: bold;">×</span>
<p>Your custom message here</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var modal = document.getElementById("myModal");
var closeBtn = document.getElementById("closeBtn");
modal.style.display = "block";
closeBtn.onclick = function() {
modal.style.display = "none";
}
});
</script>
Dieser Code verwendet HTML, CSS und JavaScript, um einen modalen Dialog mit einer benutzerdefinierten Nachricht und einer Schaltfläche zum Schließen zu erstellen. Der modale Dialog wird angezeigt, wenn die Cart Page geladen wird, und kann mit einem Klick auf die Schaltfläche "Schließen" geschlossen werden.
Du kannst das Aussehen und das Verhalten des modalen Dialogs anpassen, indem du den HTML-, CSS- und JavaScript-Code nach Bedarf änderst. Beispiel: anstatt einen Popup kannst du auch einen Modal Lightbox oder einen Tooltip verwenden der beim Hover erscheint.
Die Resource die ich immer verwende ist die w3schools.com Resource (siehe mehr Popup-spezifische Codes hier und Tooltips hier und Modal Lightboxes hier).
Diese können die UX deines Shops so richtig verbessern ohne die Page Loading Speeds negativ zu beeinflussen!
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
