A user reports that navigation arrows for product image galleries become invisible when product images have transparent backgrounds, as the arrows default to white. This creates a usability issue on product pages.
Proposed Solutions:
Two community members offered CSS-based fixes:
Solution 1: Add custom CSS code to the theme.liquid file, placed above the </body> tag. The responder included a screenshot showing the expected result.
Solution 2: Apply CSS targeting .media-gallery--carousel slideshow-arrows .slideshow-control with color: #000; to change arrow color to black.
Status: The issue remains unresolved as the original poster hasn’t confirmed whether either solution worked. Both approaches aim to override the default white arrow color to ensure visibility against transparent backgrounds.
The arrows to choose previous/next image on the product page, becomes white, when the background on the image is transparent. It makes it impossible to see the arrow. Like on this page: https://smashtennis.dk/products/bog-speed-ball-in-practice
I have been trying to change various things in the base.css, but havn’t had any luck finding a fix. Can you help me out?
Hey @RasmusF
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hello @RasmusF ,
Try to add this css
.media-gallery--carousel slideshow-arrows .slideshow-control {
color: #000;
}
Regards
Guleria