Change the colour of the add to cart button on the product variant modal view from outline to solid.

Store Design
, , , , ,
1

Shopify help.webp
Shopify help.webp2268×4032 719 KB

How do i change the properties of this single button?

All of the other buttons etc. on my site are fine but since i’ve introduced product variants and making it a quick on the homepage this issue has come up now. Below is what it looks like after i have clicked show options button which is on the homepage featured collection. As you can see the outline is yellow but the text is black and similar to the background colour. Any help is much appreciated, thank you.

2

Hi @TFE1 ,

Thank you for reaching out to the Shopify community. I’d be glad to assist you. Could you kindly share your store URL and
password (if it’s password-protected) so I can review it and provide you with an update?

3

Hey @TFE1 this is Qasim a Sr. Shopify Developer and official shopify partener.
Could you please share the link of your store so that I gave you solution code. Thanks

Best Regards,
Qasim A.

4

Hi there,

the website is: thefinestexotics.co.uk

its not password protected though the change of add to basket hasn’t been implemented.

5

Hi there,

its: thefinestexotics.co.uk

6

Hi @TFE1 , you can follow these steps:

Step 1: Open Online Store → Themes → Edit code.

Step 2: Find base.css file

Step 3: Paste this code at the bottom of the file

.custom .field__input {
    border: none !important;
    background: #fdd017;
    color: #000;
}

Result:

B2Bridge_0-1739775822678.png
B2Bridge_0-1739775822678.png520×720 28.6 KB

If this helpful, please let us know by giving us a like and marking its as a solution. Thanks you :heart_eyes:

7

Hi there,

Thank you for this although it isn’t what I was looking for if you go to the website thefinestexotics.co.uk and you have a look on the homepage at one of the variant products for example “yellow pitahaya” product click on “options” it gives you a modal view of the product if you scroll you will see that the “add to basket” is in black colour on a dark background. I want it to be a solid button like the rest of them rather than an outline button especially on this dark background.

Thanks in advance.

8

Hi there,

If you go to the website thefinestexotics.co.uk and you have a look on the homepage at one of the variant products for example “yellow pitahaya” product click on “options” it gives you a modal view of the product if you scroll you will see that the “add to basket” is in black colour on a dark background. I want it to be a solid button like the rest of them rather than an outline button especially on this dark background.

Thanks in advance.