Change Quick-Add Button Design Style (Dawn Theme)

Change Quick-Add Button Design Style (Dawn Theme)

Plantdays
Tourist
3 0 1

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:

 

Beauty-–-Plantdays.png

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:

 

SAU-LEE-Party-Cocktail-Dresses.png

 

Would appreciate any help/advice thank you!

Replies 4 (4)

Dan-From-Ryviu
Shopify Partner
11537 2258 2440

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.

Plantdays
Tourist
3 0 1

Hi Dan,

 

Here you go: https://plantdays.com/

 

Thanks so much for your help.

Dan-From-Ryviu
Shopify Partner
11537 2258 2440

 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.

Plantdays
Tourist
3 0 1

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