Change Quick-Add Button Design Style (Dawn Theme)

Shopify Apps
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
Beauty-–-Plantdays.png2880×1516 390 KB

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
SAU-LEE-Party-Cocktail-Dresses.png2880×1516 385 KB

Would appreciate any help/advice thank you!

1 Like
2

Hi @Plantdays

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

3

Hi Dan,

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

Thanks so much for your help.

4

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;
}
}
5

Hi Dan,

Just wanted to clarify, is this part of the “theme.liquid” file at the bottom before:

Is this the base.css file you’re referring to?

Thanks again,

Laura