How can I modify the color of my add to cart and share buttons?

[NamelessTrader]

How can i change the color of the add to cart and share button? I'm using the origin theme and I don't see any way to change those particularly. They do not match my color scheme and it's annoying.

[Made4uo-Ribe]

Hi @NamelessTrader 

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

[NamelessTrader]

thenamelesstrader.com

pw is lebraw

[Made4uo-Ribe]

Thanks for the info, do you mean like this?

If it is try this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

button#ProductSubmitButton-template--16848396222701__main {
    background: sandybrown;
    color: white;
}

• And Save.
• Note; You can change the colors you like. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[RadBeachwear]

Hi There

I've tried the above solution, but it isn't working for me

I have an Australian store with the correct colour, can't recall how I managed to do it on that store, but with my US store, I can't seem to fix it.

I'm looking for the ADD TO CART to be princeton orange, with white text, as per my Aus Store.

Any help would be great.

[Made4uo-Ribe]

Hi @RadBeachwear 

That is weird it should be on the same buttons. 

check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.payment-buttons .add-to-cart {
    background: #ff8f00 !important;
    color: #fff !important;
}

And save. 

[RadBeachwear]

Thank you for the response.

The only .css in my asset folder is theme.css.liquid. I added the code to the bottom of this, but it doesn't seem to be working.

[Made4uo-Ribe]

Did you already solve this? 

[PageFly-Oliver]

Hi @NamelessTrader ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

<style>
#MainContent .product-form__submit{
color:blue
}
</style>

you can try using different color

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

[Anshul_arora · Accepted solution]

Hello @NamelessTrader ,

I understand you are looking to change the 'Add to cart' & Share button text color.

You can implement this change by following the below mentioned steps -:

1. First Go to Online Store -> Themes -> Click on Action(three dots) -> Edit code.

2. Search & Find the .css or theme liquid file of your store.

3. Now, search for the below mentioned code and add the color property in it.

.button--full-width {
display: flex;
width: 100%;
color: black;
}

Output => https://prnt.sc/7f19-RnmFWOK

.share-button__button, .share-button__fallback button {
cursor: pointer;
background-color: transparent;
border: none;
color: black;
}

Output => https://prnt.sc/PItohedmU1La

4. Save the changes.

I hope the solution helps you.

Please let me know if you need any assistance.

Thank you.

[NamelessTrader]

this solution worked, to an extent. The outline of the add to cart button is still that brown color though. i would like for it to be black.

[NamelessTrader]

I would also like to add a "back" button or a previous page button, preferably that matches my current color scheme and button style. I would like for it to be located in the top left corner of the product page

[Anshul_arora]

Hello @NamelessTrader ,

Thank you for accepting my solution.

I believe you are using a customizer in your detail page, because of this I cannot suggest any solution for changing the 'Add to cart' button outline colour. I have to check the customizer code for this.

The 'Back' or 'previous Page' button can be added to your product page as per your need. However, it will take some time.

I suggest you to fulfil both the above tasks, you can hire a shopify developer.

Thank you.

[emmaf]

Hi Anshul,

I'm trying to change my add to card button colour as its not following the rest of my button colours, I need it to stand out more. I have tried to look it up on "inspect" as you have done for Nameless trader however I cant find it, I have also search on the theme.liquid and can't find it. Can you point me in the right direction?

[Anshul_arora]

Hello @emmaf ,

Yes, Please share your store URL (if password protected, then also share the password) and theme name.

So, I can check and provide you with an appropriate solution.

Thank you.

[emmaf]

Thanks Anshul,

www.coco-alexander.com, the theme is broadcast

Thanks

Emma

[Anshul_arora]

Hello @emmaf ,

I have checked your store code, kindly add the below mentioned code in your store theme.liquid file at the end of the file before </body> tag.

<style>

button.btn.btn--primary.btn--outline.mw-apo-add-to-cart-cloned {
color: red;
background: antiquewhite;

}

</style>

Please feel free to change the color and background of the button as per your preference.

Output -> https://prnt.sc/nQutYkbi9U6O

I hope the solution helps you.

Please let me know if you have any query.

Thank you.

[emmaf]

Wow, thanks so much Anshul this worked really well. I really appreciate your help. Thanks again Emma

[Anshul_arora]

Hello @emmaf ,

I am glad the solution helps you.

Please like and accept my solution.

Thank you.

[emmaf]

Hi @Anshul_arora,

I don't believe I can accept the solution as someone else already has. I'm not seeing anywhere to accept it.

Thanks, Emma

[Anshul_arora]

Ok, Fine.

Thank you

[RadBeachwear]

Hi Anshul

I've been trying to change the colour of my ADD TO CART in my new US store, to match the colour of ADD TO CART in my Australia store, but I can't seem to get it right.

I got the following instructions from another Shopify partner (see under the line below) but it doesn't work for me

Are you possibly able to take a look?

_________________________________________________________________________________________________________

Hi @RadBeachwear 

That is weird it should be on the same buttons. 

check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.payment-buttons .add-to-cart {
    background: #ff8f00 !important;
    color: #fff !important;
}

Copy

And save. 

[onelyfeclothing]

i am still having trouble with changing the add to cart buton, my website is onelyfeclothing.shop
the add to cart button is right above the shop pay button but is in black

[HollowBranch]

I am not finding this in my code. This is what it shows in my code:

.button--full-width {
display: flex;
width: 100%;
}

In my code, there is no color showing, it doesn't have the last part. In the store, the button is clear with a black border. (I tried to add screenshots, but it wouldn't accept .png files)

[RecomNotEcom030]

EDIT: SOLVED thx

Hi Anshul, would you be so kind and suggest a solution to change the add to cart button color for the following shop?

https://secondchance.louis.de/

None of the solutions I found here seemed to function.

Thanks in advance. Highly appreciated!

[RadBeachwear]

Hi There

I've tried the above solution, but it isn't working for me

I have an Australian store with the correct colour, can't recall how I managed to do it on that store, but with my US store, I can't seem to fix it.

I'm looking for the ADD TO CART to be princeton orange, with white text, as per my Aus Store.

Any help would be great.

My Aus website with the correct ADD TO CART colour scheme is www.radkids.com.au

M6y US Website is www.radkidsusa.com

[oako]

Something is completely off with my theme and I cannot find anything from the code

.button--full-width {
display: flex;
width: 100%;

Can someone take a look at my theme? It is driving me crazy that the button is transparent. 
color: black;