One-click Checkout Button

Customers can use the dynamic checkout button to quickly purchase the product they’re viewing. They skip the cart and complete their payment with the accelerated checkout method displayed on the checkout.

• Enabling Dynamic Checkout 
• Limitations 
• Disabling Shopify’s Dynamic Checkout Button on Product Page
• Add custom checkout logic to the product form
• Facing issues?

Read more about Dynamic checkout buttons on Shopify.

Enabling Dynamic Checkout

This guide will walk you through on how to enable Express Checkout on your store for your customers.

1. Disabling Shopify’s Dynamic Checkout Button in Code
2. Add custom checkout logic to the product form

Limitations

According to Shopify, the accelerated checkout buttons (Paypal, ShopPay, Apple Pay) are only presented to customers in the storefront (product/ cart page) or checkout and not both. This guide ensures that this option is available for the customers on the product page.

---

Disabling Shopify’s Dynamic Checkout Button on the Product Page

1. Head to your Shopify Admin > Themes > Actions > Edit code
2. Search in files for main-product.liquid
3. In the main-product.liquid file search for “payment_button”
4. Comment the lines out by adding {% comment %} and {% endcomment %} above the {%- if - line and below the {%- endif -%} respectively

Add Loop Smart Logic to the product form

1. Below the {% endcomment line add the following code
   <button type="button" style="background:#FFCE00; width:100%; border:none; cursor:pointer" class="shopify-payment-button__button .shopify-payment-button__button--unbranded" onclick="addToCheckout()">Buy it now</button>

You can customize how this button looks by modifying the CSS in the above code

2. Next, we will add the following function below the </button> code that we just added.
   <script> function addToCheckout () { location.href = `/cart/clear?return_to=/cart/add?items[][id]=${document.querySelector("[name='id']")?.value}%26items[][quantity]=${document.querySelector("[name='quantity']")?.value}%26items[][selling_plan]=${document.querySelector("[name='selling_plan']")?.value}%26return_to=/checkout` } </script>
3. Once these steps are done, the code should look like this on the main-product.liquid file 

Note that this will enable the express checkout options for the customer in the checkout page as well.

Suggested Reads

Here are a few articles that you may find helpful, and we suggest you go through the same 

1. Loop Flows
2. Direct checkout URL
   

Facing issues?

If you have any queries or doubts about any of these steps. Please reach out to support@loopwork.co

Thanks
Loop Subscription Team