Buy Button for Available Item is Missing if the Variant is in Pre Order

Technical Q&A
, , ,
1

Hi Shopify Community!

I am looking for someone who can provide service to my problem. Here is my problem .

1st variant : Item is not available so it is in Pre-order mode.

2nd variant : The item is available. Only Add to Cart button is available, the Buy button is missing . I want the buy button to be visible.

image
image1920×1029 281 KB

image
image1920×1016 270 KB

Here is the link : Ingco Portable Welding Machine Inverter IGBT ARC MMA – INGCO Philippines

2

Hey! For the Buy Now button issue on your available variant, this is usually caused by a theme setting rather than a Shopify bug. Go to Online Store → Themes → Customise → Product page, and look for a ‘Show dynamic checkout buttons’ toggle. Make sure it’s enabled.

If it’s already on and still not showing, the issue is likely in your theme’s code, some themes conditionally hide the Buy Now button based on inventory or variant logic.

For the pre-order variant, you’ll need an app like Pre-order Now or Timify to handle that cleanly, Shopify doesn’t manage pre-order messaging natively.

Hope that helps, let me know if you get stuck on either.

3

in your theme code search for product-form.liquid or main-product.liquid

and search for this code

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

problem is with this code, replace it with

<div class="product-form__buttons">
  <button type="submit" name="add" class="product-form__submit button button--full-width button--primary">
    <span>{{ 'products.product.add_to_cart' | t }}</span>
  </button>

{%- if product.selected_or_first_available_variant.available -%}
{{ form | payment_button }}
{%- endif -%}
</div>

also add this javascript

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';
  }
});

});
});
4

This issue happens because premium Shopify themes dynamically change the layout based on inventory levels. When your first variant is set to a Pre-order status, it usually triggers a script that changes the main form button and completely hides or disables the dynamic Buy It Now button across the product page layout to prevent accidental immediate purchases.

  • Go to your Shopify Admin and navigate to Online Store > Themes > Customize.
  • Select the Product Page template from the top dropdown menu.
  • On the left sidebar, click on the Buy Buttons block inside your product information section.
  • Make sure the checkbox for Show dynamic checkout buttons is fully checked. If it is checked but still missing on variant 2, the custom code handling your pre-order status is globally hiding it.

If you are using a third-party pre-order app or a custom template file to switch the button text to Preorder Now (as seen in your first image), it is likely hiding the dynamic checkout buttons by default. Look into your pre-order app settings and ensure Keep dynamic checkout buttons active for in-stock variants is enabled.

If this was added via custom theme coding, the JavaScript file needs an if/else statement adjusted so it only hides the Buy button when the selected variant’s inventory is less than 1, rather than hiding it for the entire product page.