---
title: "Why is the 'add to cart' button showing when a pre-order is listed?"
slug: "why-is-the-buy-now-or-add-to-cart-button-showing-when-a-pre-order-is-listed"
date: "2021-10-25T10:37:57+00:00"
modified: "2026-03-11T00:28:11+00:00"
author: "Eliza"
canonical: "https://preproduct.io/docs/why-is-the-buy-now-or-add-to-cart-button-showing-when-a-pre-order-is-listed/"
---

> PreProduct lazy-loads to maintain your website’s page-load speed. As a result, your ‘Add to Cart’ button may be briefly visible before PreProduct hides it. This can be an issue if shoppers with slower internet connections click the button before it’s hidden.

### Loading the add-to-cart button as hidden

Whilst PreProduct “lazy loads” on your product page, your add-to-cart button will be briefly visible before being hidden. In the situation where a shopper has a slow internet connection, the add-to-cart button may be visible long enough to be be clicked.

##### Shopify

You can solve this by either going to the ‘Setup screen’ in PreProduct and expanding ‘Opitmize button loading’ and then clicking on ‘Reveal Shopify Link’ alternatively you can add a line of code to your theme, so that the add-to-cart button loads as hidden for products on pre-order. We’re [happy to make this change](mailto:hello@preproduct.io?subject=add-to-cart%20button%20showing%20when%20a%20pre-order%20is%20listed&body=Please%20action%20the%20solution%20in%20this%20doc%20for%20me%3A%20https%3A%2F%2Fpreproduct.io%2Fdocs%2Fwhy-is-the-buy-now-or-add-to-cart-button-showing-when-a-pre-order-is-listed%2F) for you, or alternatively you can follow the instructions below.

Add the following code within your theme’s add-to-cart `<strong><button></strong>` tag to ensure the button loads as hidden for pre-order products. Be sure to leave a space before and after the code snippet.

```markup
 {% if product.metafields.preproduct.preorder %} style="display:none;" {% endif %}
```

```markup
<button
  id="add-to-cart"
  {% if product.metafields.preproduct.preorder %} style="display:none;" {% endif %}
>
 Add to Cart
</button>
```

##### BigCommerce

For BigCommerce, we can take advantage of its native [`product.pre_order` attribute](https://bigcommerce.stoplight.io/docs/theme-context-object-schemas/dafa24e4e2e89-product). Note: if you ever have a product with a status of “pre\_order” in BigCommerce that’s not listed in PreProduct, the button remain hidden.

```markup
{{#if product.pre_order}} style="display:none;" {{/if}}
```