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
5615 1021 1348

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
45 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

 

 

Product Designer & Variants: Create custom products with ease. (Try for free)
Need a Shopify developer? Hire Us
Email: info@scaleupprint.com For Shopify tips & tricks follow our YouTube channel
whitneyallysyn
Shopify Partner
1 0 0

Perfect instructions! Thank you!

scaleupprint
Shopify Partner
45 4 11

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

Product Designer & Variants: Create custom products with ease. (Try for free)
Need a Shopify developer? Hire Us
Email: info@scaleupprint.com For 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
45 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.

 

Product Designer & Variants: Create custom products with ease. (Try for free)
Need a Shopify developer? Hire Us
Email: info@scaleupprint.com For Shopify tips & tricks follow our YouTube channel
scaleupprint
Shopify Partner
45 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
Product Designer & Variants: Create custom products with ease. (Try for free)
Need a Shopify developer? Hire Us
Email: info@scaleupprint.com For Shopify tips & tricks follow our YouTube channel