Shopify Buy Button Disappearing? Fix Pre-Order & In-Stock Variant Issues

Hey there, fellow store owners!

Ever scratched your head wondering why that handy 'Buy Now' button vanishes from your Shopify product page, especially when you have some variants available for pre-order and others ready to ship? You're definitely not alone. This exact head-scratcher recently popped up in the Shopify community, with a store owner named baynojayson sharing their frustration.

baynojayson had a product with two variants: one was a pre-order item, and the other was happily in stock. The problem? When customers selected the available variant, the 'Add to Cart' button was there, but the 'Buy Now' (or dynamic checkout) button was nowhere to be seen. This is a classic example of a common theme-related hiccup that can really impact conversion rates. Luckily, the community jumped in with some fantastic insights and solutions.

Understanding the "Why": The Root Cause of the Disappearing Buy Button

The disappearance of the 'Buy Now' button, particularly when mixing pre-order and in-stock variants, isn't a Shopify bug but rather a consequence of how modern Shopify themes and pre-order functionalities are designed to interact. Premium themes are often built with dynamic layouts that react to inventory levels and variant statuses.

When your first variant is set to a "Pre-order" status, it often triggers a script within your theme or a pre-order app. This script's primary goal is to prevent immediate purchases for the pre-order item. Unfortunately, in many cases, this logic is applied broadly, causing the dynamic checkout button to be hidden or disabled across the entire product page, even for variants that are readily available. This blanket approach, while well-intentioned for pre-orders, inadvertently affects your in-stock items, creating a frustrating user experience and potentially costing you sales.

Step-by-Step Solutions: How to Restore Your Buy Button

Navigating this issue requires a systematic approach, starting with the simplest checks and progressing to more advanced code modifications if necessary.

Solution 1: Checking Theme Settings (The Easiest Fix)

Often, the solution lies within your theme's customization options. Shopify themes provide a built-in setting for dynamic checkout buttons.

• Go to your Shopify Admin and navigate to Online Store > Themes.
• Click on Customize for your active theme.
• From the top dropdown menu, select the Product Page template.
• On the left sidebar, locate and click on the Buy Buttons block within your product information section.
• Ensure the checkbox for "Show dynamic checkout buttons" is fully checked.

Important Note: If this checkbox is already enabled but the 'Buy Now' button is still missing for your in-stock variant, it indicates that a custom code implementation or a third-party pre-order app is overriding this setting. In such cases, you'll need to explore the next solutions.

Solution 2: Configuring Third-Party Pre-Order Apps

If you're using a dedicated pre-order app (like Pre-order Now or Timify), it's highly likely that the app's settings are dictating the visibility of your dynamic checkout buttons. These apps often implement their own logic to manage button states.

• Access your pre-order app's settings within your Shopify Admin.
• Look for options related to button visibility, dynamic checkout, or inventory management.
• Specifically, search for a setting such as "Keep dynamic checkout buttons active for in-stock variants" or similar. Ensure this option is enabled.

Many pre-order apps offer granular control, allowing you to specify how buttons behave for different variant statuses. Adjusting these settings should resolve the issue without needing to delve into code.

Solution 3: Advanced Theme Code Customization (For Developers or Experts)

When theme settings and app configurations don't yield results, the issue is likely embedded in your theme's custom code. This is particularly true if you've implemented pre-order functionality via custom coding rather than an app, or if your theme has bespoke logic.

Caution: Editing theme code requires technical expertise. Always back up your theme before making any changes. If you're unsure, it's best to consult with a Shopify development expert like those at Shopping Cart Mover.

You'll typically need to modify files like product-form.liquid or main-product.liquid.

Liquid Code Adjustment:

Locate the section responsible for rendering the payment buttons. You might find code similar to this:

{% if product.selected_or_first_available_variant.available %} {{ form | payment_button }} {% endif %}

The problem here is that this conditional check might be too broad or incorrectly placed. A more robust approach ensures the 'Add to Cart' button is always present, and the dynamic payment button appears only when the selected variant is available:

  
    {{ 'products.product.add_to_cart' | t }}
  

{%- if product.selected_or_first_available_variant.available -%}
{{ form | payment_button }}
{%- endif -%}

This ensures the 'Add to Cart' button is always visible, and the dynamic checkout button (payment_button) only renders if the currently selected variant is actually available.

JavaScript for Dynamic Visibility:

To ensure the dynamic checkout button correctly appears and disappears as customers switch between variants, you'll need a JavaScript snippet. This script listens for changes in variant selection and updates the button's visibility accordingly.

document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('[name="id"]').forEach(function (input) {
    input.addEventListener('change', function () {
      var selectedOption = this.options ? this.options[this.selectedIndex] : null;
      var available = selectedOption
        ? selectedOption.dataset.available !== 'false'
        : true;

      var buyBtn = document.querySelector('.shopify-payment-button');
      if (buyBtn) {
        buyBtn.style.display = available ? '' : 'none';
      }
    });
  });
});

This JavaScript code should be added to your theme's main JavaScript file (often theme.js or within a