Shopify Dynamic Checkout – How to implement it on your store

Every year Shopify announces it’s flagship updates in its annual conference called Unite.

Posted 6 years ago by Tamal Santra

Unite 2018 is currently being held from May 7-9 and Shopify has already announced a bunch of new updates like the Multilingual dashboard and the BOGO (Buy one get one) coupon code feature.

But, the biggest update we have had so far from is the new dynamic checkout feature.

Shopify seller community has been craving for long to skip the cart page as a mandatory step in the checkout process. With the release of dynamic checkout, we have finally got a way to let the customers directly checkout from the product page.

Let’s find out more about dynamic checkout and how to implement it on your Shopify store.

How Shopify dynamic checkout works?

Dynamic checkout is the way to skip the cart page to directly go to the payment option to checkout. You can also personalize the experience  by offering the visitor’s favourite payment option on the product page.

How it works?  

When you enable dynamic checkout option on your Shopify store, you should see extra payment gateway buttons along with the default Add to cart button on the product pages.

Now, there can be two scenarios:

i) Branded payment button:

When Shopify detects the preferred choice of payment methods of the visitors ( from the customer’s browser/mobile device ) then the branded buttons for those payment methods should be placed on the product page. Remember that the payment methods should be active in the payment settings of your Shopify store.

For now, Shopify is supporting these three accelerated checkout methods.

• Amazon Pay
• Apple Pay
• PayPal

Check the example below:

Image source: Shopify.com

In the above example, the payment method preferred by the visitors is the Apple Pay. That’s why the customer sees the “Buy with Apple Pay” button on the product page.

However, the visitor can access the other payment options in the ‘More payments options’ link just below the brand specific payment buttons. When the customers click on the link, a pop-up that shows all of the available payment options appears. The visitor also get the option to use gift card or a discount coupon here.

Image source: Shopify.com

ii) Generic Buy Now button:

Unlike the above scenario, if Shopify is unable to detect any preferred payment of the visitor then the unbranded ‘Buy Now’ button will show up on the product page. Once the visitor clicks the button she will get all the options for payment methods and discount coupon or gift card.

Image source: Shopify.com

How to get dynamic checkout feature for your store?

Dynamic checkout buttons are available on all latest versions of the themes in the Shopify theme store. There’s no word from Shopify about the third party themes.

Here’s how to check the version of the theme you are using on your store:

1. In your Shopify dashboard, go to the Online Store and then Themes.

2. Click on Customize as shown below:

3. Then go to Theme settings and scroll down to the bottom as shown below. You will find the version of the theme.

What if you are using an older version of the theme?

To use the dynamic checkout, you have to either update your Shopify theme to the latest version or edit the code of your theme to insert the dynamic checkout codes.

If you don’t want to update your theme:

If you have modified your current theme with additional codes according to your need then you may like to avoid all the troubles to implement the same changes again after updating the theme.

In that case, you need to implement the dynamic checkout codes to your current theme by editing it’s template codes. However, you may need some Shopify theme experts help for that.

However, if you are familiar with Shopify codes, here’s a guide by Shopify on how to edit the templates for the dynamic checkout buttons

If you are using the current version of the Shopify theme:

You can add the dynamic checkout buttons on the product pages or on a featured product section.

Adding dynamic checkout buttons:

Here are the steps to activate the dynamic checkout buttons on the product pages.

1. Go to your Shopify dashboard (on your desktop)

2. Go to Online Store and then click on Themes.

3. Select the theme in use to add the buttons to and then click Customize.

4. From the drop-down menu option of the top bar, select Product pages.

5. Click Sections then click on Products.

6. Check Show dynamic checkout button in the checkbox

7.click the Save button.

Then you can test it live by following these steps here.

Similarly, you can enable the dynamic checkout buttons in the featured product section from the theme customization options.