Re: Add to cart button color

Solved

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

NamelessTrader
Tourist
4 0 2

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.

NamelessTrader_0-1698866171906.png

 

Accepted Solution (1)

Anshul_arora
Navigator
453 128 98

This is an 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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 26 (26)

Made4uo-Ribe
Shopify Partner
8870 2122 2607

Hi @NamelessTrader 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
NamelessTrader
Tourist
4 0 2

thenamelesstrader.com

pw is lebraw

Made4uo-Ribe
Shopify Partner
8870 2122 2607

Thanks for the info, do you mean like this?

Made4uoRibe_0-1698941722284.png

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
RadBeachwear
Tourist
8 1 2

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
Shopify Partner
8870 2122 2607

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. 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
RadBeachwear
Tourist
8 1 2

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
Shopify Partner
8870 2122 2607

Did you already solve this? 

Made4uoRibe_0-1717593640708.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

PageFly-Oliver
Shopify Partner
878 190 182

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Anshul_arora
Navigator
453 128 98

This is an 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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
NamelessTrader
Tourist
4 0 2

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
Tourist
4 0 2

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
Navigator
453 128 98

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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
emmaf
New Member
4 0 0

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
Navigator
453 128 98

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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
emmaf
New Member
4 0 0

Thanks Anshul,

 

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

 

Thanks

Emma

Anshul_arora
Navigator
453 128 98

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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
emmaf
New Member
4 0 0

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

Anshul_arora
Navigator
453 128 98

Hello @emmaf ,

I am glad the solution helps you.

Please like and accept my solution.

Thank you.

 

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
emmaf
New Member
4 0 0

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
Navigator
453 128 98

Ok, Fine.

Thank you

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
RadBeachwear
Tourist
8 1 2

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
Visitor
1 0 0

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
Excursionist
24 1 6

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
Shopify Partner
1 0 0

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
Tourist
8 1 2

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
Visitor
1 0 0

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;