How can i do Add to Cart Button Shake?

Highlighted
Tourist
7 0 3

Hi guys,

someone can help me with how can i make a shaking add to cart button on my store?

i am using debut theme.

Thanks.

1 Like
Highlighted
Shopify Partner
17 0 2

Hey Idan, 

If you understand code this guide below will help :). 

https://css-tricks.com/snippets/css/shake-css-keyframe-animation/

Shopify Expert UK

Shopfiy Expert UK - Benline.co.uk
1 Like
Highlighted
Tourist
7 0 3

i didnt understand what to do :D

i am going to edit code of my debut theme?

what i should search for? what should i replace?

thanks

0 Likes
Highlighted
New Member
2 0 1

So go to your spot where you edit code. Sear for theme.scss.liquid

Hit ctrl-f and paste this in .product-form__cart-submit - On mine the code starts at line 3123.

So the code will look like this. You can copy and paste my code:

.product-form__cart-submit {
  display: block;
  width: 100%;
  line-height: 1.4;
  padding-left: 5px;
  padding-right: 5px;
  white-space: normal;
  background-color: #d80001;
}

when done it should look like this

.product-form__cart-submit {
  display: block;
  width: 100%;
  line-height: 1.4;
  padding-left: 5px;
  padding-right: 5px;
  white-space: normal;
  background-color: #d80001;
}

.product-form__cart-submit:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

So for me I copied and pasted this code on line 3133

.product-form__cart-submit:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

 

RIGHT below the code you searched for. Make sure you duplicate your page so you can have a test page before you activate it. :) GL

Here's just a bit bigger overview just in case you're lost.

Line "background-color: #d80001;" changes the color of your add to cart button a nice popping red!


.product-form__cart-submit {
  display: block;
  width: 100%;
  line-height: 1.4;
  padding-left: 5px;
  padding-right: 5px;
  white-space: normal;
  background-color: #d80001;
}

.product-form__cart-submit:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}


@include media-query($medium-up) {
  .product-form__cart-submit--small {
    max-width: 300px;
  }
}

 

1 Like
Highlighted
New Member
2 0 1

Hey Idan, 

If you understand code this guide below will help :). 

https://css-tricks.com/snippets/css/shake-css-keyframe-animation/

Shopify Expert UK

Thanks that code was exactly what I needed.

0 Likes
Highlighted
Tourist
7 0 3

Wow! works perfectly!!!!

there is a way to make the button shaking every couple of seconds automaticlly without touching it?

thank you so much! you are really good!

0 Likes
Highlighted
Shopify Partner
17 0 2

?

Shopfiy Expert UK - Benline.co.uk
0 Likes
Highlighted
Tourist
7 0 3

There is a way to make the button shake automaticly every couple of seconds without touching it?

 

1 Like
Highlighted
New Member
1 0 0

just remove :   }.product-form__cart-submit:hover {    from the code ..

 

 

your  code should start like this : 

 

.product-form__cart-submit {
display: block;
width: 100%;
line-height: 1.4;
padding-left: 5px;
padding-right: 5px;
white-space: normal;

animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;

.......

0 Likes
Highlighted
New Member
4 0 0

Hi. Can anyone help me with making the add to cart button shake in minimal theme,please? I would also like to know how to change the color of a tab (ie. sale to color red


@SimoLatrach wrote:

just remove :   }.product-form__cart-submit:hover {    from the code ..

 

 

your  code should start like this : 

 

.product-form__cart-submit {
display: block;
width: 100%;
line-height: 1.4;
padding-left: 5px;
padding-right: 5px;
white-space: normal;

animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;

.......



@SimoLatrach wrote:

just remove :   }.product-form__cart-submit:hover {    from the code ..

 

 

your  code should start like this : 

 

.product-form__cart-submit {
display: block;
width: 100%;
line-height: 1.4;
padding-left: 5px;
padding-right: 5px;
white-space: normal;

animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;

.......


Im sorry navigation menu

 



) in navigation on desktop and mobile?

0 Likes