How can I alter the 'Buy it now' button text on my product page?

[ShopRight]

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.

[ZestardTech]

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

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

setTimeout(function(){
$('.shopify-payment-button__button').text('SHOP IT NOW');
},1000),

Thanks

[Dmytr]

<script>
  // 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(
        '.shopify-payment-button__button.shopify-payment-button__button--unbranded:not(.shopify-payment-button__button--hidden)'
      );

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

  // Run the function every 200 milliseconds until the button is found and updated
  const interval = setInterval(changeButtonText, 200);
</script>

[Kani]

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 }}
</div>

[Asimiqbal]

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

[Idan3]

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

[sneakers714]

😥

[MainBikeCo]

Thank you! Works perfectly. 🙏

[NeatNiche]

I'm unable to find "{{ form | payment_button }}" in the "main-product.liquid" file

[elementi]

Hi Kani,

thank you for your answer, but I can't find the  {{ form | payment_button }}

[Faith911]

When I click on the button with custom text it doesn't go anywhere it should go to the checkout page

[Kumar2573]

Kindly update this css for button text change
<style>
.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;
}
</style>

[Vivek_goyal]

Hi,

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

<style> 
	.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;
	}
</style>

Please put the above CSS code before the </head> tag in your theme.liquid.

For demo, you can refer this tutorial video - https://youtu.be/LVefRmat_g0

Please let me know if more details are required.

Thanks & Regards,

Scale-up Print

[whitneyallysyn]

Perfect instructions! Thank you!

[Vivek_goyal]

Thank you! Glad to you know it was helpful for you.

[Shafiko1]

a great video - works perfectly, thanks for sharing. Do you have a similar tutorial for coding a checkout box in shopify (dawn) when people want to buy a product AND put it into the basket. i use a super app now, but prefer learning the coding if possible

[Vivek_goyal]

Thank you! Glad to you know that the video was helpful for you.

Also, adding the checkout box coding in the to do list for our upcoming videos.

[Vivek_goyal]

Additionally, you can change the text & color of Buy It Now button using our Shopify app Advanced Product Customizer. This is a free to use feature which allows you to change the text & color of Buy It Now button for your Shopify store. This way your existing code of Shopify theme will stay unchanged & clean.

Please refer this video for the demo - https://youtu.be/WsPtCTPrk8A

Please let me know if more details are required.

Thanks & Regards,

Scale-up Print