Show "But it now" Button on product page

[Maxian]

Greetings! I hope everything is fine. I am facing an issue with the "Dynamic Checkout" buttons in my Shopify theme. When I enable the "Dynamic Checkout" buttons in the theme settings, the product page displays Shopify Payments buttons like "Shop Pay," which I don’t want to show. Instead, I want the "Buy It Now" button to appear when the "Dynamic Checkout" option is enabled.

Previously, the "Buy It Now" button was appearing as expected. However, after integrating Shopify Payments, the Shopify Payment method buttons are now showing up instead. If I disable the "Dynamic Checkout" buttons, only the "Add to Cart" button remains visible on the product page. But when I enable the "Dynamic Checkout" buttons, the Shopify Payments buttons show up. Currently i am using reformation theme

[Guleria]

Hello @Maxian ,

Please check this article https://help.shopify.com/en/manual/online-store/dynamic-checkout
btw its possible to do it but need customization.

If problem solved don't forget to Like it and Mark it as Solution!
And if you need help with customization/code part you can contact me for services

You can find the email in the signature below.

Thanks

[Maxian]

Brother, can you please tell me a little about what customization I will need to do in this?

[Guleria]

There are two  kinds of dynamic checkout buttons:

Unbranded and Branded ( You can check the in previous article I shared )
Now when you have 2 different types mean snow you have to identify the classes and hide/show the buttons a/to your need.

e.g.
Css will be:

<style>
  .shopify-payment-button__button--unbranded {
    display: block !important;  
  }

  .shopify-payment-button__button:not(.shopify-payment-button__button--unbranded) {
    display: none !important;  
  }
</style>

and JS will be

 
  document.addEventListener("DOMContentLoaded", function () {
    // Select all dynamic checkout buttons
    const paymentButtons = document.querySelectorAll('.shopify-payment-button__button');

    paymentButtons.forEach(button => {
      if (!button.classList.contains('shopify-payment-button__button--unbranded')) {
        // Hide branded payment buttons (e.g., Shop Pay, PayPal)
        button.style.display = 'none';
      } else {
        // Ensure the "Buy Now" button is visible
        button.style.display = 'block';
      }
    });
  }); 

[Maxian]

I have pasted your code in the app.css & app.js file but nothing happened

[Guleria]

I shared an example.

It was not a solution you have to take an idea from it and use it a/to the theme you are using.