I enabled the progress bar for our shop some time ago but never really got it to work as intended. When I preview the page for mobile in Chrome, it shows up. However, when I open it on my actual mobile phone, it doesn’t appear the same way - it only displays the default Apple scrollbar, which is practically invisible when using dark mode. For some reason, it just doesn’t seem to work. I checked other shops that managed to get it working, hoping to solve the issue by reviewing parts of their code. But in the end, I’m not familiar enough with coding to actually fix it.
See pictures below. Picture 1 is the preview on Chrome, picture 2 & 3 is the actual view on mobile (dark & light mode).
It sounds like your custom progress bar isn’t rendering correctly on actual mobile devices due to OS-level scrollbar behavior, especially in iOS. Chrome’s mobile preview isn’t always accurate. To fix it, avoid relying on native scrollbars. Instead, use a custom HTML/CSS progress bar element positioned at the top and updated via JavaScript as the user scrolls. Make sure it has a visible background color and fixed positioning. Also, test it using actual mobile devices, not just browser emulators. If you’re using Shopify or similar, ensure scripts are added in the correct theme file.
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
For anyone who happens to see this and has encountered the same issue – I haven’t been able to resolve it yet, but it appears the problem only occurs on iOS devices. I tested it on an Android (Samsung) device, and it worked just fine.
As an alternative solution, I’ve now added arrows to the left and right of the images to indicate that customers can scroll horizontally through them.
Hello @Kai5x
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
I checked and the CSS overflow property is adding the current progress bar, so it won’t show by default on iPhone devices unless you hover or focus on it.
If you want it to display well, you need to change the code to add JS to recalculate the progress bar and display it separately in a separate element.
If I helped you, then a Like would be truly appreciated.
Hope it is clear to you.
Are you referring to this scrollbar? If yes, could you please send me a collaborator request? Because I’ll need to check the code to help you properly.
