Solved

Changing Colour of SVG Arrows in Venture Theme on Product Page

rthwaite
Visitor
2 0 2

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

icon-arrow-down.liquid code below

rthwaite_1-1620796936080.png

Slider arrows

rthwaite_2-1620797006523.png

 

 

 

 

Accepted Solutions (2)

Jasoliya
Shopify Expert
4808 621 1217

This is an accepted solution.

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;}

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Hardik29418
Shopify Partner
2859 407 1073

This is an accepted solution.

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;
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

View solution in original post

Replies 3 (3)

Jasoliya
Shopify Expert
4808 621 1217

This is an accepted solution.

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;}

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

Hardik29418
Shopify Partner
2859 407 1073

This is an accepted solution.

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;
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
rthwaite
Visitor
2 0 2

Thanks to you both, these methods appear to work