Shopify themes, liquid, logos, and UX
I have added some css to my theme.liquid file that makes the quick add button appear on hovering over any product card. I'm really happy with it but now the picture is not clickable anymore. Could someone please help me to figure out how to fix it?
The css I've added is this:
<style> .card-wrapper.product-card-wrapper { position: relative; } .card-wrapper.product-card-wrapper .card--standard>.card__content { position:relative; display: flex; flex-direction: column; } .card-wrapper.product-card-wrapper .quick-add { position: absolute; width: 80%; top: -50%; left:0; right:0; margin-left:auto; margin-right:auto; justify-content: center; display: none; } .card-wrapper.product-card-wrapper:hover .quick-add { display: flex; } </style>
I've already figured out that the image becomes clickable again if I remove the line
position:relative;
from the .card-wrapper.product-card-wrapper .card--standard>.card__content {}.
But then the quick-add button is no longer visible.
My store page is this: https://bijoufairy.com/
I have added your code but the image is still not clickable. It is as you say, I currently have to choose between those two: having a clickable image or having a visible Quick Add button. I am fine with creating a custom button and feel comfortable editing my product card template. Could you give me some guidance how to do that? Thank you already for looking into this!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024