Checkout Color Issue

nnnnoooonames
Tourist
8 0 2

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!

Replies 28 (28)

PageFly-Noah
Shopify Partner
1288 229 262

 

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

nnnnoooonames
Tourist
8 0 2

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
Shopify Partner
1288 229 262

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

nnnnoooonames
Tourist
8 0 2

Hi, Noah!

 

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

The issue is still there...

PageFly-Noah
Shopify Partner
1288 229 262

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.

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

nnnnoooonames
Tourist
8 0 2

Just added/saved your code to theme.liqiud

PageFly-Noah
Shopify Partner
1288 229 262

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.

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

BSSCommerce-B2B
Shopify Expert
464 86 102

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:

BSSCommerceB2B_0-1717823004032.png

 

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: 

BSSCommerceB2B_1-1717823124353.png

 

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! 

 
 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
nnnnoooonames
Tourist
8 0 2

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

BSSCommerce-B2B
Shopify Expert
464 86 102

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:

BSSCommerceB2B_0-1717826437407.png

 

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.

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
nnnnoooonames
Tourist
8 0 2

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
Shopify Expert
464 86 102

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: 

BSSCommerceB2B_0-1717875491972.png

BSSCommerceB2B_1-1717875499152.png

 

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.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
nnnnoooonames
Tourist
8 0 2

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
Shopify Expert
464 86 102

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:

BSSCommerceB2B_0-1717945990617.png

 

 

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

 

BSSCommerceB2B_1-1717946201130.png

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! 

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
nnnnoooonames
Tourist
8 0 2

still doesn't apply...

RafaKL1
Excursionist
14 0 3

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

Vikked
Shopify Partner
2 0 1

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

BSSCommerce-B2B
Shopify Expert
464 86 102

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.

 

BSSCommerceB2B_0-1718076854140.png

 

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

Go to shopify/admin: 

- You can edit in Settings => Checkout > Customize

BSSCommerceB2B_1-1718078212387.png

Select change color of accent: 

BSSCommerceB2B_2-1718078304383.png

And save this settings.

 

=>> Checkout page:

BSSCommerceB2B_3-1718078484599.png

 

 

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! 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
RafaKL1
Excursionist
14 0 3

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

Kessarkess
Excursionist
23 0 9

did you find any solution? 

Vikked
Shopify Partner
2 0 1

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
Shopify Expert
464 86 102

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. 

BSSCommerceB2B_0-1718123662085.png

 

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.

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Kessarkess
Excursionist
23 0 9

i am having the same issue anyone found a solution?

Kessarkess
Excursionist
23 0 9

Did you find a solution?

Kessarkess
Excursionist
23 0 9

Did you find a solution? i have the same problem

BSSCommerce-B2B
Shopify Expert
464 86 102

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! 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Kessarkess
Excursionist
23 0 9

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
Visitor
1 0 0

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