How to Add Pre-Order Functionality to Add to Cart Button in Shopify

Here’s how to modify your Shopify theme to change the “Add to Cart” button to “Pre-Order” for specific products:

Step 1: Modify buy-button.liquid

First, locate the following code in your buy-button.liquid file:

				
					<span>
  {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
    {{ 'products.product.sold_out' | t }}
  {%- else -%}
    {{ 'products.product.add_to_cart' | t }}
  {%- endif -%}
</span>

Step 2: Add Pre-Order Check

Add this code ABOVE the <span> tag:

				
					{% if product.tags contains 'preorder' %}
  {% assign preorder = true %}
{% endif %}

Step 3: Update the Span Code

Replace the original span code with this updated version:

				
					<span>
  {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
    {{ 'products.product.sold_out' | t }}
  {%- else -%}    
    {% if preorder == true %}
      {{ 'products.product.pre_sale' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endif %}
  {%- endif -%}
</span>

Step 4: Update en.default.json

In your en.default.json file, locate the line:

				
					"add_to_cart": "Add to cart",

Add this line immediately below it:

				
					"pre_sale": "Pre-Order",

Step 5: Add Pre-Order Message (Optional)

If you want to show a message when preorder is true, add this code right before the closing </product-form> tag:

				
					{% if preorder == true %}
  <span><p>ETA 5-21 Days - <a href="/pages/contact"><u>Contact us</u></a></p></span>
{% endif %}

After making these changes, any product tagged with ‘preorder’ will show “Pre-Order” instead of “Add to Cart” on the button, and display the optional message if you included step 5.

Adding a pre-order option in Shopify helps boost sales for upcoming products while keeping customers engaged. By modifying your “Add to Cart” button to display “Pre-Order” for selected items, you can manage inventory effectively and generate early revenue.

Why Enable Pre-Orders?

Increase Sales Before Launch: Capture early demand for new products.
Reduce Cart Abandonment: Customers can reserve items even if stock is limited.
Improve Customer Trust: Clearly communicate estimated delivery times.

How It Works

Tag Products as “Preorder” – Only tagged products will show the Pre-Order button.
Customize Button Text – Change “Add to Cart” to “Pre-Order” for better clarity.
Display Estimated Delivery – Add an ETA message (e.g., “Ships in 5-21 days”) to set expectations.