Changing the hover effect for the products.

Store Design
, , ,

Topic summary

CreatorTim wants to customize product hover effects on their Shopify store to match a reference site. The desired changes include:

Requested Features:

  • Replace default Shopify animation with a quick slide-to-left effect
  • Add a “Quick Buy” shopping bag icon in a circle at the bottom-right corner on hover

Solution Provided:
mageplaza-cs offered detailed implementation steps:

  1. Identify the product card class (.card__inner) using browser developer tools
  2. Add custom CSS to theme.css or styles.css file
  3. Provided example HTML structure and CSS code for hover effects and button positioning
  4. CSS includes transitions for image sliding and button visibility on hover

Current Status:
CreatorTim added the CSS to base.css but reports no visible changes. They’re asking for clarification on whether HTML modifications are needed and where to implement them. The issue remains unresolved and awaiting further guidance.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
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