Changing Colour of SVG Arrows in Venture Theme on Product Page

Store Design
1

Hello!

I have a problem with changing the colours of the SVG arrows in the Venture theme, on the product pages.

Currently, the colour is very light, making it hard for customers to change between images easily (see below)

I have found the icon-arrow-up.liquid and icon-arrow-down.liquid snippets - changing the fills to the desired colour does not appear to work (screenshot of code below).

I have also found the slider arrows section of theme.scss.liquid and changed the .icon{ fill to the desired colour #213458, it appears this has worked when the user highlights the arrow, but this doesn’t help with discoverability. (screenshot of code below)

Help!

EG: https://yoproessentials.com/products/running-socks-multipacks-x3-x11

rthwaite_0-1620796751524.png
rthwaite_0-1620796751524.png1286×719 134 KB

icon-arrow-down.liquid code below

rthwaite_1-1620796936080.png

Slider arrows

rthwaite_2-1620797006523.png
rthwaite_2-1620797006523.png426×332 6.8 KB

1 Like
2
  1. Go to Online Store->Theme->Edit code
  2. Asset->theme.scss Or theme.css-> paste bellow code in bottom of file
.product-single__thumbnails.slick-initialized .slick-next .icon, .product-single__thumbnails.slick-initialized .slick-prev .icon{fill:black;}
1 Like
3

Hello,

Welcome to the shopify Community.

Please Go to Online Store → Themes → Edit code → Assets → theme.scss.liquid and paste this code at the end of this file.

.icon-arrow-down path, .icon-arrow-down, .icon-arrow-up, .icon-arrow-up path {
fill: #213458 !important;
}
1 Like
4

Thanks to you both, these methods appear to work

1 Like