Dynamic checkout button
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
Summary: allows customers to quickly purchase a product they’re viewing without going through the cart. By clicking this button, customers skip the cart step and proceed directly to checkout using the payment method displayed on the button. The button dynamically changes based on the customer’s preferred accelerated checkout method.
Important Note: The Dynamic checkout button is only available for the Gen 2 editor in PageFly, which is exclusively available for stores using the Pay-as-you-go pricing model ().
There are two types of Dynamic checkout buttons:
Unbranded Button: This type displays simple text like "Buy it now". When customers click this button, they skip the cart and are taken directly to the Shopify Checkout.
Branded Button: This type displays the logo of a third-party accelerated checkout method, such as Paypal or Google Pay. When clicked, the customer completes their purchase using the branded checkout method displayed on the button.
The type of Dynamic checkout button shown to your customers depends on several factors:
Your payment settings (the methods you have activated).
The customer’s browser.
The customer’s device.
The customer’s personal payment history (such as past purchases made with Apple Pay or Google Pay).
Before delving into the specifics, we recommend watching the video tutorial below
Important Note: The Dynamic checkout button must be placed under the Product details element to function properly.
In PageFly pages, follow these steps to access the Dynamic checkout button:
Step 1: Open the PageFly editor, and click on the Elements panel on the left-hand side.
Step 2: Switch to the Shopify tab, which contains Shopify elements.
Step 2: Click on the Dynamic checkout button element in the Production section.
Step 3: Drag and drop the element you want into the page editor and start using it.
Click the Dynamic checkout button and navigate to the General and Styling tabs to configure it.
In the General tab, you can customize the text displayed on the Dynamic checkout button by entering your preferred text in the “Button text” field. For example, you can use “Buy It Now”.
To customize the appearance of the Dynamic checkout button, select it and switch to the Styling tab. The level of customization available depends on the type of Dynamic checkout button in use.
Branded Dynamic Checkout Button
When the Dynamic checkout button displays with third-party branding (like Apple Pay or Google Pay), it will automatically match the brand’s style. Merchants cannot adjust the styling of these branded buttons.
Unbrand Dynamic Checkout Button
If the button is unbranded (meaning the conditions like your payment settings, Shop Promise, customer’s browser, device, or personal payment history aren’t met), you can fully adjust the styling of the Dynamic checkout button to match your store’s design.
Important Note: Gen 2 Editor Beta is now closed. Pages and sections created with Gen 2 Editor will remain fully functional. Enhanced version will be coming soon.
Here’s how to make the Dynamic checkout button full-width:
Go to the Styling tab after selecting the button, then navigate to Size.
Under the Width option, choose "Fill the container". This will make the button stretch across the entire width of its container.
Branded Dynamic checkout buttons automatically display the brand’s styling for consistency, and these cannot be customized. To maintain a cohesive store design, focus on customizing other elements around the button, such as product images and background colors, to enhance the overall page look.
You must double-check to ensure the button is placed under the Product details element in PageFly, as it only works when correctly linked to a product.
The Dynamic checkout button is designed for single variant purchases only. For example, a customer can buy two red T-shirts, but cannot buy one red and one blue T-shirt in the same transaction. To allow customers to purchase multiple variants, guide them to use the Add to Cart button instead. This ensures they can select multiple variants and proceed to checkout normally.
Alternatively, you can add a Dynamic Checkout Button by the custom code below. This method works for both Legacy editor and Gen 2 editor-built pages.
Watch this video to learn more about how to create the Buy It Now button in PageFly.
Please note that this only works inside the Product Details element (You have to add this into the Product Details element with the option Combined Variant turned on)
In this case, we need to use the **HTML/Liquid** element and add code into it. Please follow these steps below:
Step 1: Select “Elements" on the left sidebar
Step 2: Find and choose the “HTML/Liquid” element
Step 3: Drag and drop this element into the page editor
Step 4: Click on the Open Code Editor button in the General tab to open the HTML/ Liquid Code Editor
Step 5: Paste this code below into: {{ form | payment_button }}
You can check the gif below. Note that you need to publish to see the result.
1. Does the Dynamic checkout button support discount codes?
Yes, customers can still apply discount codes when using the Dynamic checkout button during the checkout process. The discount field will appear on the checkout page, allowing customers to enter a code.
2. What happens if a customer’s preferred payment method isn’t available?
If the customer's preferred payment method isn’t enabled in your Shopify payment settings or isn’t supported by their device, an unbranded button will appear, allowing the customer to complete the purchase through Shopify’s standard checkout.
3. What third-party payment methods are supported by the Shopify Dynamic checkout button?
The Dynamic checkout button supports several third-party accelerated payment methods, including Amazon Pay, Apple Pay, Google Pay, PayPal, Shop Pay, and Venmo.
Whether is active, which prioritizes .
You can read more about the Shopify Dynamic checkout button .
For more detailed information on other settings in the General tab like Tracking, Attributes, Visibility, and Animation, refer to the .
You can check more information about the styling settings using .
In order to add the , you need to set up the Paypal in your Shopify store and then use the code above.
