How can I change the arrow color and background on my product page image gallery?

Store Design
1

Hi! I need help resolving an issue with my Canopy theme, the image gallery arrow color and background make it hard for the user to see. How can I change the background color from grey to black or one of my theme colors (5B136E)? Thanks!

Website: www.minershop.com

![screenshot.png|1236x894](upload://cyrjBiiquigZmModbAktwjvdfOX.jpeg)
2

Hi @vcole1290

You can try this way:

  1. Online Store → Themes → Edit code:

view (24).png
view (24).png1802×841 101 KB

  1. Find the styles.css file and add this code at the end of the file:
.collections-section{
  background-color: #5B136E;
}
@media (min-width: 768px){
  .collections-section{
    padding-top: 4.5em !important;
    margin-top: 0 !important;
 }
}

Your background color will be changed to make it easier to see.

We’re sorry we couldn’t find the part you want to change, can you be more specific about where it is?

3

Hi! Sorry, I can be more specific. If you go to a product (e.g. https://www.minershop.com/products/aragonite-tarnowitzite-morocco ) and click on the images to open up the gallery, that’s where you can see the arrows/background and how the arrows blend in with the icon background. Does that help?

4

Hi @vcole1290

This is BSS Commerce - Full-service eCommerce Agency. We’d love to suggest you this solution:

Add this code at the end of styles.css, as below:

#cboxContent button svg {
    fill: #5B136E !important;
}

And here is the final result:

view (30).png
view (30).png1264×917 182 KB

Hope this can help you.

Kind regards,

5

That worked PERFECTLY! Thank you so much!!

6

We’re happy to see that our suggestion helped you solve the issue. Can you kindly give us a like and mark it as a solution? This can be a reference for other merchants if they have an issue like you.

Thanks in advance.