Where you can achieve what your competitors can’t

Shopify Add Shine Effect To Buttons on Product Page

Adding a subtle shine animation to product page buttons in Shopify Horizon theme transforms static calls to action into eye catching micro interactions that entice clicks and signal premium quality, unlocking several strategic advantages:

Visual Attraction

• Draws instant attention as the shimmer highlights button edges and gradients
• Stands out against Horizon’s clean layouts without adding visual clutter
• Creates a modern polish that echoes high end brand websites
• Works seamlessly with any color palette, enhancing both light and dark themes

User Experience

• Provides clear feedback that the element is interactive and ready to press
• Guides the eye toward primary actions such as add to cart or buy now
• Enhances mobile usability by making tappable zones more noticeable for thumbs
• Respects accessibility when animation duration and timing follow motion guidelines

Conversion Lift

• Increases click through rates by turning passive buttons into engaging focal points
• Lowers hesitation as the animated cue reinforces where to complete the purchase
• Supports urgency tactics when paired with limited time badges or countdown timers
• Boosts average order value if shine effects highlight upsell or bundle buttons

Brand Personality

• Conveys a premium, tech forward vibe that differentiates from stock theme styling
• Allows seasonal tweaks by adjusting shine speed or direction for campaigns
• Integrates with other micro interactions like icon pulses for a cohesive motion language
• Strengthens memorability as shoppers associate the signature shimmer with your store

CODE : on blocks/buy-buttons.liquid above endstylesheet

/* OnHOW Shine Effect  */
  .onhow-shine-container .add-to-cart-button,
  .onhow-shine-container .shopify-payment-button__button,
  .onhow-shine-container .product-form-buttons button:not(.quantity-selector *) {
    background-color: black;
    color: white;
    box-shadow: none;
    position: relative;
    z-index: 1;
    overflow: hidden;
    font-family: var(--font-body-family);
  }

  .onhow-shine-container .add-to-cart-button::before,
  .onhow-shine-container .add-to-cart-button::after,
  .onhow-shine-container .shopify-payment-button__button::before,
  .onhow-shine-container .shopify-payment-button__button::after,
  .onhow-shine-container .product-form-buttons button:not(.quantity-selector *)::before,
  .onhow-shine-container .product-form-buttons button:not(.quantity-selector *)::after {
    box-shadow: none;
  }

  .onhow-shine-container .add-to-cart-button:hover,
  .onhow-shine-container .shopify-payment-button__button:hover,
  .onhow-shine-container .product-form-buttons button:not(.quantity-selector *):hover {
    transform: none;
    transition: none;
  }

  @keyframes onhow-shine {
    to {
      left: 100%;
    }
  }

  .onhow-shine-container .add-to-cart-button::after,
  .onhow-shine-container .shopify-payment-button__button::after,
  .onhow-shine-container .product-form-buttons button:not(.quantity-selector *)::after {
    content: '';
    z-index: -1;
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    transform: skew(-15deg);
    background-image: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.54),
      transparent
    );
  }

  .onhow-shine-container .add-to-cart-button:hover::after,
  .onhow-shine-container .shopify-payment-button__button:hover::after,
  .onhow-shine-container .product-form-buttons button:not(.quantity-selector *):hover::after {
    animation: onhow-shine 1s ease;
  }

CODE 2 : find “buy-buttons-block” add “onhow-shine-container” like example below : 

<span
  class="buy-buttons-block buy-buttons-block--{{ block.id }} onhow-shine-container"
  {{ block.shopify_attributes }}
>