CE Phoenix Cart Forum

Posted: **Fri Sep 10, 2021 7:50 pm**

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

Posted: **Fri Sep 10, 2021 8:54 pm**

It should be an easy one ... will see what I can do.

Posted: **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

Posted: **Sat Sep 11, 2021 1:38 pm**

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

Posted: **Sat Sep 11, 2021 1:41 pm**

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.

Posted: **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.

Posted: **Sat Sep 11, 2021 3:33 pm**

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.

Posted: **Sat Sep 11, 2021 4:18 pm**

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

I've got a wiggler now. You are the best! And thanks @zipurman fro offering to help. Much appreciated!

Posted: **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.

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 ); }
}

Posted: **Wed Sep 15, 2021 4:23 pm**

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

CE Phoenix Cart Forum

Call to action Add to Cart button

Call to action Add to Cart button

Re: Call to action Add to Cart button

Re: Call to action Add to Cart button

Re: Call to action Add to Cart button

Re: Call to action Add to Cart button

Re: Call to action Add to Cart button

Re: Call to action Add to Cart button

Re: Call to action Add to Cart button

Re: Call to action Add to Cart button

Re: Call to action Add to Cart button