Solved

Add to cart button color

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
Trailblazer
217 46 30

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 18 (18)

Made4uo-Ribe
Shopify Partner
5085 1211 1482

Hi @NamelessTrader 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


NamelessTrader
Tourist
4 0 2

thenamelesstrader.com

pw is lebraw

Made4uo-Ribe
Shopify Partner
5085 1211 1482

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


PageFly-Oliver
Globetrotter
695 136 129

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
Trailblazer
217 46 30

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
Trailblazer
217 46 30

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
Trailblazer
217 46 30

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
Trailblazer
217 46 30

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
Trailblazer
217 46 30

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
Trailblazer
217 46 30

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
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)