A user reports an issue with the Featured Product section’s image slider on their Shopify SHOWCASE theme homepage. When clicking the swiper navigation arrows, the page refreshes and jumps to the top—but only on certain computers, not the user’s own devices.
Proposed Solutions:
</html> tag to prevent default click behavior on swiper buttons.</head> tag instead, using document.querySelector and addEventListener to handle click events.Current Status:
The issue remains unresolved. The effectiveness of the second code snippet has not been confirmed, and the discussion appears ongoing without a verified fix.
Hi there!
I have a problem with the Featured Product section on the bottom of the homepage (SHOWCASE theme). On some computers, when clicking the swiper button / arrow on the Image Slider, it seems to refresh the page and jump to the top of the homepage. It doesn’t happen on any of my computers, but on my clients’ it does. Any ideas how to solve?
https://www.loom.com/share/96988b9c4694449dba06782aefa4a6da
password: skeach
Hi @HenrietteVB
You can follow these steps:
2, Find the theme.liquid file and add this code before the . tag
<script>
$('a.swiper-button-prev').click(function(e) {
e.preventDefault();
});
$('a.swiper-button-next').click(function(e) {
e.preventDefault();
});
</script>
We hope this can help you.
Hi @HenrietteVB
You can try adding this code before the . tag:
document.querySelector('a.swiper-button-prev').addEventListener("click", function(e) {
e.preventDefault();
});
document.querySelector('a.swiper-button-next').addEventListener("click", function(e) {
e.preventDefault();
});
Hope this can help you.