Changing the hover effect for the products.

Store Design
, , ,
1

Hey guys,

I want to change the hover effect for the products.

Currently, I have the default Shopify animation. I’d like to change it to a quick slide to the left.

The second thing I want is that when I hover over a product, a shopping bag icon with “Quick Buy” appears in a circle at the bottom-right corner.

I want everything to look exactly like it does here: https://tomnoske.store/collections/all-products

And here’s my store URL: https://1049xn-ya.myshopify.com/collections/all

Thanks so much,
Tim

2

@CreatorTim ,
I am from Mageplaza - Shopify solution expert.

To change the hover effect for product items in your Shopify store, you’ll need to modify the CSS in your theme. Here are some suggestions you can follow to achieve that:

  1. Identify the Product Card Class:
  • Go to your Shopify theme editor (Online Store > Themest > Cusomize).
  • Inspect the product grid or product list on your store using your browser’s developer tools (Right-click > Inspect).
  • Identify the class or ID of the product card/container (e.g., .product-card, .product-grid-item,). In your case, is (.card__inner)
  1. Add Custom CSS:
  • Navigate to your theme’s theme.css or styles.css file in the Shopify code editor (Online Store > Themes > Edit Code).
  • Locate the relevant stylesheet, or add the styles in the Assets folder.
  1. Here is an example:
  • Example HTML structure:

  

    
    
  

  
    ### Product Name
    

$49.99
  • Style the button: Use CSS to hide the button by default and make it visible when hovering over the product card:
/* General Styles */
.product-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #eaeaea;
  padding: 15px;
  text-align: center;
  transition: transform 0.3s ease;
}

.product-card:hover {
  transform: scale(1.05);
}

/* Image Wrapper */
.product-card__image-wrapper {
  position: relative;
  width: 100%;
  height: 200px; /* Adjust based on your design */
  overflow: hidden;
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.product-card__hover-image {
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-card__hover-image {
  transform: translateX(-100%);
}

/* Details Section */
.product-card__details {
  position: relative;
  padding: 10px 0;
}

/* Cart Button */
.product-card__cart-button {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background-color: #000;
  color: #fff;
  border: none;
  padding: 10px 15px;
  font-size: 14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.product-card:hover .product-card__cart-button {
  opacity: 1;
  visibility: visible;
  1. Save and test:
  • Save the changes and preview the store.
  • Adjust dimensions, colors, or positions as needed for your theme.

I hope this helps, please leave a comment if you need further instructions !

3

Hey, thanks for the feedback!

However, all I did was add the CSS to the base.css file, but nothing changed. What should I do with the HTML? Should I add it somewhere or make any changes?

Thank again,

Tim