Bringing Back the 'Buy It Now' Button: Solving Variant-Specific Checkout Issues on Shopify

Hey fellow store owners!

Ever found yourself scratching your head, wondering why your "Buy It Now" button (those handy dynamic checkout buttons) suddenly vanishes on an otherwise perfectly available product variant, all because another variant is in pre-order mode? You're definitely not alone! This exact head-scratcher recently popped up in the Shopify Community, and the discussion quickly became a goldmine of insights for anyone dealing with this frustrating hiccup.

A store owner, baynojayson, shared their predicament: one product variant was set to pre-order, and for another variant that was clearly available, only the "Add to Cart" button showed up – the "Buy button" was nowhere to be seen. This is a common scenario, and thankfully, our community experts jumped in with some fantastic advice. Let's break down why this happens and, more importantly, how to fix it!

Understanding the Disappearing Act: Why Your Dynamic Checkout Button Hides

The core of this issue, as emilyjhonsan98 pointed out, often lies in how premium Shopify themes are built. These themes are pretty smart; they dynamically adjust your product page layout based on inventory levels. When you have a variant set to a "Pre-order" status, it can trigger a script that changes the main form button and, crucially, might completely hide or disable those dynamic "Buy It Now" buttons across the entire product page. The intention is good – to prevent accidental immediate purchases for pre-order items – but it can inadvertently affect your in-stock variants.

Think of it as the theme playing it a little too safe. It sees any pre-order variant on the page and decides to pull back all the fast-checkout options, even for items ready to ship.

First Fixes: Checking Your Theme Settings (The Easiest Path!)

Before we dive into any code, there are a couple of crucial settings to check. Both emilyjhonsan98 and Favourtochi highlighted these as the first places to look:

1. Head to Your Shopify Admin: Go to Online Store > Themes.
2. Customize Your Theme: Click on the Customize button for your live theme.
3. Navigate to the Product Page: From the top dropdown menu in the theme editor, select Product Page (or Default product, depending on your theme).
4. Find the Buy Buttons Block: On the left sidebar, within your product information section, look for the Buy Buttons block.
5. Enable Dynamic Checkout Buttons: Make absolutely sure the checkbox for Show dynamic checkout buttons is fully checked.

If it was unchecked, checking it might just solve your problem right then and there! If it was already checked, or if the "Buy button" is still missing for your available variant, then the plot thickens, and we need to consider other factors.

Are You Using a Third-Party Pre-Order App?

Many of us use apps to manage pre-orders, and they often come with their own settings. As emilyjhonsan98 wisely suggested, if you're using a third-party pre-order app, you should:

• Dive into your pre-order app's settings.
• Look for an option like "Keep dynamic checkout buttons active for in-stock variants" or something similar. Ensure this setting is enabled.

Sometimes these apps, in their effort to manage pre-orders, might inadvertently override your theme's default dynamic button behavior.

When It's Deeper: Diving into Your Theme's Code

If the above steps don't bring back your elusive "Buy button," it's a strong indicator that the issue is embedded in your theme's custom code. This is where things get a bit more technical, but don't worry, the community has provided some solid guidance.

Refining JavaScript Logic for Variant Availability

The core problem in custom code is often a JavaScript file that’s too broad in its hiding logic. Instead of hiding the "Buy button" only when the selected variant is pre-order or out of stock, it might be hiding it for the entire product page if any variant is pre-order. emilyjhonsan98 suggested that the JavaScript file might need an if/else statement adjustment so it only hides the Buy button when the selected variant’s inventory is less than 1 (or is a pre-order variant), rather than hiding it globally.

A Direct Code Fix Shared by the Community

For those comfortable with theme code, mastroke offered a specific code solution that directly addresses this. Always back up your theme before making any code changes!

Here's what they suggested:

1. Access Your Theme Code: In your Shopify Admin, go to Online Store > Themes > Actions > Edit code.
2. Locate the Relevant File: Search for product-form.liquid or main-product.liquid in your theme files. These are common places where product form logic resides.
3. Replace Existing Liquid Code: Search for the following Liquid snippet:

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

   And replace it with this updated block:

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

4. Add Custom JavaScript: You'll also need to add some JavaScript to dynamically show/hide the button based on variant selection. You might add this to a file like theme.js, global.js, or a dedicated custom JS file, ensuring it loads on product pages.

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 listens for changes in your variant selection (`[name="id"]`) and then checks the `dataset.available` property of the selected option. If it's available, it makes the `.shopify-payment-button` (your dynamic checkout button) visible; otherwise, it hides it. This ensures the button's visibility is tied directly to the currently selected variant, not the product's overall pre-order status.

Here are the images baynojayson shared, illustrating the problem:

Important Notes and Best Practices

• Always Back Up: Seriously, before you touch any code, duplicate your theme! It's your safety net.
• Test Thoroughly: After making changes, test every variant of your product, both in-stock and pre-order, to ensure everything behaves as expected.
• Pre-Order Apps: As Favourtochi mentioned, Shopify doesn't natively handle pre-order messaging beyond basic inventory. Using a dedicated app like Pre-order Now or Timify can help manage the pre-order process much more cleanly, including custom button text and inventory tracking. Just remember to check their settings for dynamic checkout buttons!

It's great to see the Shopify community coming together to solve these nuanced issues. This particular thread highlights how important it is to understand the interplay between your theme's dynamic features, any pre-order apps you might use, and custom code. By following these steps, you should be able to restore those dynamic "Buy It Now" buttons for your in-stock variants, making the checkout process smoother for your customers and boosting your sales. Happy selling!