Hi there, I am wanting to change the colour of the arrows to highlight them a little more. the current feedback is that they didn’t know it was a carousel because you cant see the arrows properly.
Cheers
Topic summary
A user seeks to change the arrow colors on their Pipeline theme carousel to improve visibility, as customers aren’t noticing the carousel functionality.
Solutions Provided:
Multiple developers offered CSS code snippets to modify arrow colors:
- Add custom CSS to the theme.css file
- Use
.flickity-buttonselectors withfillandbackgroundproperties - Insert HEX color codes to customize appearance
Current Status:
The user successfully implemented one solution and changed the arrow color using HEX codes. However, only the right arrow changed color while the left arrow remained unchanged. The user considers this a minor issue but would appreciate an easy fix if available.
Technical Details:
The solution involves editing theme.css in the theme code editor and targeting Flickity carousel button elements with CSS overrides using !important flags.
Hi @DumbleCo
Could you share your store URL to check?
@DumbleCo - can you please share the URL and what color do you want?
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
}
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly
Hello @DumbleCo
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.
button.flickity-button.flickity-prev-next-button.next {
background: #000 !important;
color: #fff !important;
}
