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

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

TFE1
Tourist
13 0 2

Shopify help.webp

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.

Replies 7 (7)

CodingFifty
Shopify Partner
901 134 164

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?

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
TFE1
Tourist
13 0 2

Hi there,

 

the website is: thefinestexotics.co.uk

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

thescriptflow
Shopify Partner
337 25 48

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.

- Need a Shopify Specialist? Chat on WhatsApp +447828078063

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


- If my solution was helpful, mark it as a solution and hit the like button!

TFE1
Tourist
13 0 2

Hi there,

 

its: thefinestexotics.co.uk

TFE1
Tourist
13 0 2

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.

B2Bridge
Excursionist
334 67 82

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

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

 

B2Bridge: All-in-one B2B wholesale solution, enabling merchants to set up a complete B2B store quickly and without coding.
With features like customizable registration forms, customer segmentation, and tailored price lists, it simplifies wholesale management.
B2Bridge also includes a dedicated Quick Order page and flexible Net Payment Terms, streamlining operations for wholesalers and enhancing the buying experience.

TFE1
Tourist
13 0 2

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.