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

ShopRight
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 17 (17)

ZestardTech
Shopify Expert
5467 984 1309

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Dmytr
Shopify Partner
1 0 0
<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
Shopify Partner
468 125 225

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>

 

Kani_0-1660818384875.png

 

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. 🙂
Asimiqbal
Visitor
1 0 1

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

Idan3
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?

sneakers714
Visitor
1 0 0

😥

MainBikeCo
Visitor
1 0 0

Thank you! Works perfectly. 🙏

NeatNiche
Visitor
1 0 1

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

elementi
Shopify Partner
2 0 0

Hi Kani,

 

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

Faith911
Shopify Partner
13 0 4

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

Kumar2573
Shopify Partner
171 8 21

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>

Shopify Certified Developer Profile - https://www.credly.com/badges/1733d05c-2a88-490a-aef5-b01baf3b94ce/public_url
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 :- jitendra3496@gmail.com | Skype :- jitendra2573_1
- Direct Hire me :- Direct Contact me

scaleupprint
Shopify Partner
40 4 11

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

 

 

If you find my post helpful, please like and accept solution
Advanced Product Customizer Image Swatch, Color Swatch, unlimited product options, product designer for personalized products
Email: info@scaleupprint.comFor Shopify tips & tricks follow our YouTube channel
whitneyallysyn
Shopify Partner
1 0 0

Perfect instructions! Thank you!

scaleupprint
Shopify Partner
40 4 11

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

If you find my post helpful, please like and accept solution
Advanced Product Customizer Image Swatch, Color Swatch, unlimited product options, product designer for personalized products
Email: info@scaleupprint.comFor Shopify tips & tricks follow our YouTube channel
Shafiko1
Visitor
1 0 0

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

scaleupprint
Shopify Partner
40 4 11

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.

 

If you find my post helpful, please like and accept solution
Advanced Product Customizer Image Swatch, Color Swatch, unlimited product options, product designer for personalized products
Email: info@scaleupprint.comFor Shopify tips & tricks follow our YouTube channel
scaleupprint
Shopify Partner
40 4 11

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
If you find my post helpful, please like and accept solution
Advanced Product Customizer Image Swatch, Color Swatch, unlimited product options, product designer for personalized products
Email: info@scaleupprint.comFor Shopify tips & tricks follow our YouTube channel