Product card design

Store Design
, ,
1

Hey I have a Question I want to add the Product cards like the ones in the Picture has annyone an idea how I could make this possible THANKS! So if you hover over it the add to cart button apears here is the website link for better understanding: https://kyliecosmetics.com

and this is my store url if needed: https://ypqrch-b1.myshopify.com/

Screenshot 2025-05-27 223226.png
Screenshot 2025-05-27 223226.png1822Ă—621 127 KB

1 Like
2

This is something theme specific i believe. There is an option may be in theme settings of the customizer or on the products block to show atc button. But it might be that you don’t get that hover effect and needs to be coded.

3

Dawn already has similar functionality – just need to switch on “Quick Add” under Theme settings.

Add some CSS to show on hover.

No swatches though…

Adding this to “Custom CSS” section setting will add the “view on hover”:

@media (min-width:1200px){
  .quick-add {
    display:  none;
  }
  
  .card:hover .quick-add {
    display: block;
    position:absolute;
    top:0;
    width:100%;
  }
  
  .card:hover > .card__content {
    transform: translateY(-50px);
    background: rgb(var(--color-background));
    transition: transform .1s ease-out;
  }
}