Dynamic Checkout Button Element

About the Dynamic Checkout Button

The Dynamic checkout button serves as an alternative to the Add to Cart button, which enables customers to bypass the cart step and make direct purchases.

There are two main types of Dynamic Checkout buttons available:

1. Branded button

Branded buttons appear when third-party accelerated checkout methods supported by Shopify are enabled in your store. These buttons display the official logos of the providers, making it easier for customers to recognize and complete checkout with their preferred service.

Supported providers include:

• Amazon Pay
• Apple Pay
• Google Pay
• PayPal
• Shop Pay
• Venmo

For more information, you can check out this Shopify article.

2. Unbranded button:

Unbranded buttons display the text “Buy it now” when no payment gateways are enabled. Once a customer clicks, they skip the cart and are taken directly to the Shopify Checkout.

The display of unbranded buttons can vary depending on several factors, such as:

• Payment settings in your Shopify admin
• Customer’s device and browser
• Customer’s previous payment history

Add a Dynamic Checkout Button element to your page

To add the Dynamic Checkout Button to your page, please follow these steps:

Step 1: Go to the GemPages Dashboard > Pages and select the page you want to work on to enter the Editor.

Step 2: From the left sidebar, enter Dynamic Checkout in the search bar, then drag and drop the element into a Product Module, placing it in your preferred spot.

Step 3: Click on the element to open its settings. From here, you can customize it your way within the Settings and Advanced tabs.

Configure the Settings Tab

The Settings tab provides you with a range of options to configure and customize the behavior and appearance of the Dynamic Checkout Button.

Product source

As this element is nested within the Product module, the product source will be automatically synced with the module.

However, if you prefer another product, click on the current product to manage it in the Product element.

Size

Under the Size section, adjust the width, height, and padding of the button:

• Width: Choose from the dropdown option, including the Fit content (Auto), Full (100%), Small (100px), Medium (116px), and Large (132px). You can also enter an exact desired percentage in the box.
• Height: Customize the height, or select from available options: Fit content (Auto), Small (28px), Medium (36px), and Large (44px).
• Padding: Click the “+ Add…” box to open the padding’s settings panel. 

Background

GemPages allows you to set the button’s background by choosing a color or using an image:

• Color: Open the settings panel to select the preferred color for your button. You can use a solid color background or a gradient one.

• Image: Upload a new image or select from your media gallery. Next, modify the image as you prefer in the settings panel.

Shape

To improve the button’s look, you can add a shape, adjust the corner radius, and add a shadow effect in the Shape section:

• Border: Choose the border’s color, thickness, and border stroke (line, dash, or dot)

• Corner: Adjust the border’s corner radius
  • Higher values = more rounded corners
  • 0 value = sharp, square corners
  • You can link or unlink the corners to apply the same radius to all sides or set each corner individually.

For example, we set the corner radius to 100 to create a pill-shaped button look.

• Shadow: Add depth to your button by applying a drop shadow, which makes the button stand out and ensures a more dynamic look.

Text

Under the Text section, you can customize the button text your way. Hit Show more to see all text settings.

Effect

From here, add a hover effect to your button. Customize how the button looks when visitors hover over your button.

Align

If your button’s width is under 100%, you can change the button alignment: left-aligned, center-aligned, or right-aligned.

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.

You can also find more useful tips and video tutorials at GemPages Academy.