How to change text & color of Buy It Now button in your Shopify

By Vivek Goyal | 9/18/2023

Shopify Dawn theme provides a "Buy it Now" button on the product page for fast checkout. If you need to change the text and color of the "Buy It Now" button, you can achieve it using custom CSS code.

Steps to change text & color of Buy It Now button in Shopify:

  1. Go to Shopify Admin.
  2. Open the code editor.
  3. Add the following custom CSS code to change text & color of 'Buy It Now' button:

CSS code to change text & color of 'Buy It Now' button in Shopify:


            .shopify-payment-button__button--unbranded {
                font-size: 0 !important;
                background: white !important;
                color: black !important;
            }

            .shopify-payment-button__button--unbranded::before {
                content: 'Your text here';
                position: absolute;
                visibility: visible;
                top: 0;
                left: 0;
                bottom: 0;
                font-size: 14px;
                display: contents;
            }
        

Watch the demo video below to see the above steps in action:

Click here to subscribe to our YouTube channel.


Also, check out our other video based on setting Global Custom CSS using theme settings options:

Links for our other useful Shopify tutorial videos:

Copyright © 2024 Scale-up print. All Rights Reserved.