How can I change the color of my magnifying glass zoom button?

Store Design
,

Topic summary

A user wants to change the color of the magnifying glass zoom button that appears in the top left corner of product images to white.

Proposed Solution:

  • Navigate to: Online Store → Themes → Actions → Edit Code
  • Locate the theme.liquid file
  • Add custom CSS code before the closing </body> tag

Status: A solution has been provided with step-by-step instructions and code snippets (images appear to show the specific CSS markup needed). The discussion appears resolved pending user implementation.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I want to change the color of the button you click on to zoom in on pictures ( the magnifying glass in the top left corner of pictures). How can I change it to white?

https://taneraskin.com/products/keratosis-pilaris-body-cream

Best,

Isa

2

Hi @isabellemaria

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

PageFlyVictor_0-1681656480833.png
PageFlyVictor_0-1681656480833.png1600×794 164 KB

PageFlyVictor_1-1681656480830.png
PageFlyVictor_1-1681656480830.png1600×777 194 KB

Hope this answer helps.

Best regards,

Victor | PageFly

1 Like