How can I edit the 'Add to Cart' button and borders in the District theme?

[Shaneinvasion]

I need help with editing a few things in this Theme.

The theme I’m using for my store is called: District version 4.3.0

I want to change a few things, but I don’t know where to find it.

I want to change “Add to Cart” and the border / solid colour to a different colour.

I googled how to change the “Add to Cart” colour but this theme doesn’t have “Theme.css” so I’m just confused..

[JabirKhan]

Hello Shane,

Do you see components.css file in assets? May be you can dig in there to achieve it. It is not possible to see the code files of this theme without purchasing it, so not able to give you more suggestion.

Thank you.

Thank you.

[Shaneinvasion]

I see component-model-viewer. Is it that?

[JabirKhan]

Please share your store url.

Also check in base.css

[Shaneinvasion]

Yes, there’s a base.css, what do I do next to change ‘add to cart’ colour? o:

Also here is my url http://www.shaneinvasion.store

Thank you

[GemPages]

Hi @Shaneinvasion ,

Glad to support you today.

To can change the border color and text color on ATC button, you can check out my suggestion below to make it:

1. Go to Edit code on Online Store:

2. add my code above the tag on Theme.liquid:

Eg:

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

[Shaneinvasion]

I did the steps but it came out to this

I want “Add to cart” background to be #FC528C ← and when you hover it, it changes to #EA247D

[JabirKhan]

Hi Shane,

Follow the steps mentioned to edit base.css. At the bottom of file paste this code

#AddToCart-template–16622541439203__product { background-color: #FC528C !important; }

#AddToCart-template–16622541439203__product:hover { background-color: #EA247D !important; }

Hopefully this solves the issue for you.

[Shaneinvasion]

It worked! But it wasn’t in the base.css, it was the other base file.