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 #

The solution is to 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 for you, or alternatively you can follow the instructions below.

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

Shopify code snippet
 {% if product.metafields.preproduct.preorder %} style="display:none;" {% endif %}

Shopify code snippet in context
<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. 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.

BigCommerce code snippet
{{#if product.pre_order}} style="display:none;" {{/if}}