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

Store Design
1

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
NamelessTrader_0-1698866171906.png927×692 23.6 KB

1 Like
2

Hi @NamelessTrader

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

3

thenamelesstrader.com

pw is lebraw

1 Like
4

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

you can try using different color

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

1 Like
5

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

  1. Save the changes.

I hope the solution helps you.

Please let me know if you need any assistance.

Thank you.

2 Likes
6

Thanks for the info, do you mean like this?

Made4uoRibe_0-1698941722284.png
Made4uoRibe_0-1698941722284.png603×243 4.82 KB

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!

7

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.

8

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

9

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.

10

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?

11

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.

12

Thanks Anshul,

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

Thanks

Emma

13

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

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

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.

1 Like
14

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

15

Hello @emmaf ,

I am glad the solution helps you.

Please like and accept my solution.

Thank you.

16

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

17

Ok, Fine.

Thank you

18

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

19

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)

20

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!