[V6] (P) Dynamic Checkout Button Element

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 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. Visit this Shopify article for more information.

The Dynamic Checkout button is represented by the (P) Dynamic Checkout Button element in GemPages. The following sections will cover everything to help you use the element in GemPages.

Add the (P) Dynamic Checkout Button to your page

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

Step 2: Open your Library, go to the Elements tab.

Step 3: Search for “dynamic” and select the element

Step 4: Hit the blue “Add element” button. Exit the Library once the (P) Dynamic Checkout Button element has been installed.

Step 5: 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

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 button to the front store!

Here is an example of how the Branded button will look like on the live page (PayPal option):

compared to an Unbranded button: