Hello, i would like to make the Slider and Slideshow buttons more noticeable. It also doesn’t appear unless it’s being interacted with - So if there’s a way to solve that too, that would be perfect. Picture demonstrates:
Topic summary
-
Goal: Make slideshow and product slider navigation buttons more noticeable and always visible; currently they only appear on interaction.
-
Context: Shopify storefront. Slideshow exists only on the homepage in mobile view. Product sliders (carousels) are used on the homepage instead of a grid and are relevant for both mobile and desktop. Store URL was shared.
-
Actions taken: Helper provided code to paste under in theme.liquid. Initial insertion didn’t change anything; after updating the code to target the mobile slideshow, the change worked and the slideshow buttons became clearer.
-
Follow-up request: Apply similar improvements to the homepage product slider (make buttons larger/clearer and always visible, and better indicate swipeability). The user asked whether changing the slideshow selector (e.g., .homepage-slideshow) is needed for the slider.
-
Outcome: Slideshow on mobile successfully updated. Product slider adjustments remain unresolved.
-
Status: Open. Awaiting specific code/instructions for the product slider (desktop and mobile).
-
Notes: Code snippets and screenshots are central to understanding the changes and desired UI behavior.
Hi @mcgifts3
Could you share your page URL to check?
1 Like
Hello @Dan-From-Ryviu
this is the URL, the slideshow is only available on phone. But the Slider is relevant for both.
many thanks
Please add this code below to your theme.liquid file under in Online Store > Themes > Edit code
Hey Dan, thankyou for the code but unfortunately after attempting a few times nothing had changed. I have google tag code after so tried it in a few positions (also im useless with code) .here is a picture of the code in the area:
Just create a new line after and paste the code in there, save your file, reload your product page and check again.
Hello Dan, i think i had done it correctly but it didnt change anything unfortunately. Just to verify, im wanting the slideshow/slider button to be a lot more clear and for it to always be visible if possible as it doesnt appear unless there’s interaction. thankyou for your time so far, the picture shows how i entered the code:
Also, just to note - the slideshow / slider is on the homepage, not on the individual product page. Unsure if this changes anything but just making sure
Please update the code to this to make it change on the slideshow in mobile view only
1 Like
Hey Dan, thankyou this worked perfectly for my slideshow.
Is it possible for my Slider too? Do i change the .homepage-slideshow code at all?
Slider? Could you explain a little more about your question?
Hey Dan, some of my products on my homepage are used using Slider rather than Grid - so people can swipe to see more products.
But the problem is that for some people it may be hard to notice it’s swipe-able. The buttons are small on mobile.
If there’s a way to make the sider buttons a lot more clear like the slideshow, that would be fantastic.
Also, if it’s possible to make the buttons always clear instead of only appearing once slider is being interacted with… i would be super thankful.
Picture is to demonstrate:
