Add To Cart Button (Shakey)

Bookmark Plugin

---

Plugin Details

Add a shakey animation to the add to cart button for the product details page, store page, and product block.

Compatibility

• Works with Squarespace 7.1

• Uses Custom CSS

---

Product Details Page: Add to Custom CSS

// ADD TO CART BUTTON (SHAKEY)- PRODUCT PAGE - GHOSTPLUGINS.COM //

.ProductItem .ProductItem-details .sqs-add-to-cart-button, .pdp-form-wrapper .sqs-add-to-cart-button, .pdp-layout-full-width-carousel .pdp-details .pdp-selection .sqs-add-to-cart-button
 {
  animation: shake 1.5s infinite alternate;
}

// DO NOT DELETE - SHAKE ANIMATION CODE - ADJUST THE PX OPTIONS TO CHANGE SHAKE DISTANCE //

@keyframes shake {
  0% { transform: translateX(0); }
  10%, 90% { transform: translateX(-10px); } // shake animation distance on left - keep negative
  20%, 80% { transform: translateX(10px); } // shake animation distance on right
  30%, 50%, 70% { transform: translateX(0px); }
  40%, 60% { transform: translateX(0px); }
  100% { transform: translateX(0); }
}

---

Store Page: Add to Custom CSS

// ADD TO CART BUTTON (SHAKEY)- STORE PAGE - GHOSTPLUGINS.COM //

.products .sqs-add-to-cart-button {
  animation: shake 1.5s infinite alternate;
}

// DO NOT DELETE - SHAKE ANIMATION CODE - ADJUST THE PX OPTIONS TO CHANGE SHAKE DISTANCE //

@keyframes shake {
  0% { transform: translateX(0); }
  10%, 90% { transform: translateX(-10px); } // shake animation distance on left - keep negative
  20%, 80% { transform: translateX(10px); } // shake animation distance on right
  30%, 50%, 70% { transform: translateX(0px); }
  40%, 60% { transform: translateX(0px); }
  100% { transform: translateX(0); }
}

---

Product Block: Add to Custom CSS

// ADD TO CART BUTTON (SHAKEY)- PRODUCT BLOCK - GHOSTPLUGINS.COM //

.products .sqs-add-to-cart-button {
  animation: shake 1.5s infinite alternate;
}

// DO NOT DELETE - SHAKE ANIMATION CODE - ADJUST THE PX OPTIONS TO CHANGE SHAKE DISTANCE //

@keyframes shake {
  0% { transform: translateX(0); }
  10%, 90% { transform: translateX(-10px); } // shake animation distance on left - keep negative
  20%, 80% { transform: translateX(10px); } // shake animation distance on right
  30%, 50%, 70% { transform: translateX(0px); }
  40%, 60% { transform: translateX(0px); }
  100% { transform: translateX(0); }
}

---

Customizable Options

• Animation Speed

• Shake Distance

Notes

Compatible with all product detail layouts (Simple, Wrap, Full, and Half).

---