Hello! My website is www.shopblacksalt.com and I’m using the Fashionopolism theme (with liquid/sections) and I would like to see if I can change the background color that appears when you zoom in on an image. Currently, when you click the “zoom” button on an image, it opens up the image with a white background. I’d prefer it to be a semi-transparent black color if possible, to go along more with the darkmode theme of my web site.
Additionally, the arrow and X icons on the buttons are darkly colored and not visible against the black button colors. I’m looking to change the color of the icons when not hovering to #C58C10 (the icons, not the buttons themselves) When hovering, the current color white is ok.
Thank you so much in advance. I appreciate it! - Taylor
Hello @shopblacksalt
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:
.pswp__button svg {fill: #C58C10 !important; }
Hope it helps.
1 Like
Thank you, @EFOLI-Emilia7 that fixed the button icon issue! On the second part of my question, is it possible to change the background color (the color around the photos) when zooming in on products to 50% transparent black? It’s currently white, as shown in screenshot. Thank you!
Hello @shopblacksalt
please share the specific product URL and password(If it is password protected).
So that I can check and suggest you a solution. Also, share a video of your issue if possible.
Thank you
Hi @EFOLI-Emilia7 .
Here is an example product link: https://www.shopblacksalt.com/collections/im-with-the-band/products/mariksa-velvet-turban-headband and posted screenshots of the process below - step 1: zooming in on photo; step 2: showing zoomed in window with white background. Is it possible to make that background color around the photo when zooming in on an image a transparent black instead of solid white? Thank you!
