Changing the checkout pay now button text color

Changing the checkout pay now button text color

Monk4
New Member
5 0 0

Please help me change the text color of the PAY NOW button to #E2C8A5 
I tried troubleshooting it myself but couldn't get it to work. 

Site: 

0fa63b-3.myshopify.com

 

1c023415-960f-400f-ab01-1d601c4da5d3.png

Replies 4 (4)

PageFly-Richard
Shopify Partner
4394 1005 1657

 

Hi @Monk4 

 

This is Richard from PageFly - Shopify Page Builder App

 

You can follow my steps below to get edit the button color in the settings

Step 1: Settings > Checkout

Step 2: click on customize checkout : 

PageFlyRichard_0-1709685153687.png

After that scroll down and you will see button accent

PageFlyRichard_1-1709685249406.png

 

 

Hope this can help you solve the issue 

 

Best regards,

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

websensepro
Shopify Partner
1053 149 156

Hi Monk4,

To change the text color of the "PAY NOW" button in the checkout page

you'll need to add custom CSS to your Shopify theme.

 

Here's how you can do it:

1.  Access Your Shopify Admin

2.  Go to Theme Editor

3.  Edit Code

4.  Locate Checkout Page CSS

5. Add Custom CSS (Add the following CSS code  in the bottom to change the text color of the "PAY NOW" button:)

 

/* Change the text color of the "PAY NOW" button */
.shopify-payment-button__button {
    color: #E2C8A5 !important;
}

 

Save Changes

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Tenlima
New Member
5 0 0

Hi Websensepro, 

 

I would also like to chance the font color of the pay now button but I can't find the Checkout Page CSS in the code. Can you give a bit more detail on how to locate checkout page CSS and the next steps? Thank you!

 

Tenlima_0-1718886465382.png

 

Tenlima
New Member
5 0 0

Hi @websensepro, would you be able to help me with the above? I haven't managed yet.