Focal Theme: How To Stop The Cursor From Changing On Product Image Hover?

Technical Q&A
1

On the Focal theme when you hover your mouse over a product page image, the cursor changes to arrows. I find this quite ugly and it seems to make visitors confused (like their mouse has disappeared)

Is there any code that can be added or changed to keep the cursor from changing?

Thanks!

2

Hi @hdkingy

Can I take a look on your product images? would you mind to share the URL? thanks!

3

Of course,

https://pondstream.com/products/bearon-aquatics-powerhouse-surface-aerator

4

Are you sure do you like to take it out? It an indication that you can swipe left n right. But if want to, check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.flickity-enabled.is-draggable:not(.is-hovering-right):not(.is-hovering-left) .flickity-viewport, .flickity-enabled.is-draggable:not(.is-hovering-right):not(.is-hovering-left) .flickity-viewport.is-pointer-down,
.flickity-enabled.is-hovering-right .flickity-viewport, .flickity-enabled.is-hovering-left .flickity-viewport {
  cursor: pointer !important;
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

Worked perfect, thank you so much!

6

Welcome,

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!