Hi, I was wondering if it’s possible to customise the ‘Quick add’ button for the Broadcast theme. Right now it’s in text form and I would like to replace it with a ‘+’ or the bag icon. Also, I would like that the quick add element goes over the product image, also for mobile.
I’m currently using the trial version so I don’t have access to the whole code.
Desired state (for both desktop and mobile):
Thanks in advance!
Hello @maggiebovary ,
I hope you are doing well!
Basically, I have checked and confirmed that you can’t edit code while you are in trial. So, you won’t be able to replace + with the bag icon.
If your quick add button configured similarly to the demo store, then you should be able to paste this code into “Collection products” section “Custom CSS” setting in Customizer.
Can do this in trial as well.
.quick-add__holder.mobile {
display: none !important;
}
.quick-add__holder.desktop {
opacity: 1 !important;
display: block !important;
position: absolute;
bottom: var(--btn-offset);
right: var(--btn-offset);
width: auto;
}
.quick-add__button .btn__text {
font-size: 0;
position: relative;
min-width: 14px;
min-height: 24px;
}
.quick-add__button .btn__text:after {
content: "+";
font-size: 24px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-family:monospace;
}
Result:
You can add the code below to the theme.liquid file, below <head> tag to make quick add as + icon
<style>
.quick-add__button .btn__text {
font-size: 0 !important;
}
.quick-add__button {
padding: 0 !important
}
.quick-add__button .btn__text:after {
content: "+";
font-size: 18px;
display: flex;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
}
.quick-add__holder.mobile {
display: none !important;
}
.quick-add__holder.desktop {
display: block !important;
position: absolute;
bottom: var(--btn-offset);
right: var(--btn-offset);
width: auto;
}
@media (max-width: 749px) {
.quick-add__holder.desktop {
opacity: 1 !important;
}
}
</style>
Best regards,
Dan from Ryviu: Reviews & QA
