Hello! My web site is www.shopblacksalt.com. I am using the Fashionopolism Theme with sections/liquids and am looking to change the color of the directional arrows and zoom icon on the product page. The buttons are black, and when hovering, the icons are white, but the icons when not hovering are dark grey. I’d love them to be color #C58C10 so they can easily be seen.
Additionally, my social media links at the bottom of the product page are black and obviously not noticeable with my background. I’d love to change those to color #C58C10 as well. Thank you for any help in advance! - Taylor
@shopblacksalt Kindly add this code to your stylesheet.css file.
Navigate to online store >> Click edit theme code.
Now find stylesheet.css and paste the following code:
.swatches__form--label:hover{background: #C58C10 !important;}
.product__share-icons svg{fill: #C58C10 !important;}
.zoom_btn svg{fill: #C58C10 !important;}
.flickity-button-icon{fill: #C58C10 !important;}
.product__section-images .flickity-prev-next-button {
background-color: #c58c10 !important;
opacity: 1;
}
.product__section-images .zoom_btn{
background-color: #c58c10 !important;
}
@shopblacksalt
Add this code in the bottom of the stylesheet.css
That worked perfectly, fixing both the icon colors and the social media icons. Thank you so much @eFoli-Marvic
I do have one more question - when clicking the zoom button and the window opens for zoom capabilities, the icons on the buttons are dark and not visible against the black buttons and I’d love to also change those (the icons) to #C58C10 when not hovering. Thank you in advance!
Taylor
