Call to action Add to Cart button
Call to action Add to Cart button
Hi,
I was wondering if @zipurman could do us a nice addon to make the "Add To Cart" button shake to invite customer to click and buy. I've seem some shop software that the add to cart button shakes, wiggles, girates (like that female model you see on car dashboard girating) and do a call to action. It's be a nice nifty addon to cart to encourage customer to click and buy.
Cheerio
I was wondering if @zipurman could do us a nice addon to make the "Add To Cart" button shake to invite customer to click and buy. I've seem some shop software that the add to cart button shakes, wiggles, girates (like that female model you see on car dashboard girating) and do a call to action. It's be a nice nifty addon to cart to encourage customer to click and buy.
Cheerio
- zipurman
- PhoenixCart Developer
- Posts: 473
- Joined: Tue Oct 13, 2020 5:20 pm
- : Buy Me A Beverage
- Has thanked: 84 times
- Been thanked: 147 times
Re: Call to action Add to Cart button
It should be an easy one ... will see what I can do.
zipurman
aka Preston Lord
-----------
Happy to help where I can
https://phoenixaddons.com
https://www.youtube.com/zipurman/ ** PHOENIX HOW-TO VIDEOS **
aka Preston Lord
-----------
Happy to help where I can
https://phoenixaddons.com
https://www.youtube.com/zipurman/ ** PHOENIX HOW-TO VIDEOS **
-
- VIP Member
- Posts: 2025
- Joined: Mon Oct 07, 2019 4:39 am
- : Buy Me A Beverage
- Has thanked: 28 times
- Been thanked: 187 times
Re: Call to action Add to Cart button
Thanks @heatherbell that looks very good.heatherbell wrote: ↑Sat Sep 11, 2021 9:54 amUse user.css - https://www.w3schools.com/howto/howto_c ... _image.asp
But I wouldn't know where to start adding that especially as it's a phoenix button I need to wiggle, not an image. Also, the example require that you hover over it to make it wiggle. This is not what I had in mind. It should wiggle once you are on the product page to attract your attention.
No point attracting your attention when you already have mouse hovering over button. In other words, no encouragement needed as you've already taken the step to action yourself.
-
- VIP Member
- Posts: 2025
- Joined: Mon Oct 07, 2019 4:39 am
- : Buy Me A Beverage
- Has thanked: 28 times
- Been thanked: 187 times
Re: Call to action Add to Cart button
It's an example, the possibilities are endless so change it to do whatever you want and target it to whatever you want e.g. change image:hover to .pi-buy-button.
Re: Call to action Add to Cart button
Thanks but no success so far. I dropped the following in my user.css file, jumped to a product page and no change from normal.heatherbell wrote: ↑Sat Sep 11, 2021 2:50 pmIt's an example, the possibilities are endless so change it to do whatever you want and target it to whatever you want e.g. change image:hover to .pi-buy-button.
.pi-buy-button {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake 0.5s;
/* When the animation is finished, start again */
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
So there's possibly something I've not done right.
Re: Call to action Add to Cart button
Thanks @heatherbell I've got a wiggler now. You are the best! And thanks @zipurman fro offering to help. Much appreciated!heatherbell wrote: ↑Sat Sep 11, 2021 2:50 pmIt's an example, the possibilities are endless so change it to do whatever you want and target it to whatever you want e.g. change image:hover to .pi-buy-button.
-
- VIP Member
- Posts: 2025
- Joined: Mon Oct 07, 2019 4:39 am
- : Buy Me A Beverage
- Has thanked: 28 times
- Been thanked: 187 times
Re: Call to action Add to Cart button
If that's what you want.
You might find this less 'visually annoying' but a matter of taste.
Code: Select all
.pi-buy-button {
/* Start pulse animation and make the animation last for 3 seconds */
animation: pulse 3s;
/* When the animation is finished, start again */
animation-iteration-count: infinite;
}
@keyframes pulse
{
0% { transform: scale( 1 ); }
20% { transform: scale( .85 ); }
40% { transform: scale( 1); }
60% { transform: scale( .85 ); }
80% { transform: scale( 1 ); }
100% { transform: scale( 1 ); }
}
Re: Call to action Add to Cart button
Thanks @heatherbell you are right, this is less vusually annoying. And as you say, it's a matter of taste. Some might like the original but I prefer your versionheatherbell wrote: ↑Tue Sep 14, 2021 10:36 amIf that's what you want.
You might find this less 'visually annoying' but a matter of taste.