Solved

how to disable 3d lift animation on add to cart

ZephyrShop
Excursionist
50 0 4

Screenshot from 2024-02-07 16-58-08.png

How to stop 3d lift website animation from affecting my add to cart button

 

Thanks.

Screenshot from 2024-02-07 17-00-17.png

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1812 511 386

This is an accepted solution.

Hey @ZephyrShop,

 

I have good news and bad news. 

 

Good news: The animation can be disabled and the animation that runs every X seconds is still running.

Bad news: The animation when hovering the button will completely be gone. You cannot choose what animation to stop on hover, you also cannot choose what animation to have on hover. That's why when you hover, either all the animations run, or none of it run.

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.animate--hover-3d-lift .button.product-form__submit {
    transition: none !important;
}


.animate--hover-3d-lift .button.product-form__submit:hover {
    transform: rotate(0) !important;
    box-shadow: none !important;
    
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1707326966499.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 3 (3)

ThePrimeWeb
Shopify Partner
1812 511 386

Hey @ZephyrShop,

 

What happens when you click None? 
Or else I'm assuming you want it everywhere, but not on the add to cart button

 

Can you share the link to the store?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
ZephyrShop
Excursionist
50 0 4

Yes i want the effect everywhere just except the add to cart button because i have one animation already and it looks wierd with another one

https://zephyrshop.org/

ThePrimeWeb
Shopify Partner
1812 511 386

This is an accepted solution.

Hey @ZephyrShop,

 

I have good news and bad news. 

 

Good news: The animation can be disabled and the animation that runs every X seconds is still running.

Bad news: The animation when hovering the button will completely be gone. You cannot choose what animation to stop on hover, you also cannot choose what animation to have on hover. That's why when you hover, either all the animations run, or none of it run.

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.animate--hover-3d-lift .button.product-form__submit {
    transition: none !important;
}


.animate--hover-3d-lift .button.product-form__submit:hover {
    transform: rotate(0) !important;
    box-shadow: none !important;
    
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1707326966499.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website