Checkout Color Issue

[nnnnoooonames]

Hey guys!

I'm having an issue where I change accent color of my checkout(in checkout configurations) and cart icon, show order summary on mobile and policy links won't change the accent color. So lets say they are currently pink and I'm trying to change it to blue. Everything change its color (except those 3) when white field background selected, but when transparent selected - nothing changes to blue, all stays pink.

Shopify Support won't help me fix it.

If anyone knows how to fix this, please help.

Thank you!

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

Best regards,

Noah | PageFly

[nnnnoooonames]

Hey, Noah!

Here is my site: luxe-ro.com
You'll see 2 colors in checkout: 1st is beige (which I chose in checkout configuration for button and accent) and 2nd is light blue(initial color that won't change).

thank you for taking your time and trying to help!

[PageFly-Noah]

Hi @nnnnoooonames  can you add code here to change color:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<style>
#cart-link span svg{
   color: #E6D2A2 !important;
}
.IfmSL span{
   color: #E6D2A2 !important;
}
footer .QT4by{
  color: #E6D2A2 !important;
}

</style>

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[nnnnoooonames]

Hi, Noah!

Thanks for trying to help! Unfortunately, this solution doesn't work for me...

The issue is still there...

[PageFly-Noah]

Hi @nnnnoooonames  There are probably a number of reasons. Can you keep my code as is? so I can check where the cause is coming from, to determine if it's not eating code or from another cause.
Thank you.

[nnnnoooonames]

Just added/saved your code to theme.liqiud

[PageFly-Noah]

Hi @nnnnoooonames  Please help me add again code here. Try it out and see if it affects other pages:

<style>
._1fragemps {
    --x-default-color-accent: #E6D2A2 !important;
}
</style>

Thank you so much.

[BSSCommerce-B2B]

Dear @nnnnoooonames ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

.cart__ctas button {
    background: lightblue;
}

In this step, you choose color "light blue" to background  button checkout

Step 3: Save your code and reload this page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[nnnnoooonames]

the issues isn't with checkout button in cart. the issue is on a checkout page

[BSSCommerce-B2B]

Hi @nnnnoooonames ,

Sorry for misunderstanding your requirement.

With the issue is on your checkout page, you can edit css similar my previous instructions.

In step 2: Change previous css script in the last post by this css script below:

#checkout-pay-button {
   background: lightblue;
}

And the result will be:

If it's still not correct, could you please specify exactly where you need to change the color by taking a screenshot and marking it?

I will check it again.

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

[nnnnoooonames]

Hey!

Thanks for trying to help, so the issue is that: cart icon, policy links, "show order summary"(on mobile resolution) - they remain blue. But I need them to be #E6D2A2, same as pay button

[BSSCommerce-B2B]

Hi @nnnnoooonames , 

Thank you for sharing the information about the exact position where you need to change the color.

So, you need to edit the CSS like this so that the div wrapping the elements there has the color #E6D2A2 same as pay button.

.QT4by.eVFmT.janiy.mRJ8x.EP07D,
.a8x1wu10._1fragem2i._1fragemqz._1fragemn2._1fragemmx._1fragemq4,
.IfmSL {
    color: #E6D2A2 !important;
}

Save and reload page. 

And the result will be: 

We hope my suggestions will fully meet your requirements this time.

If it is helpful, can you kindly give us many likes and mark the solution for us? 

This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community. Thanks in advance.

[nnnnoooonames]

Yes, thats exactly what I was looking for!

But the code won't work - I put it in base.css and it makes no difference...

[BSSCommerce-B2B]

Hi @nnnnoooonames ,

The classes I mentioned in the previous suggestions might not be changeable in base.css.

Please try putting it in theme.css, styles.css, or theme.scss.liquid,... or try adding this script directly to your theme: 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file theme.liquid. And add this script to the before </body>: 

Step 3: Save your code and reload this page.

We hope my suggestions will solved your issue.

If it is helpful, can you kindly give us many likes and mark the solution for us? 

This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community. 

Have a nice day, sir! 

[nnnnoooonames]

still doesn't apply...

[RafaKL1]

I have the same problem. Can someone share a fix?

[Vikked]

i have exactly same problem .please help asap .Ready to pay for time

[BSSCommerce-B2B]

Dear @nnnnoooonames , @RafaKL1 , @Vikked ,

I am truly apologize for my mistake.

I have thoroughly checked the customized CSS/scripts and discovered that the cause lies in the customizations being made on the Shopify checkout page.
Shopify does not allow editing, embedding, or interfering with the checkout page due to user information security reasons.
The CSS properties are contained in a compressed file managed by Shopify with their CDN. I have checked this on my own demo store and it is exactly the same as your issue. The color cannot be changed in file css or theme.liquid on our theme as usual.

But, in my demo store, i tried and successed by the way below: 

Go to shopify/admin: 

- You can edit in Settings => Checkout > Customize

Select change color of accent: 

And save this settings.

=>> Checkout page:

Sorry again,

This is truly a new issue for me. Thank you for bringing it up for discussion and helping me gain more knowledge in this issue.

We hope my suggestions will solved your issue in this time.

If it is helpful, can you kindly give us many likes and mark the solution for us? 

This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community.

Have a nice day, sir! 

[RafaKL1]

Hi, thanks for your message back. This is ofcourse what we tried at first but this does not change anything.

[Kessarkess]

did you find any solution? 

[Vikked]

We did same .Let me rephrase the question again.

I'm having an issue where I change accent color of my checkout(in checkout configurations)
Following element doesnt change color and remain fixed:
1. cart icon
2.show order summary
3.policy links at the end of checkout page

I need help in changing color.This is not an issue of theme .cause same problem is in other themes.

[BSSCommerce-B2B]

Hi @Vikked , @RafaKL1 , 

At previous comment: https://community.shopify.com/c/shopify-design/checkout-color-issue/m-p/2613515#M686325

In my store, I tried customize settings checkout and succeed. (Admin > Settings > Checkout > Customize).

The color of cart icon/ show order summary (mobile view),... was changed from default color #1878B9 to color #E6D2E2. 

I don't understand why it's not possible to change the color in your store.

If permitted, you can share access to your theme code with me, and I will check it directly there.

You can send me private message to do that.

It's my pleasure to assist you.

[Kessarkess]

i am having the same issue anyone found a solution?

[Kessarkess]

Did you find a solution?

[Kessarkess]

Did you find a solution? i have the same problem

[BSSCommerce-B2B]

HI @Kessarkess , 

I'm still looking for other answers to find a solution for this issue.

Follow https://community.shopify.com/c/shopify-design/checkout-color-issue/m-p/2613590/highlight/true#M6863... 

I don't understand why it's not possible to change the color in other stores, but work in my store.

Maybe, my demo store is in development environment (dev mode)??

Have a nice day! 

[Kessarkess]

Accent colors in checkout is changing the fields like credit card info payment field but not the order summary and the policy links at the bottom for us 

[Mattishere]

Hey, I have the same problem right now. Please let me know if you have fixed with issue