How can I change 'Shop Pay' to 'Buy Now' on my payment button?

[GymCat]

Dear Guys, my standard theme buy button says BUY NOW. But its being replaced by Shop Pay button and some additional unwanted text. Can someone please help me out. The thing that is unwanted is shown below..........

I just want to remove this More Payment Options, and replace the words........ BUY WITH SHOP PAY with the words....... BUY NOW. The color can remain the since purple looks good. And by clicking on the button, it should straight take it to the checkout page, just like it does when we click on More Payment Options.

Please help guys.

@Dan-From-Ryviu 

[Dan-From-Ryviu · Accepted solution]

Hi @GymCat 

Go to your Online store > Themes > Edit code > open product-button.liquid, find this line of code

{%- if show_dynamic_checkout -%}

Add those code right above 

<button type="button" class="like-ShopPay-button shopify-payment-button__button--shoppay">BUY NOW</button>
<style>
  .like-ShopPay-button {
    margin-top: 13px;
    color: #fff !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    border-width: 1px !important;
    border-style: solid !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    -webkit-box-shadow: 0 0 0 0 transparent !important;
    box-shadow: 0 0 0 0 transparent !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    padding: 0 !important;
    text-align: center !important;
    -webkit-transition: all 0.2s ease-out !important;
    transition: all 0.2s ease-out !important;
    width: 100% !important;
    font-size: 16px !important;     
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 !important;
    flex: 1 !important;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    padding: 4px !important;
    min-height: 44px !important;
    max-height: 60px !important;       
    padding-top: 16px!important;
    padding-bottom: 16px!important;
    font-family: 'Jost';        
    background: #5a31f4 !important;
    border-color: #5a31f4 !important;                    
  }    
  .like-ShopPay-button:hover {
    background: #3c0def !important;
    border-color: #3c0def !important;                      
  }
  .productView-groupBottom { display: none !important; }
</style>
<script>
  $(".shopify-payment-button__button--shoppay").on('click', function (event) {
    event.preventDefault();      
        $( ".shopify-payment-button__more-options").trigger( "click");
  });
</script>     

[GymCat]

It worked brilliantly. Thank you Dan. You are amazing as always.

[Dan-From-Ryviu]

You are very welcome, @GymCat 

[6kaya]

I am al;so having this problem but I cant find the product-button.liquid file in the edit code. i am on the Ride theme fyi.

thank you in advance

[Kimo1]

hey dan i tried the same code that you gave him and it didn't work what should i do 

[Kimo1]

my url is enutrivital.uk 

[Yamilet23]

Is their a way to change the dynamic checkout button and "more payment options" to just the custom "Buy it now" we see on our store editor? If I deselect the "show dynamic checkout buttons" it just deletes the entire buy button. Can this be done without deactivating other payment methods (Shop Pay, PayPal, etc.)? Maybe through deleting a section of the buy button's code?

[ValueEffzeh]

I got the same problem and can't find the product-button.liquid either

[ValueEffzeh]

Hi Dan, I can't find the product-button.liquid.
Has it changed? Thank you 🙂

[Dan-From-Ryviu]

Hi @ValueEffzeh 

Could you share your store URL?

[AlexMcGann]

Hi Dan,

Just to add on to this - I'm attempting to do the same thing, but the button seems non-interactable in attempting to use the above code. I would hugely appreciate it if you could modify it to fit my site, linked below:

https://fukil.com/

Thank you so much - I really appreciate the help. 

Alex

[Dan-From-Ryviu]

Please try to update code to this and check again 

<button type="button" class="like-ShopPay-button shopify-payment-button__button--shoppay">BUY NOW</button>
<style>
  .like-ShopPay-button {
    margin-top: 13px;
    color: #fff !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    border-width: 1px !important;
    border-style: solid !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    -webkit-box-shadow: 0 0 0 0 transparent !important;
    box-shadow: 0 0 0 0 transparent !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    padding: 0 !important;
    text-align: center !important;
    -webkit-transition: all 0.2s ease-out !important;
    transition: all 0.2s ease-out !important;
    width: 100% !important;
    font-size: 16px !important;     
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 !important;
    flex: 1 !important;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    padding: 4px !important;
    min-height: 44px !important;
    max-height: 60px !important;       
    padding-top: 16px!important;
    padding-bottom: 16px!important;
    font-family: 'Jost';        
    background: #5a31f4 !important;
    border-color: #5a31f4 !important;                    
  }    
  .like-ShopPay-button:hover {
    background: #3c0def !important;
    border-color: #3c0def !important;                      
  }
  .productView-groupBottom { display: none !important; }
</style>
<script>
  document.querySelector(".shopify-payment-button__button--shoppay").addEventListener('click', function(event) {
    event.preventDefault();
    document.querySelector(".shopify-payment-button__more-options").click();
  });
</script>