Product Slider - Swiper Button refreshes home page on some screens

Topic summary

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:

  • A support representative initially suggested adding jQuery code to the theme.liquid file before the </html> tag to prevent default click behavior on swiper buttons.
  • This first solution caused images to disappear entirely.
  • A second solution was offered: adding similar JavaScript code before the </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.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.

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

https://www.bloomandwolf.com/

password: skeach

Hi @HenrietteVB

You can follow these steps:

  1. Online StoreThemesEdit code:

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.

This doesn’t work - it hides the images entirely..

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.