Call to action Add to Cart button

[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

[zipurman]

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

[heatherbell]

"Add To Cart" button shake

Use user.css - https://www.w3schools.com/howto/howto_c ... _image.asp

[shopify]

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

Thanks very much @zipurman

[shopify]

"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]

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]

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]

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!

[heatherbell]

I'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]

I'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