The Case of the Disappearing 'Buy Now' Button: Shopify Pre-Orders and In-Stock Variants

Hey there, fellow store owners!

Ever scratched your head wondering why that handy 'Buy Now' button vanishes from your 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.

Here's a look at what baynojayson was seeing:

And here's the available variant, missing its 'Buy Now' button:

Why This Happens (The Nitty-Gritty)

As emilyjhonsan98 and Favourtochi pointed out in the thread, this issue usually stems from how premium Shopify themes handle inventory and dynamic content. When one of your product variants is set to pre-order, it often triggers a script that modifies the product form. The intent is good – to prevent customers from accidentally making an immediate purchase of a pre-order item. However, sometimes this script can be a little overzealous, globally hiding or disabling the 'Buy It Now' (dynamic checkout) button across the entire product page layout, even for your in-stock variants.

Think of it like this: the theme sees any pre-order status on the product and decides, "Okay, let's play it safe and disable instant checkout for everything on this page." This can happen whether you're using a third-party pre-order app or custom code to manage your pre-order status.

Solution 1: The Quick Checks (Theme Settings & App Configuration)

Before diving into any code, let's start with the easiest fixes. More often than not, the solution lies within your theme's settings or your pre-order app's configuration.

Check Your Theme Customizer Settings

Both emilyjhonsan98 and Favourtochi suggested this as the first port of call. It's a common place for these buttons to be toggled:

1. Go to your Shopify Admin.
2. Navigate to Online Store > Themes.
3. Click on the Customize button for your active theme.
4. From the top dropdown menu, select the Product Page template.
5. On the left sidebar, find and click on the Buy Buttons block (it's usually within your product information section).
6. Look for a checkbox labeled "Show dynamic checkout buttons". Make sure this checkbox is fully checked.

If it was unchecked, checking it might immediately resolve your issue! Save your changes and check your product page.

Review Your Pre-Order App Settings

If you're using a third-party pre-order app (as Favourtochi hinted, Shopify doesn't natively handle pre-order messaging beyond basic inventory), its settings might be overriding your theme's behavior. emilyjhonsan98 specifically recommended looking for an option like "Keep dynamic checkout buttons active for in-stock variants" within your pre-order app's settings. Head into your app's dashboard and poke around – you might find a toggle that solves everything.

Solution 2: Diving into Code (When Settings Aren't Enough)

If the quick checks didn't bring back your 'Buy Now' button, then it's highly likely that custom theme coding is the culprit. This is where the brilliant insights from mastroke and emilyjhonsan98 really shine. This approach involves editing your theme's Liquid and potentially adding some JavaScript to ensure the dynamic checkout button only hides when the selected variant is unavailable, not for the entire product.

Before you start: Always, always, always duplicate your theme before making any code changes. This way, you have a safe rollback point if anything goes wrong.

Step-by-Step Code Adjustment

1. From your Shopify Admin, go to Online Store > Themes.

2. Find your current theme, click Actions > Edit code.

3. In the theme editor, search for files like product-form.liquid or main-product.liquid. The exact file name can vary depending on your theme, but these are common.

4. Locate the existing code that handles the payment button. mastroke specifically highlighted this snippet:

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

5. Replace that snippet with the following more robust Liquid code. This ensures your 'Add to Cart' button is always present, and the dynamic payment button is conditionally displayed:

   
     
       {{ 'products.product.add_to_cart' | t }}
     
   
   {%- if product.selected_or_first_available_variant.available -%}
   {{ form | payment_button }}
   {%- endif -%}
   
   

   This Liquid snippet ensures that the dynamic payment button ({{ form | payment_button }}) is only rendered if the product.selected_or_first_available_variant is actually available. But we also need to make sure this updates dynamically when a customer switches variants.

6. Next, you'll need to add some JavaScript to handle the dynamic visibility of the 'Buy Now' button based on variant selection. This script listens for changes in variant selection and hides/shows the dynamic checkout button accordingly. You'll typically add this to a JavaScript file associated with your product page (e.g., theme.js, global.js, or a specific product JS file). If you're unsure where to put it, you can often add it within tags at the bottom of your product-form.liquid or main-product.liquid file, or in theme.liquid before the closing tag.

   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 snippet does a few clever things:

   • It waits for the entire page to load (DOMContentLoaded).
   • It finds all variant selectors ([name="id"]).
   • When a variant is changed, it checks the data-available attribute of the selected variant.
   • If the selected variant is available, it makes the .shopify-payment-button visible; otherwise, it hides it.

After making these code changes, save the file(s) and test your product page thoroughly. Switch between your pre-order and in-stock variants to ensure the 'Buy Now' button appears correctly for the available items and disappears for the pre-order ones.

This whole discussion really highlights how dynamic and sometimes tricky Shopify themes can be, especially when you're mixing different inventory statuses like pre-orders with in-stock items. It's a common scenario, and it's fantastic to see the community come together to offer both simple configuration fixes and more advanced code solutions. Remember, if code changes feel overwhelming, don't hesitate to reach out to a Shopify expert or your theme developer for assistance. Getting those dynamic checkout buttons working correctly can significantly smooth out your customer's journey and boost conversions!