One-click Checkout Button

Overview

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.

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 check out 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 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

  1. 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>
  2. 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.


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

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us