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 and Accept a solution. - Donate: Buy coffee ☕- or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. 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 and Accept a solution. - Donate: Buy coffee ☕- or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. 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
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023