Showing dynamic checkout buttons on your online store

Dynamic checkout buttons are an alternative to the Add to cart button for single products. With dynamic checkout buttons, customers can skip the cart and go directly to the checkout. Customers can choose to check out with Shopify, or with another familiar accelerated checkout method. This helps to speed up the payment process and lets customers check out using a method that they're comfortable with.

A branded dynamic checkout button with an Apple Pay logo

Overview

The dynamic checkout button appears beside or below the Add to cart button, depending on your theme and the customer's device. There are two different kinds of dynamic checkout buttons:

  • Unbranded buttons show Buy now text. If a customer clicks an unbranded Buy now button, then they skip the cart and go to the checkout.

An unbranded dynamic checkout button with Buy now text

  • Branded buttons show the logo for third-party accelerated checkout methods. If a customer clicks on a branded button for a third-party accelerated checkout method, such as Apple Pay, then they go to the checkout for that method with their information pre-populated. The following third-party accelerated checkout methods are available:

    • Amazon Pay
    • Apple Pay
    • PayPal

If a branded button is shown, then there is a More payment options link that appears below the button. If a customer clicks on the More payment options link, then a window that shows all of the available payment options appears. The window includes a field for gift cards and discount codes:

The Order Summary window for dynamic checkout buttons

If your online store doesn't include other payment options, and your store does not use discount codes or gift cards, then the More payment options link takes customers to the first step of the checkout.

The kind of button that shows depends on the following factors:

Compatibility

There are a few cases where dynamic checkout buttons might not be suitable for your online store. Before you show dynamic checkout buttons on your online store, consider their compatibility with the following features:

Apps

Dynamic checkout buttons might conflict with certain apps.

If you use any of the following kinds of apps, then dynamic checkout buttons might not be compatible with your online store:

  • Currency converters
  • Apps that interact with the cart
  • Apps that take customers to an external checkout

Cart attributes

Dynamic checkout buttons don't support cart attributes. Cart attributes are custom form fields that you can use to collect additional information from your customers on the cart page.

Examples of cart attributes include the following additions to the cart page:

  • Terms and conditions checkboxes
  • Gift-wrapping options
  • Delivery date pickers

If you rely on cart attributes, then dynamic checkout buttons aren't suitable for your online store.

Products, payment settings, and button text

Before you show dynamic checkout buttons on your online store, consider the following details:

  • Dynamic checkout buttons can only be used to buy a single variant of a product. However, if you show a quantity selector on the product page, then customers can buy more than one of that product. For example, a customer can use a dynamic checkout button to buy three baking cups in aqua, but not to buy one in aqua and one in purple. Unless your online store receives many orders for one kind of product, then dynamic checkout buttons might not benefit your sales.

  • If you don't have a third-party accelerated checkout method enabled in your payment settings, then the unbranded version of the dynamic checkout button is the only version that will show.

  • The unbranded version of the dynamic checkout button shows Buy now text. If your Add to cart button shows Buy now or other custom text, then this might confuse customers.

Update your theme to use dynamic checkout buttons

Dynamic checkout buttons are available on all current versions of the themes in the Shopify Theme Store. If you're using an older version of a theme, then you can update your theme to use dynamic checkout buttons. If you don't want to update your theme, then you can edit your theme code.

Show dynamic checkout buttons on product pages

To show dynamic checkout buttons on product pages:

  1. Find the theme that you want to edit and click Customize.

  2. From the top bar drop-down menu, click Product pages.

  3. Click Sections.

  4. Click Product pages.

  5. Check Show dynamic checkout button.

  6. Click Save.

Most themes include a setting to show dynamic checkout buttons on a featured product section.

To show dynamic checkout buttons on a featured product section:

  1. Find the theme that you want to edit and click Customize.

  2. Click Sections.

  3. Click on an existing featured product section, or click Add section to add a new featured product section.

  4. Click Featured product > Add.

  5. Enter your product details and check Show dynamic checkout button.

  6. Click Save.

Hide dynamic checkout buttons on product pages

To hide dynamic checkout buttons on product pages:

  1. Find the theme that you want to edit and click Customize.

  2. From the top bar drop-down menu, click Product pages.

  3. Click Sections.

  4. Click Product pages.

  5. Uncheck Show dynamic checkout button.

  6. Click Save.

To hide dynamic checkout buttons on a featured product section:

  1. Find the theme that you want to edit and click Customize.

  2. Click Sections.

  3. Click on the featured product section.

  4. Uncheck Show dynamic checkout button.

  5. Click Save.

Test dynamic checkout buttons on your theme

Because the kinds of dynamic checkout buttons that show on your theme depend on multiple factors, you can run a test so that you can see all of the combinations. Before you test dynamic checkout buttons on your theme, make sure that the buttons are showing.

To test the dynamic checkout buttons on your theme:

  1. Click View your store.

  2. To test the button on a product page, go to a product page. To test the button on a featured product section, stay on the home page.

  3. In your browser's address bar, add one of the following strings to the end of the current URL:

    • To show a branded button for PayPal, add ?shopify-debug=true&show=PayPal
    • To show a branded button for Amazon, add ?shopify-debug=true&show=Amazon
    • To show a branded button for Apple Pay, add ?shopify-debug=true&show=ApplePay (Apple Pay only works on Safari)
    • To show an unbranded button, add ?shopify-debug=true&show=checkout
  4. Press Enter to reload the page. Depending on the string that you added to the URL, you see either a branded or an unbranded dynamic checkout button.

  5. Repeat with the other strings to see the different types of dynamic checkout buttons.

Show dynamic checkout buttons for some products but not for others

If you want to show dynamic checkout buttons for some products but not for others, then you can create an alternate template. An alternate template is a duplicate theme code template that you can edit without affecting the original. By using an alternate product template, you can show dynamic checkout buttons for products that use one template and hide them for products that use the other.

To learn about creating an alternate product template, see Create alternate templates.

After you create an alternate product template and assign it to a product, do the following tasks:

  1. Find the theme for which you created an alternate template and click Customize.

  2. In the theme editor, go to the product page for a product to which you've assigned the alternate template.

  3. Click Sections.

  4. Click Product pages.

  5. To show a dynamic checkout button for products that use the alternate template, check Show dynamic checkout button. To hide a dynamic checkout button for products that use the alternate template, uncheck Show dynamic checkout button.

  6. Click Save. The changes are applied to any product that uses the alternate template.

Ready to start selling with Shopify?

Try it free