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

Technical Q&A
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. :disappointed_face:

I have attached screenshot too.

1 Like
2

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

3

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


    {{ form | payment_button }}

Kani_0-1660818384875.png
Kani_0-1660818384875.png521×279 2.73 KB

10 Likes
4

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

1 Like
5

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

6

:sad_but_relieved_face:

7

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; }
1 Like
8
9

Hi,

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

Please put the above CSS code before the 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

6 Likes
10

Thank you! Works perfectly. :folded_hands:

11

Perfect instructions! Thank you!

12

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

13

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.

14

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

15

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

16

I’m unable to find “{{ form | payment_button }}” in the “main-product.liquid” file

2 Likes
17

Hi Kani,

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

18

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