Shopify Buy Now Button Not Working: Dynamic Checkout, Theme, and CSS Fixes (2026)

Quick Fix with Thunder

Confirm Dynamic Checkout Is Enabled and Eligible

Shopify accelerated checkout buttons let customers skip the cart and go directly to checkout from a product page. Depending on the shopper, the button may appear as Buy it now, Shop Pay, Apple Pay, Google Pay, PayPal, or another available accelerated method.

Start in the theme editor. Open the product template and confirm the buy buttons block or dynamic checkout setting is enabled. Then test with a normal available product, not a preorder, sold-out variant, subscription-only product, or product with unusual selling-plan rules.

If accelerated checkout buttons are missing but the regular add-to-cart button also fails, use the add-to-cart button guide. If the accelerated buttons show inconsistently, compare with the dynamic checkout buttons not showing checklist.

Restore the Payment Button Inside the Product Form

In Shopify themes, accelerated checkout belongs inside the product form. If a custom product template removed the payment button output, Shopify has nothing to initialize. If a page builder replaced the native form, the button can appear but submit the wrong product or variant.

{% form 'product', product %}
  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">

  <button type="submit" name="add">
    Add to cart
  </button>

  {{ form | payment_button }}
{% endform %}

Keep the payment button tied to the same product form as the selected variant. Do not create a fake Buy Now button that clicks another hidden button unless you fully control variant updates, validation, selling plans, and error states.

If variant selection is unreliable, fix that first. The Shopify variant selector guide covers hidden variant IDs, deep links, and app picker conflicts.

Find CSS That Hides or Disables the Buy Now Button

Community fixes often reveal CSS problems: the button is present, but a disabled selector, overlay, color scheme, or mobile rule makes it look gone. Inspect the button wrapper after the product page loads. Check whether it has dimensions, whether another element sits above it, and whether text blends into the background.

.shopify-payment-button {
  display: block;
  margin-top: 12px;
}

.shopify-payment-button__button {
  min-height: 48px;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

.product-form__buttons[aria-busy="true"] .shopify-payment-button__button {
  opacity: 0.7;
}

Avoid broad rules like .product-form button[disabled] { pointer-events:none; } if an app or theme writes disabled="false". Test the actual computed disabled state, not just whether a disabled attribute exists.

Disable Apps That Replace Product Buttons

Sticky add-to-cart apps, subscription apps, preorder apps, upsell apps, page builders, and product option apps can all replace the native buy buttons. Disable app embeds in a duplicate theme and test a simple product. If the button works, re-enable apps one at a time.

Do not debug only on desktop. Many stores hide accelerated checkout on mobile because a sticky bar overlaps it, a popup blocks it, or a product-form script initializes too late. Test with real mobile taps and check INP. Use the mobile interaction debugging guide if other header or drawer buttons are also failing.

For broader performance cleanup, follow the complete Shopify speed optimization guide, product page speed guide, and third-party JavaScript fix guide.

Manual Fix vs Thunder Fix

If checkout-button cleanup is part of a bigger conversion project, compare Thunder pricing with professional Shopify speed optimization.

FAQ