Hello, I want to add a ‘Quick Add/Add To Cart’ button when a user hovers over any given product in my shop. I currently have a quick add button, but I can’t figure out the positioning for it. When I hover over a product, the Add To Cart button is below my product, then it moves all of the other products down on my page.
With my current theme, how would it be possible to have the ‘quick add’ button appear on hover, and instead of it being below the product, how can I center the button within the product on hover?
Thanks for the help, everyone.
I attached a gif for reference, this is somewhat similar to what I want, but I really want it centered within the whole product card.
My website: https://teemania.co/
Hello, I am using the ‘Sense’ theme.
Hi @teemania
Please add this CSS code to bottom your quick-add.css file in Online store > Themes > Edit code > Assets
@media screen and (min-width: 750px) {
.quick-add {
position: absolute !important;
bottom: 120px !important;
width: 252px !important;
left: 38px !important;
}
}
Hello Dan,
I copy pasted the code you shared, however the quick add button is still not reflecting. Is there an alternative way to have this added other than coding?
Hi @Chromallure
Could you share your store URL to check?
Hey there Dan, thanks for getting back to me. www.chromallure.com
Looking forward to hearing back from you!
Hi @Chromallure
You must enable Quick add to cart option to make it display then the code will work
