App reviews, troubleshooting, and recommendations
Okay, so I am using the Dawn Theme and I want to change the style of the Quick Add button. Here is what it currently looks like in my online store:
It shows up beneath the product price as a separate button. Instead, I'd like it to be a plus sign that shows up on hover only and looks like this:
Would appreciate any help/advice thank you!
Hi @Plantdays
Please send your store link so I can check and provide code to do that.
- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.
Hi @Plantdays
Please try to add this code at the bottom of your base.css file and check
.quick-add {
position: absolute !important;
bottom: 122px;
right: 0px;
opacity: 0;
}
.quick-add.no-js-hidden:after {
content: '+';
font-size: 32px;
color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.quick-add modal-opener {
position: relative;
}
.quick-add__submit {
min-width: 32px !important;
color: transparent !important;;
width: 32px !important;;
height: 32px !important;;
min-height: 32px !important;
margin: 0 auto !important;;
}
.card-wrapper .card.card--card.card--media.color-background-2.gradient:hover .quick-add {
opacity: 1;
}
@media (max-width: 767px) {
.quick-add {
opacity: 1 !important;
bottom: 152px !important;
}
}
- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.
Hi Dan,
Just wanted to clarify, is this part of the "theme.liquid" file at the bottom before:
</body>
</html>
Is this the base.css file you're referring to?
Thanks again,
Laura
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025