Add to cart button color

[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!

[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.