how to disable 3d lift animation on add to cart

ZephyrShop · ‎02-07-2024

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

Thanks.

ThePrimeWeb · ‎02-07-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎02-07-2024

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
Check out our interview with Shopify!

ZephyrShop · ‎02-07-2024

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 · ‎02-07-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

how to disable 3d lift animation on add to cart