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
8382 1650 1662

Hi @Plantdays 

Please send your store link so I can check and provide code to do that.

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. 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
8382 1650 1662

 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 solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. 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