Add To Cart Button (Pulse)

Bookmark Plugin

---

Plugin Details

Add a pulsing 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

// PULSE - ADD TO CART BUTTON (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: pulse 1s infinite alternate; // animation duration and speed
}

// PULSING ANIMATION - ADJUST THE SCALE OPTION TO CHANGE PULSING SIZE

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2); // button size during pulse animation
  }
}

---

Store Page: Add to Custom CSS

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

.products .sqs-add-to-cart-button {
  animation: pulse 1s infinite alternate; // animation duration and speed
}

// PULSING ANIMATION - ADJUST THE SCALE OPTION TO CHANGE PULSING SIZE

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2); // button size during pulse animation
  }
}

---

Product Block: Add to Custom CSS

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

.product-block .sqs-add-to-cart-button {
  animation: pulse 1s infinite alternate; // animation duration and speed
}

// PULSING ANIMATION - ADJUST THE SCALE OPTION TO CHANGE PULSING SIZE

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2); // button size during pulse animation
  }
}

---

Customizable Options

• Animation Speed

• Pulse Size

Notes

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

---