Enable direct checkout with the (P) Dynamic Checkout Button element

 

This article will help you understand what the Dynamic checkout button is and how to implement one on your store with GemPages.

 

What is the (P) Dynamic Checkout Button?


The Dynamic checkout button is an alternative to the Add to Cart button for a single product.

It allows customers to skip the cart step to purchase products directly.


There are two types of Dynamic checkout button:

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.

The Dynamic checkout button is represented by the (P) Dynamic Checkout Button element in GemPages. The following sections will cover everything you need to know about this element.


Add the (P) Dynamic Checkout Button to your page

 

The (P) Dynamic Checkout Button is a child element of the Product module. Therefore, it must be nested inside a Product module to function properly.

 

Step 1: In GemPages Dashboard, choose a page and enter the Editor via the “Edit” button


Step 2: Drag & drop a Product module onto your page. Next, drag & drop a (P) Dynamic Checkout Button inside the Product module.


Skip this step if you already have these elements on your page.



The configurations of the (P) Dynamic Checkout Button will be available on your left sidebar. We’ll go over all the parameters in the next section.

 

Configure the Settings tab

 

The (P) Dynamic Checkout Button element’s settings are only for the Unbranded button. For the Branded button, its design will strictly follow the payment providers.

 

Typography


In this section, you can adjust:


Font size: Adjust in pixels using the slider or the number box

Font: You can choose from the list or upload your custom font.

Font style: Bold, Italic, or Underlined

Text Transform: Choose from the drop-down menu: None, Uppercase, Lowercase, or Capitalize.


 

Button Color


The Button Color section provides controls over button colors and size:


Stretch Button: Toggle this switch on to stretch the width of the button to fully accommodate the row it’s put in

Background Color: Enter the hex color code for your button

Text Color: Enter the hex color code for your text

Hover Options: Toggle this on to enable the hover effect. Once turned on, there will be 2 more parameters:

  • Background Color Hover: Adjust the button’s background color when hovered.
  • Text Color Hover: Adjust the text’s color when hovered.

 

Alignment


Align your (P) Dynamic Checkout Button element based on 3 positions, Left, Center and Right.


 

Extra Class


If you know about coding and would like to further customize the element, use the Extra Class field to name a class and then refer to it later on in your CSS file.


 

Configure the Design tab


Next to the Settings tab is the Design tab, where you find all the tools you need to perfect your element’s appearance on the live page. Check out this article for a comprehensive look at the Design tab.



After you’ve done all the editing, it’s time to hit “Save” and “Publish” to bring your Dynamic checkout button to the front store!

 

 


Should you need any further assistance, please feel free to contact our GemPages Support Team anytime via email or live chat.


Was this helpful?