How to change the default pointer cursor when hovering over a product on a product page (Dawn theme)

[lilyioti]

I want to know how to change the default pointer cursor that appears when hovering over my product images on my product page to an alternative zoom icon I’ve found (.svg)

Note, I am not using zoom over hover- and instead using the standard click to zoom pop out window. 

[BlackCro]

If you're using the Open Lightbox zoom you're looking for .product__media-toggle::after inside section-main-product.css and you'd need to replace it with the below code where pointer.svg is the name of your file. Upload the file into the Asset folder. 

.product__media-toggle::after {
  content: '';
  cursor: 'pointer';

Replace with 

cursor: url('pointer.svg'), auto;

If you're using Click and Hover the code is the same but it would need to be under .image-magnify-hover for zoom in and .image-magnify-full-size for zoom out.

Hope this helps

Simon 

[lilyioti]

Hi Simon, 

Thanks for reaching out. I've attempted to do this but have not been successful- is there something I'm missing? (I have linked the .svg via the files link on Shopify, and I've also uploaded it as an asset) - .svg name; Zoom Plus

[BlackCro · Accepted solution]

You don't need to input the URL, just the file name as below

cursor: url('Zoom Plus.svg'), auto;

Let me know if this resolves the problem 👍

[lilyioti]

Unfortunately it did not work, I even tried with an underscore instead of a space to see if that did anything but nothing.
I want to restate that by default it was the magnifying glass icon and not the pointer (if that changes anything).

[lilyioti]

Hi Simon, update: it ended up working! I had not checked all day until now but it must have taken a couple minutes (which I did not see as I was away from the computer) 

Do you know how to change the default magnifying glass for zoom out?