Log MT-016 // 08 entries // tutorials + notes
2026.10.08 - 00:00:00 DAC Get a quote ↗
/ home / blog // article

Hover to Show Quick Add Button on Collection Page-Shopify Dawn Theme

2023.11.03Article1 min readBy MeghbalikaTech Admin

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

Have issues with Shopify store, but not sure how to fix?

Contact us now ↗
Leave a comment // moderated
Thanks — comments are reviewed before they appear
You may also like
© 2026 Meghbalika Tech. All rights reserved.● info@meghbalika.xyz · Mon – Sat 9am – 5pm