Quick add button design Craft

New Member
7 0 0

Hi Shopify,


I am using the Craft Theme and I want to change the style of the Quick Add button. The only example I could find on this topic did not have any accepted/working solution. In the appendix I've added an example of how I want it to look on my site. A simple plus inside a box will do the trick!


My site is www.coverart.nl is shown below momentarily I have no quick add button.




example 1.pngexample 2.png

Replies 2 (2)

Shopify Partner
475 98 96

Hi. @CoverArt1 

First, you need to add this button in admin and then modify its style. I can help you directly modify it.



If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
New Member
7 0 0

Hi Anneluo,


Yes I know how to add the 'add to cart' button but need help with the coding. as stated in my request i'd like it to be a small plus sign only. no other interactions like all of the products below it moving down when scrolling over the products etc:


Hope this claryfies what i Mean. 


In the other post someone coded this, sadly it doesnt work properly on my website:

.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;


Can someone help me and change it so it works for my webshop?