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:

• Unbranded: These buttons display the text “Buy it now.” Upon clicking, customers are directly redirected to the Checkout page.
• Branded: Branded buttons feature logos of third-party payment providers supported by Shopify, including Amazon Pay, Apple Pay, Google Pay, PayPal, Shop Pay, and Venmo. For more details, you can refer to this Shopify article.

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.