How To Make Slider and Slideshow Buttons More Clear?

mcgifts3 · ‎02-14-2024

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:

Dan-From-Ryviu · ‎02-15-2024

Hi @mcgifts3

Could you share your page URL to check?

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

mcgifts3 · ‎02-15-2024

Hello @Dan-From-Ryviu

https://mycustomgifts.com/

this is the URL, the slideshow is only available on phone. But the Slider is relevant for both.

many thanks

Dan-From-Ryviu · ‎02-15-2024

Please add this code below to your theme.liquid file under <head> in Online Store > Themes > Edit code

<style>
@media (max-width: 767px) {
.homepage-slideshow .flickity-prev-next-button, 
.shopify-section--testimonials .flickity-prev-next-button {
    width: 16% !important;
}
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

mcgifts3 · ‎02-15-2024

Hey Dan, thankyou for the code but unfortunately after attempting a few times nothing had changed. I have google tag code after <head> so tried it in a few positions (also im useless with code) .here is a picture of the code in the area:

Dan-From-Ryviu · ‎02-15-2024

Just create a new line after <head> and paste the code in there, save your file, reload your product page and check again.

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

mcgifts3 · ‎02-15-2024

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:

mcgifts3 · ‎02-15-2024

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

Dan-From-Ryviu · ‎02-15-2024

Please update the code to this to make it change on the slideshow in mobile view only

<style>
@media (max-width: 767px) {
#shopify-section-template--16207534981369__f01db78e-1fa5-41f4-933f-0bafbbc96e07 .homepage-slideshow .flickity-prev-next-button {
    width: 16% !important;
}
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

mcgifts3 · ‎02-15-2024

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?

Dan-From-Ryviu · ‎02-15-2024

Slider? Could you explain a little more about your question?

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

mcgifts3 · ‎02-16-2024

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:

How To Make Slider and Slideshow Buttons More Clear?

How To Make Slider and Slideshow Buttons More Clear?

Community Blog Articles