How can I customize dynamic Buy Now buttons in product-template.liquid?

[timmycodes88]

I would like to edit the code inside here: {{ form | payment_button }} found in the product-template.liquid in the sections folder of debut.

My goal is to have an Add to Cart Button, Buy Now Button (which takes you straight to checkout), a Paypal button (always not dynamic) and text button saying More Payment Options .

I can't seem to find a way to edit this {{ form | payment_button }} code 

Another solution would be making my own Buy Now Button that takes you straight to checkout however I can figure out how to do this either

Any help in a solution would be great!

I want to go from the left image to the right

[LitExtension]

Hi @timmycodes88,

You cannot edit the code at '{{ form | payment_button }}', the code is rendered automatically according to your payment settings.

So you can just change the payment settings, let it support only PayPal, or customize the button to go straight to the checkout page like your suggestion.

Hope it is clear to you.

[timmycodes88]

Is it possible that I can code a button that is similar to the buy now
button seen in the customizer. I don’t understand Shopify’s JS yet and
can’t find a Buy Now Button solution online

I feel like it has to do with a form to post the product and a redirect to
checkout

Thanks

[LitExtension]

Hi @timmycodes88,

You can totally add code to show buy now. What theme are you using? Please send me the theme name, I will help you check it.

[timmycodes88]

Yes simply Debut!

Thank you Lit!!

[LitExtension · Accepted solution]

Hi @timmycodes88,

Please go to product-template.liquid file, find 'payment_button' and change code here:

beforeafter

Code:

<button type="button" class="btn product-form__cart-submit btn--secondary-accent" data-buy-now>
                  <span>
                    Buy now
				  </span>
                </button>
                <script>
                  document.querySelector('[data-buy-now]').addEventListener('click', () => {
                    let addToCartForm = document.querySelector('form[action$="/cart/add"]');
					let formData = new FormData(addToCartForm);
                    fetch(window.Shopify.routes.root + 'cart/add.js', {
                      method: 'POST',
                      body: formData
                    })
                    .then(response => {
                      window.location.href = '/checkout';
                      return response.json();
                    })
                    .catch((error) => {
                      console.error('Error:', error);
                    });
                  });
                </script>

Hope it helps!

[timmycodes88]

So grateful, I was able to implement exactly what I wanted!!

Thank you LitExtension!!