Position the Quick Add/ Add to Cart button over the image on the collection page in the Shopify Dawn theme when hovering.
You can follow these steps:
1. Go to Online Store->Theme -> Customize
2. In default collection, enable quick adđ button
3. Go to Online Store->Theme->Edit code
4. Open your base.css file in the Asset folder, paste the below codes to the bottom of the file.
/* Hover to show quick add button */
.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: 60%;
display: none;
}
.card-wrapper.product-card-wrapper:hover .quick-add {
display: block;
}
/* End of code*/
4. Adjust the position and size as needed by changing width: 80%; top: 60%;
5. Click save
HAVE ISSUES WITH SHOPIFY STORE, BUT NOT SURE HOW TO FIX?
CONTACT US