How to use the Dynamic Checkout button

 

 

This article will walk you through the steps to install and use the Dynamic Checkout Button add-on to speed up the checkout process on your store


What is a dynamic checkout button?

The dynamic checkout button is an alternative to the traditional “Add to Cart” button for a single product. By replacing an “Add to Cart” with a dynamic checkout button, you allow customers to skip the cart page and go directly to the checkout page. 


There are two types of Dynamic checkout buttons:

Unbranded: Buttons with the "Buy it now" text. When clicked, customers are taken straight to the Checkout page.

Branded: Logos of the third-party payment providers. Shopify currently supports Amazon Pay, Apple Pay, Google Pay, PayPal, Shop Pay, and Venmo. For more information, see this Shopify article.


In EcomSolid, the Dynamic Checkout Button add-on lets you take advantage of this Shopify direct checkout mechanism. We’ll walk you through the steps to use the add-on in the next sections.


Add the Dynamic Checkout Button add-on to your theme

The Dynamic Checkout Button add-on could be placed on either the Product Page or the Cart Page.


Step 1: Go to the EcomSolid Dashboard and enter the Editor.

 


Step 2: Open the Library, switch to the Add-ons tab, and search for “Dynamic Checkout Button”. Hit “Add” to install the add-on.

 


Step 3: After a few seconds, the add-on is installed. Hit the target icon, or the “Change position” button to relocate the checkout button.

 

 

Configure the add-on

The Dynamic Checkout Button add-on’s settings are only for the Unbranded button. For the Branded button, its design will strictly follow the payment providers, you can only design how the "More Payment Options" button looks in the Editor.

 

Content tab

Type: Choose the correct type corresponding to your current page.

 

 

Design tab

Button “Buy It Now”

Color
The color parameters include these 6 below and could be adjusted using the color palette or hex color code.

Button Background

Button Background Hover

Button Outline

Button Outline Hover

Button Text

Button Text Hover

 

 

Text
Button Text Font Size: Adjust in pixels using the mini box or the arrows.

Text Transform: Decide for the button label text to be normal (default), uppercase, or capitalized.

 

 

Button “More Payment Options”

Same parameters as the “Buy It Now” button.

 

The "More Payment Options" button will show up for the Branded button, and all the changes will not be shown in the Editor. However, the button will appear exactly the way you design it on the live page.

 


When everything is in place, hit “Save” and “Update Live” to bring the changes to your front store!

 


Check out more of our articles here to master EcomSolid. Should you need any further assistance, our EcomSolid Support Team is here to help.

We can be reached at any time via email or live chat.


Was this helpful?