Blog sidebar

RECENT POSTS

Hover to Show Quick Add Button on Collection Page-Shopify Dawn Theme
  • By MeghbalikaTech Admin
  • Nov 03, 2023
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...
How To Add A Shop Section To Your Facebook Page?
  • By MeghbalikaTech Admin
  • Feb 07, 2020
On the off chance that you are a retail a retail or e-commerce advertiser hoping to expand your Facebook Page's ROI, you might need to...
What is Influencer Marketing?
  • By MeghbalikaTech Admin
  • Dec 15, 2018
The word ‘Influencer advertising or marketing’ has been floating around for a while now, however has proven quite difficult to new agencies attributable to the regularly...

FIND US ON

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

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

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

Comments have to be approved before showing up

YOU MAY ALSO LIKE

RECENT POSTS

Hover to Show Quick Add Button on Collection Page-Shopify Dawn Theme
  • By MeghbalikaTech Admin
  • Nov 03, 2023
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...
How To Add A Shop Section To Your Facebook Page?
  • By MeghbalikaTech Admin
  • Feb 07, 2020
On the off chance that you are a retail a retail or e-commerce advertiser hoping to expand your Facebook Page's ROI, you might need to...
What is Influencer Marketing?
  • By MeghbalikaTech Admin
  • Dec 15, 2018
The word ‘Influencer advertising or marketing’ has been floating around for a while now, however has proven quite difficult to new agencies attributable to the regularly...

FIND US ON