Shopify Dynamic Checkout Button Code – Tested Methods

How to Add and Customize Dynamic Checkout Buttons in Shopify

Introduction

Want to offer faster checkouts and boost your conversion rates? Dynamic Checkout Buttons let your customers bypass the cart and proceed directly to checkout using their preferred payment method like Apple Pay, Google Pay, Shop Pay, or Buy It Now. 

These buttons dynamically adapt based on the customer’s browser, device, and payment setup. There are various  easy methods to enable and customize dynamic checkout buttons in your Shopify store that require no advanced coding.

What is Dynamic Checkout Buttons in Shopify

There are three methods for changing the dynamic checkout buttons in Shopify.

1. Enable Dynamic Checkout Buttons in Shopify Theme Settings
2. Manually Add Using Custom code
3. Install Shopify Apps for Advanced Customizations

Method 1: Enable Dynamic Checkout Buttons in Shopify Theme Settings

Dynamic checkout buttons are the buttons like Apple pay, Google Pay etc where user can directly move to checkout using their preferred method. This is the easiest method for adding Dynamic checkout buttons. File names and locations might be different from theme to theme. Go to the product template and enable the dynamic checkout button setting inside the product form section. Here is the final result, check the GIF below to see how it will look before we go through the steps.

Step 1: Navigate to Shopify Admin > Settings and click on it.

Step 2: Navigate to the Payment section and click the Add payment method button.

Step 3: Search payment method from here and click select the payment methods  you want to add to your Shopify store.

Step 4: After selecting the payment methods choose the payment provider and create your account by providing personal details like Name, city, country, bank details and set this up.

Note: Development stores can only process test Payments

1. Click on activate test payment provider link

2. Check the box and click the Reactivate/Activate button.

3. Some third party payment providers list here.

Step 5: Navigate to Online Store > Themes > Customize

Step 6: Navigate to the product page. 

Step 7: Go to the product information/details section and look for the product form related settings can be in the main section settings or block base approach eg. Buy-buttons block.

Step 8: Enable the Show dynamic checkout buttons setting.

Step 9: Click Save.

Method 2: Manually Add Using Custom code

If your theme doesn’t support native settings to show dynamic checkout buttons or you want to show elsewhere in the Product Page or Cart Page then you can used custom coding to add the dynamic checkout buttons using liquid. Follow these steps to add dynamic checkout button using custom coding.

Step 1: Navigate to Online Store > Themes > Edit code

Step 2: Look for the main-product.liquid file or the file where product form code exists. Looks something like that

Step 3: Scroll down the file and add this code where you want to show these buttons usually after the add to cart buttons they will appear.

  
    <div class="dynamic-checkout">
        {{ form | payment_button }}
    </div>
  

Step 4: Click the Save button to save the changes.

Method 3: Using Shopify Apps for Advanced Customizations

You can install apps from Shopify app store to add dynamic checkout buttons by using apps without any coding knowledge. Follow these step by step.

Step 1: Navigate to Shopify Admin > Apps

Step 2: Click on All recommended apps button here.

Step 3: Navigate to the Shopify app store using this link.

Step 4: search for the app you want to add eg. Instant Checkout-Buy Button app.

Apps like