Venture Theme Product Photo Arrows Color Change

Technical Q&A
, ,

Topic summary

A user needed to change product photo navigation arrows from their default light color to a darker shade (preferably black) in the Venture theme. Previous solutions from a 2021 thread didn’t work for them.

Solution provided:

  • Adjust arrow opacity using CSS targeting .product-single__thumbnails.slick-vertical button.slick-arrow
  • Default arrows have 0.2 opacity (0.7 on hover)
  • Recommended setting opacity to 0.7 (1.0 on hover) for darker appearance
  • Alternative: reverse the values (1.0 opacity, 0.5 on hover)

Implementation:
Add the CSS code to either:

  • Bottom of assets/theme.scss.liquid file
  • Theme Customizer → Theme settings → Custom CSS section

The issue was successfully resolved with this approach.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Stuck on changing the color of the photo arrows to a darker alternative (preferably black).

I attempted to follow the directions and solutions listed in a identical question in 2021, however nothing changed when I implemented both options in the areas directed.

Previous post solutions I have tried:

Picture attached of arrows in question:

Screenshot 2025-10-16 000023

2

CSS can be like this:

.product-single__thumbnails.slick-vertical button.slick-arrow {
  opacity: 0.7;
}

.product-single__thumbnails.slick-vertical button.slick-arrow:hover {
  opacity: 1;
}

By default, these buttons have opacity of 0.2 and hover opacity of 0.7

Can also reverse the action – have opacity of 1 and hover opacity of 0.5…

This can go either to the very bottom of your assets/theme.scss.liquid
or into “Customize”=> Theme settings=> “Custom CSS”

1 Like
3

Thank you so much for the help, this is exactly what I was after!