How can I make slideshow arrows more visible?

Store Design
, ,
1

Just wondering how I can change the colours of my arrows on the side of the slideshow. Customers are finding them hard to see, so wanting to make them more obvious for customers. Thankyou in advance.

2

Hi @DumbleCo ,

This is David at SalesHunterThemes.

Thank you for your question.

Please share your store URL, page URL and also password (if your store has one) so we can help you.

3

Hi @DumbleCo

Could you share your store URL?

4

https://dumblecollective.com.au/

5

Hi, you are using SVG icons for next and prev buttons so you will need to change icons to make themmore obvious

Screenshot 2023-09-05 at 11.23.50.png
Screenshot 2023-09-05 at 11.23.50.png1805Ă—1002 502 KB

6

How do I change them?

7

Hi @DumbleCo

I guess it has option in your theme customize in Slideshow section

8

Would you know where abouts the option would be? I can’t see any option to customize it.

9

I’m wanting to change the arrows of the “Collection” slide show.

10

Hi @DumbleCo ,

This is David at SalesHunterThemes.

Thank you for your question.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder ->theme.css file.

Add this following code at the bottom of page.

.custom-prev-next-button.previous {
  cursor: url(https://cdn.shopify.com/s/files/1/0559/9825/1091/files/icons8-left-arrow-50.png?v=1693888501) 5 11,auto !important;
}

.custom-prev-next-button.next {
 cursor: url(https://cdn.shopify.com/s/files/1/0559/9825/1091/files/icons8-next-page-50.png?v=1693888501) 15 11,auto !important;
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

11

Hi thankyou that seemed to work but for the incorrect slide.

I’m wanting to change the arrows on the “collection” pipeline if you scroll down on the front page.

1 Like
12

I see, I made the button size larger and the box shadow clearer.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → Theme.css file.

Add this following code at the bottom of page.

#insta-feed .slider-arrow, .instafeed-shopify .slider-arrow {
    height: 44px !important;
    width: 44px !important;
    line-height: 44px !important;
    font-size: 26px !important;
    box-shadow: 0 2px 10px rgb(54 54 54/15%) !important;
}

Here is result:

David_SHT_0-1693890102906.png
David_SHT_0-1693890102906.png5018Ă—1008 955 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

13

Sorry, but its the pipeline before that one. Its under the label pipeline.

Screen Shot 2023-09-05 at 2.06.57 pm.png
Screen Shot 2023-09-05 at 2.06.57 pm.png2870Ă—1348 430 KB

14

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → Theme.css file.

Add this following code at the bottom of page.

#shopify-section-template--14894077280337__46714210-b92c-4347-a45c-c3bc44c47481 [data-carousel] .flickity-button {
    background: #000;
    color: #fff;
}

Here is result:

David_SHT_0-1693892669188.png
David_SHT_0-1693892669188.png2806Ă—1054 352 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

15

Hi @DumbleCo ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at the bottom of the file → Save

.flickity-button flickity svg{
fill:red !important
}
//if you want change the back ground you can try add
.flickity-button{
background: color 
}

PageFlyOliver_0-1694058587772.png

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly