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

Solved

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

timmycodes88
Shopify Partner
5 0 4
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
Untitled.png
Accepted Solution (1)
LitExtension
Shopify Partner
4860 1002 1160

This is an accepted solution.

Hi @timmycodes88,

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

beforebeforeafterafter

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 6 (6)

LitExtension
Shopify Partner
4860 1002 1160

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
timmycodes88
Shopify Partner
5 0 4
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
Shopify Partner
4860 1002 1160

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
timmycodes88
Shopify Partner
5 0 4

Yes simply Debut!

Thank you Lit!!

LitExtension
Shopify Partner
4860 1002 1160

This is an accepted solution.

Hi @timmycodes88,

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

beforebeforeafterafter

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
timmycodes88
Shopify Partner
5 0 4

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

Thank you LitExtension!!