Call to action Add to Cart button

Ask the community for help and support.
shopify
Posts: 54
Joined: Tue Mar 30, 2021 3:36 pm
Has thanked: 23 times
Been thanked: 3 times

Call to action Add to Cart button

Post by shopify »

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 :)
User avatar
zipurman
PhoenixCart Developer
PhoenixCart Developer
Posts: 470
Joined: Tue Oct 13, 2020 5:20 pm
Has thanked: 84 times
Been thanked: 147 times

Re: Call to action Add to Cart button

Post by zipurman »

;) 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 **
Image
heatherbell
VIP Member
VIP Member
Posts: 1996
Joined: Mon Oct 07, 2019 4:39 am
Has thanked: 26 times
Been thanked: 175 times

Re: Call to action Add to Cart button

Post by heatherbell »

shopify wrote: Fri Sep 10, 2021 7:50 pm "Add To Cart" button shake
Use user.css - https://www.w3schools.com/howto/howto_c ... _image.asp
shopify
Posts: 54
Joined: Tue Mar 30, 2021 3:36 pm
Has thanked: 23 times
Been thanked: 3 times

Re: Call to action Add to Cart button

Post by shopify »

zipurman wrote: Fri Sep 10, 2021 8:54 pm ;) It should be an easy one ... will see what I can do.
Thanks very much @zipurman
shopify
Posts: 54
Joined: Tue Mar 30, 2021 3:36 pm
Has thanked: 23 times
Been thanked: 3 times

Re: Call to action Add to Cart button

Post by shopify »

heatherbell wrote: Sat Sep 11, 2021 9:54 am
shopify wrote: Fri Sep 10, 2021 7:50 pm "Add To Cart" button shake
Use user.css - https://www.w3schools.com/howto/howto_c ... _image.asp
Thanks @heatherbell that looks very good.

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.
heatherbell
VIP Member
VIP Member
Posts: 1996
Joined: Mon Oct 07, 2019 4:39 am
Has thanked: 26 times
Been thanked: 175 times

Re: Call to action Add to Cart button

Post by heatherbell »

shopify wrote: Sat Sep 11, 2021 1:41 pm a phoenix button I need to wiggle, not an image. Also, the example require that you hover over it to make it wiggle.
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.
shopify
Posts: 54
Joined: Tue Mar 30, 2021 3:36 pm
Has thanked: 23 times
Been thanked: 3 times

Re: Call to action Add to Cart button

Post by shopify »

heatherbell wrote: Sat Sep 11, 2021 2:50 pm
shopify wrote: Sat Sep 11, 2021 1:41 pm a phoenix button I need to wiggle, not an image. Also, the example require that you hover over it to make it wiggle.
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.
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.

.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.
shopify
Posts: 54
Joined: Tue Mar 30, 2021 3:36 pm
Has thanked: 23 times
Been thanked: 3 times

Re: Call to action Add to Cart button

Post by shopify »

heatherbell wrote: Sat Sep 11, 2021 2:50 pm
shopify wrote: Sat Sep 11, 2021 1:41 pm a phoenix button I need to wiggle, not an image. Also, the example require that you hover over it to make it wiggle.
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.
Thanks @heatherbell :D I've got a wiggler now. You are the best! And thanks @zipurman fro offering to help. Much appreciated!
heatherbell
VIP Member
VIP Member
Posts: 1996
Joined: Mon Oct 07, 2019 4:39 am
Has thanked: 26 times
Been thanked: 175 times

Re: Call to action Add to Cart button

Post by heatherbell »

shopify wrote: Sat Sep 11, 2021 4:18 pmI've got a wiggler now.
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 ); }
}
shopify
Posts: 54
Joined: Tue Mar 30, 2021 3:36 pm
Has thanked: 23 times
Been thanked: 3 times

Re: Call to action Add to Cart button

Post by shopify »

heatherbell wrote: Tue Sep 14, 2021 10:36 am
shopify wrote: Sat Sep 11, 2021 4:18 pmI've got a wiggler now.
If that's what you want.
You might find this less 'visually annoying' but a matter of taste.
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 version :D
Post Reply