How to add a hover effect to product pictures on your collection pages

  • by

You can add a hover effect to your product pictures on the homepage and on the collection page. At the point when a client moves the cursor over a product picture, the picture will change to show either another product picture, custom text, or both of these.

To add a hover effect, we need to add some CSS code to your theme’s stylesheet:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Go to the theme you want to edit, and then click Actions > Edit code.
  1. In the Assets directory in the online Shopify editor, click theme.css. If your theme doesn’t have a theme.css file, then find styles.css or theme.css.liquid or file with a .css or .scss file extension.

  1. At the end of the file in the online editor paste this code,
  1. Save this file

Edit the code for your product picture

To edit the code for your product images:

  1. In the Snippets directory in the online editor, click product-card-grid.liquid.
    If your theme doesn’t have a product-card-grid.liquid file, then look for one of the following:
    • product-card.liquid
    • product-grid-item.liquid
    • product-loop.liquid
  2. Find the HTML img tag for your product images by searching for <img. The code for the tag varies from theme to theme, but always starts with <img, and ends with either > or />.
  1. On a new line above the <img tag, paste this code <div class="reveal"> On a new line below the img tag </div>

The result should look like this:

  1. On a new line below the img tag and above the closing </div> tag, add the code that changes what is shown on hover. The code that you add will vary depending on whether you want to show an alternate product image, custom text, or a combination of the two. Follow the steps for the customization of your choice.

Show an alternate product image on hover

  1. On a new line below the img tag and above the closing </div> tag, paste the following code:

Your code should look like this:

  1. Save the file and test your result

Show custom text on hover

  1. On a new line below the img tag and above the closing </div> tag, paste the following code:
  1. Replace YOUR TEXT with the text of your choice. You can use HTML and Liquid tags, for example:

The example code above shows the title and the price of a product when you hover over the image.

Your code should look like this: 

  1. Save the file and test your result

Show an alternate product image with custom text on hover

  1. On a new line below the img tag and above the closing </div> tag, paste the following code:
  1. Your code should look like this: 
  1. Save the file and test your result

source link

Leave a Reply

Your email address will not be published.