How To Make A Shining Hover Effect on Buy Button [Shopify]

Welcome to WebSensePro! In this tutorial, we’ll walk you through adding a shiny hover effect to your Shopify store’s “Buy Now” button. This small visual enhancement is designed to grab users’ attention and encourage them to proceed directly to checkout, increasing your store’s conversions.

Follow these steps to add the shiny hover effect to your “Buy Now” button in Shopify:

Step 1: Access the Shopify Admin Dashboard

1. Log in to your Shopify admin panel.
2. Navigate to Online Store in the left-hand menu.
3. Select Themes.

Step 2: Install a Fresh Dawn Theme

1. If you’re not already using the Dawn theme, click on Add Theme to install the latest version (Dawn 15.1.0).
2. Once installed, click Publish to activate the theme on your store.

Tip: If you’re working on a live theme, make sure to duplicate it before making changes to avoid any issues.

Step 3: Access the Code Editor

1. In the Themes section, click the three dots next to your theme and select Edit Code.
2. In the code editor, look for the buy-buttons.liquid file. You’ll add the code for the shiny hover effect in this file.

Step 4: Add the Shiny Hover Effect Code

Copy Code

<style>
.shopify-payment-button__button.shopify-payment-button__button--unbranded {
  background-color: black !important; 
  color: white !important; 
  box-shadow: none; 
  position: relative; 
  z-index: 1; 
  overflow: hidden; 
}  

.shopify-payment-button__button.shopify-payment-button__button--unbranded::before,
.shopify-payment-button__button.shopify-payment-button__button--unbranded::after,
.shopify-payment-button__button.shopify-payment-button__button--unbranded:hover {
  box-shadow: none !important; 
}  

.shopify-payment-button__button.shopify-payment-button__button--unbranded:hover {
  transform: none !important; 
  transition: none !important; 
}  

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

.shopify-payment-button__button.shopify-payment-button__button--unbranded::after { 
  z-index: -1 !important; 
  position: absolute; 
  top: 0 !important; 
  left: -100%; 
  width: 100% !important; 
  height: 100% !important; 
  transform: skew(-15deg) !important; 
  --border-opacity: none; 
  background-image: linear-gradient( 
    90deg, 
    transparent, 
    rgba(255, 255, 255, 0.25), 
    transparent 
  ) !important; 
}  

.shopify-payment-button__button.shopify-payment-button__button--unbranded:hover::after {
  animation: shine 2s ease; 
}
</style>

1. Scroll down to the section after the {% endcomment %} in the buy-buttons.liquid file.
2. Copy the free code provided below and paste it into this file:
3. Save the changes by pressing Command + S (Mac) or Ctrl + S (Windows).

Step 5: Preview the Shiny Button

1. Head back to your store’s product page and do a hard refresh (Ctrl+F5 or Command+Shift+R) to see the shiny hover effect in action.
2. Hover over the “Buy Now” button to check out the effect!

Step 6: Additional UI Enhancements

At WebSensePro, we’ve created several other free tutorials to enhance your Shopify store’s UI, including autoplay video sections, transparent headers, and animated mega menus with images. These are available for free on our YouTube channel. Make sure to subscribe for more awesome tutorials!