Question 248616 in Shopify Question posted in
The Shopify help center can be found here.

Add to Cart on hover – Shopify

trying to have the "add to cart" button as a hover when mouse goes over that product. Currently its like this in boxes underneath each product.

Is it a simple solution or do I require more complex coding for this in Shopify back-end?

enter image description here

Tags:

2

Answers


  1. 0 
    function main(){
document.getElementById('cart').style.color = 'white';
document.getElementById('cart').style.background-color = 'black';
document.getElementById('cart').style.translateY = '-50%';
document.getElementById('item').style.opacity = '24%';
document.getElementById('cart').style.opacity = '100%';
}
    <div class = "item" onmouseover=main()>
<!--image,etc..
 give cart's id as cart
 give item's id as item
 -->
</div>
    Login or Signup to reply.
  2. 0

    Below is the potential code. "Potential" – because I am able to display floating add to cart button when mouse hovers over a product. Issue is when I try to click that floating add to cart button, it is not receiving click event even if i have captured its click event via some other javascript.If someone can suggest some improvement to this, we would have working , floating add to cart button. Thanks

    const productCardWrappers = document.querySelectorAll('.product-card-wrapper');

// Loop through each instance and add event listeners
productCardWrappers.forEach((productCardWrapper) => {
    // Get the Add to Cart button element within the current instance
    const addToCartButton = productCardWrapper.querySelector('.variant-button');

    // Add a mouseover event listener to the current instance
    productCardWrapper.addEventListener('mouseover', () => {
        // Show the Add to Cart button when the mouse is over the current product card
        addToCartButton.style.display = 'block';
    });

    // Add a mouseout event listener to the current instance to hide the button
    productCardWrapper.addEventListener('mouseout', () => {
        // Hide the Add to Cart button when the mouse leaves the current product card
        addToCartButton.style.display = 'none';
    });
});'''
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search