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.

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

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

Step 2: If you don’t already have a Product module, drag and drop one onto your page.

Step 3: Now, drag and drop the Dynamic Checkout Button element inside the Product module, placing it in your preferred spot. Keep in mind that it needs to be nested within the Product module for it to function correctly.

Clicking on the element, you will notice the settings configuration displayed on the left sidebar. It consists of two main tabs: Settings and Advanced. These tabs provide you with a range of options to configure and customize the behavior and appearance of the product cart button.

Configure the Settings Tab

Content

Change the label of the Dynamic Checkout Button in the GemPages editor by entering your desired text in the Label field on the left.

Text

Style: Select a style for the button label from the available pre-determined styles.

Font: Choose the font for your text label from the drop-down menu. In case, you would like to use other fonts, check out how to use a custom font here.

Sizes: Determine your preferred font size.

Click on the “Show more” button to reveal more customization options. 

Font Weight: Choose your desired font weight from the provided drop-down menu.

Line Height: Adjust the height of the text by specifying a percentage value.

Letter Spacing: Modify the spacing between letters by inputting a value in pixels.

Text transform: Transform the text to uppercase, lowercase, or capitalize as desired.

Size

Choose your preferred size for your button from the pre-determined style. You also have the option to customize your own size by entering your desired width/height/padding

States

You can now style the button for its normal state and when hovered over. Adjust the button and text colors, corners, borders, and add a shadow to match your design preferences. This gives you the flexibility to customize the button’s look as you see fit.

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.