How can I change the color of my add to cart button on Crave themes?

Store Design

Topic summary

A user wants to change their add to cart button color to #FFA200 on a Crave theme Shopify store.

Multiple solutions provided:

  • Add custom CSS code before the </body> tag in theme.liquid file
  • Target the button class: .product-form__submit.button.button--full-width.button--secondary
  • Set background-color: #FFA200 !important;
  • Alternative: Add code to Assets > Base.css file

Follow-up request:
The user successfully changed the background color but now wants to modify the button’s font color as well, noting the current text color doesn’t look good with the orange background.

Additional solution:

  • Use similar CSS approach
  • Add color: #fff !important; to make text white
  • Color code can be customized to preference

All responses include code snippets showing the exact CSS selectors and properties needed for implementation.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I want to change my add to cart button color with this color code #FFA200

My website URL : https://halal-pasar.myshopify.com/
and I am using Crave themes

Thankyou

2

Hi @Setia ,

Glad to support you today.

To can change the background ATC button, you can check out my suggestion below to make it:

  1. Go to Edit code on Online Store:

GemPages_0-1673252521677.png
GemPages_0-1673252521677.png400×162 25.3 KB

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

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

3

@Setia ,

button.product-form__submit.button.button--full-width.button--secondary {
    background: #FFA200;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

4

Hello @Setia

I would like to give you a solution to support you:

  1. Go to Online Store-> Theme-> Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before :
<style>
.product-form__submit.button.button--full-width.button--secondary {
background-color: #FFA200 !important;
}
</style>

Was my reply helpful? Please Like and Accept Solution. This mean alot to me.

5

Hi @Setia

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

.button--full-width {
    background-color: #FFA200 !important;
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

6

@Setia
Put below code in theme.liquid file before closing tag
7

Thankyou for your help.

btw, I want to change the font color ( add to cart font color ) too.
with this background color, the add to cart font color isn’t too good.

8

Hi @Setia

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

.button--full-width {
    color: #fff !important;
}

You can change the color code #fff to the color you want.

Hope you find my answer helpful!

Best regards,

Victor | PageFly