How to make complementary product section add to cart look like a button

Store Design
, , , , ,
1

Hi, I am trying to make the complementary product section add to cart look like a button. Does anyone know how I can achieve this result?

INKLY_0-1720951531072.png
INKLY_0-1720951531072.png786×848 109 KB

INKLY_1-1720951543640.png
INKLY_1-1720951543640.png786×848 40 KB

2

Hi @INKLY ,

You can follow these steps to make the effect

  1. Open Online Store > Theme > Edit Code

  2. Find and open the base.css (or theme.css, custom.css) file

  3. Paste the code snippet below at the bottom of the file and hit save

.button.quick-add__submit {
    background: #73cdc2;
    color: #fff;
    padding: 10px !important;
    cursor: pointer;
}

Here is the result

BSSTekLabs_0-1720955203890.png
BSSTekLabs_0-1720955203890.png2878×1604 403 KB

Hope this helps you solve the issue.

Please don’t forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

3

Hi, thank you for your answer, the screenshot you sent is exactly what I would like to achieve but unfortunately the code you sent doesn’t seem to we working.

4

Hi @INKLY ,

You can try pasting this code snippet before the closing head tag in the theme.liquid file

BSSTekLabs_0-1720956001406.png
BSSTekLabs_0-1720956001406.png2878×1620 360 KB

Hope this will help you resolve your issue!

5

Oh, I’ve checked your site, it is because you do not have a closing tag before the code. Just add one closing curly brace before the code like this

}
.button.quick-add__submit {
    background: #73cdc2;
    color: #fff;
    padding: 10px !important;
    cursor: pointer;
}
6

Thank you very much @BSS-TekLabs , this worked great. Do you know by any chance how I can also make the product cards (Image + title + price) look bigger ?