How To Make Slider and Slideshow Buttons More Clear?

iwin
Excursionist
51 0 8

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: 

help.png

Replies 11 (11)

Dan-From-Ryviu
Shopify Partner
7566 1461 1459

Hi @iwin 

Could you share your page URL to check?

- Helpful? Like or Accept solution! - Buy me a codefee 🙂
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

iwin
Excursionist
51 0 8

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
Shopify Partner
7566 1461 1459

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>

 

 

- Helpful? Like or Accept solution! - Buy me a codefee 🙂
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

iwin
Excursionist
51 0 8

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:sss.png

Dan-From-Ryviu
Shopify Partner
7566 1461 1459

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

- Helpful? Like or Accept solution! - Buy me a codefee 🙂
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

iwin
Excursionist
51 0 8

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: 

 

9.png

iwin
Excursionist
51 0 8

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
Shopify Partner
7566 1461 1459

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>

 

- Helpful? Like or Accept solution! - Buy me a codefee 🙂
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

iwin
Excursionist
51 0 8

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
Shopify Partner
7566 1461 1459

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

- Helpful? Like or Accept solution! - Buy me a codefee 🙂
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

iwin
Excursionist
51 0 8

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: 

Screenshot 2024-02-16 224448.png