New Shopify Certification now available: Liquid Storefronts for Theme Developers

How to change " Buy it now" button text?

Shopify Partner
1 0 1

How do I change "Buy it now" text in a button from product page? I tried searching codes but I could not locate it. 😞 


I have attached screenshot too.

Replies 9 (9)
Shopify Expert
5300 950 1262

This is not perfect ,but it's  alternate solution you add this code 

top of  $(theme.init);  in theme.js file

$('.shopify-payment-button__button').text('SHOP IT NOW');



Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Shopify Apps URL :-
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Shopify Partner
1 0 0
  // This function will attempt to find the button and change its text
  function changeButtonText() {

    try {
      // Get the button with text "Buy it now"
      const button = document.querySelector(

      // Change the text of the button
      button.textContent = '{{ section.settings.cta_text | newline_to_br }}';
      // Stop the interval from running
    } catch (err) {

  // Run the function every 200 milliseconds until the button is found and updated
  const interval = setInterval(changeButtonText, 200);
Shopify Partner
465 122 209

HI @ShopRight 


It look like Dawn?

If yes then simple do it like this.

1: Online store > themes > Actions > Edit code > Sections > main-product.liquid

2: find '{{ form | payment_button }}'

3: replace with this code


<button type="button" class="shopify-payment-button__button shopify-payment-button__button--unbranded" onclick="document.querySelector('[data-testid]').click();">Custom Text</button>
<div style="display:none;">
    {{ form | payment_button }}




Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
1 0 1

{{ form | payment_button }}' this code is written on about 639 line 

New Member
7 0 0

I know sometimes Shopify shows the PayPal of google pay buttons. So what will this code change do to that?

1 0 0


1 0 0

Thank you! Works perfectly. 🙏

Shopify Partner
160 8 21

Kindly update this css for button text change
.shopify-payment-button .shopify-payment-button__button--unbranded {
position: relative;
.shopify-payment-button .shopify-payment-button__button--unbranded:after {
content: "Buy Now Button";
background: inherit;
font-size: inherit;
color: inherit;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;

Expert Shopify Plus & shopify Developer & Theme customizer
- If the problem is solved remember to click to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- | Skype :- jitendra2573_1
- Direct Hire me :- Direct Contact me
Shopify Partner
25 4 7



To change the text of 'Buy It Now' button you use the following CSS -


	.shopify-payment-button__button--unbranded {
		font-size: 0 !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;
Please put the above CSS code before the </head> tag in your theme.liquid.
For demo, you can refer this tutorial video -
Please let me know if more details are required.
Thanks & Regards,
Scale-up Print



Try Scale-up Print Designer Web to print designer app for customization feature for your Shopify store.
For Shopify tips & tricks follow our YouTube channel