Shopify themes, liquid, logos, and UX
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
icon-arrow-down.liquid code below
Slider arrows
Solved! Go to the solution
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;}
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;
}
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;}
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;
}
Thanks to you both, these methods appear to work
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024