How to Add a Pre-Order Button on Shopify Without an App

2026-09-19 · product reviews

You can add a working pre-order button on Shopify without paying for an app. The trick is to use product tags to mark items as pre-orders, then edit your theme's product template so those items show a different button label and a shipping notice. This guide walks through the full setup in Liquid, plus how to test it before customers see it.

Why Add a Pre-Order Button Without an App?

Pre-order apps typically charge a monthly fee, and most of them do the same thing under the hood: check a product tag or metafield, then swap the button text and block checkout rules accordingly. If you only need basic pre-orders — "buy now, ships on this date" — you can replicate that with a few lines of Liquid in your theme.

Going app-free has real advantages:

No monthly cost. Pre-order apps often run $10–$30/month per store. Check current pricing before you commit either way.
No added page weight. Every app injects scripts into your storefront. A theme edit adds nothing.
Full control over design. You style the button with your own CSS, so it matches your theme instead of fighting an app's defaults.
Fewer conflicts. App updates occasionally break themes. Theme code you wrote yourself is easier to debug.

The trade-off is that you're editing theme code, so you need to be comfortable in the Shopify code editor and you need a backup before you start. If your store runs on a heavily customized theme or you need complex logic (partial payments, per-variant release dates, automatic inventory allocation), an app is the better call — more on that at the end.

How the Tag-Based Pre-Order Method Works

The logic has three parts:

A product tag marks which products are pre-orders. Shopify's native product.tags array is readable in Liquid, so no app or metafield is required.
Conditional Liquid in your product template checks for that tag. If it's present, the template renders a different button label and a notice block.
Optional date handling pulls an expected ship date from a second tag (for example, preorder-2025-06-15) so the notice can show a real date.

Here's how the pieces map to Shopify objects:

Piece	Shopify object	Example value
Pre-order flag	`product.tags`	`preorder`
Ship date	`product.tags`	`preorder-2025-06-15`
Button label	`{{ 'products.product.add_to_cart' \\| t }}` or plain text	"Pre-Order Now"
Notice text	Theme locale file or inline text	"Ships on June 15"
Cart behavior	Native add-to-cart form	No change needed

One important limitation: this method does not stop overselling. If a pre-order item has zero inventory and you've disabled "Continue selling when out of stock," Shopify will block the add-to-cart. So for pre-order products, go to the product's inventory settings and enable Continue selling when out of stock. That's what lets customers buy before stock arrives.

Step 1: Tag Your Products for Pre-Order

In Shopify admin, go to Products, open the product you want to sell as a pre-order, and scroll to the Tags field in the right-hand column (or under Organization depending on your admin version).

Add two tags:

preorder — the flag your template will check for.
preorder-2025-06-15 — the expected ship date, in YYYY-MM-DD format. Use whatever date you can actually commit to.

Press Enter after each tag to save it. Repeat for every pre-order product.

Then set inventory correctly for each one:

Open the Inventory section on the product page.
Check Continue selling when out of stock.
Save.

If you're doing this across dozens of products, use Shopify's bulk editor (Products → select all → Edit products) to add the tag in one pass, then set inventory individually.

Step 2: Add Pre-Order Logic to Your Product Template

Before editing anything, duplicate your theme: Online Store → Themes → … → Duplicate. Work on the copy. If something breaks, you publish the original back in one click.

Now open the code editor: Online Store → Themes → … → Edit code. Find your main product template. In most modern themes (Dawn, Refresh, Craft, Sense) it's sections/main-product.liquid. In older themes it may be templates/product.liquid.

Search the file for product-form or add-to-cart. You're looking for the block that renders the buy buttons — usually a <button> with name="add" inside a <form> with action="/cart/add".

At the very top of the section file, before any markup, add a Liquid block that computes your pre-order state once:

{%- assign is_preorder = false -%}
{%- assign preorder_date = '' -%}
{%- for tag in product.tags -%}
  {%- if tag == 'preorder' -%}
    {%- assign is_preorder = true -%}
  {%- endif -%}
  {%- if tag contains 'preorder-' and tag != 'preorder' -%}
    {%- assign preorder_date = tag | remove_first: 'preorder-' -%}
  {%- endif -%}
{%- endfor -%}

This loops through the product's tags once, sets a boolean, and extracts the date string. Now find the add-to-cart button inside the product form and wrap its label:

<button type="submit" name="add" class="product-form__submit button">
  {%- if is_preorder -%}
    Pre-Order Now
  {%- else -%}
    {{ 'products.product.add_to_cart' | t }}
  {%- endif -%}
</button>

Save the file. Any product tagged preorder now shows "Pre-Order Now" instead of "Add to cart."

Step 3: Style the Pre-Order Button and Update the Add-to-Cart Text

The button works, but it looks identical to your regular button, which confuses returning customers. Add a modifier class so you can style it separately.

Change the button tag to:

<button type="submit" name="add"
  class="product-form__submit button{% if is_preorder %} button--preorder{% endif %}">

Then add CSS. In your theme, open assets/base.css (Dawn-based themes) or assets/theme.css, and append:

.button--preorder {
  background-color: #1a1a1a;
  color: #ffffff;
  border: 1px solid #1a1a1a;
}
.button--preorder:hover {
  background-color: #333333;
}

Swap the hex values for your brand color. Keep the contrast high enough to pass accessibility checks — a 4.5:1 ratio against the text color is the standard target.

If your theme uses a locale file for button text (check locales/en.default.json for products.product.add_to_cart), you can add a preorder key there instead of hardcoding "Pre-Order Now," which makes future translation easier. Hardcoding is fine for a single-language store.

One more thing to check: some themes render a separate "Sold out" button state and disable the button when inventory is zero. Search the template for product.selected_or_first_available_variant.available and make sure the pre-order condition overrides it. The cleanest fix is to change the condition to:

{% if product.selected_or_first_available_variant.available or is_preorder %}

That keeps the button clickable for pre-order items even at zero stock, assuming you enabled "Continue selling when out of stock" in Step 1.

Step 4: Show a Pre-Order Notice and Expected Ship Date

Customers need to know they're not getting same-week shipping. Place a notice directly under the button so it's impossible to miss.

Add this markup right after the closing </form> of the product form:

{%- if is_preorder -%}
  <div class="preorder-notice">
    <strong>Pre-order:</strong> This item is available for pre-order.
    {%- if preorder_date != '' -%}
      {%- assign parts = preorder_date | split: '-' -%}
      Estimated ship date: {{ parts[1] }}/{{ parts[2] }}/{{ parts[0] }}.
    {%- else -%}
      We'll email you the estimated ship date after you order.
    {%- endif -%}
    You'll be charged at checkout.
  </div>
{%- endif -%}

The split filter breaks 2025-06-15 into year, month, and day, then reassembles it as 06/15/2025. If you prefer "June 15, 2025," use the date filter instead:

{{ preorder_date | append: ' 12:00:00' | date: '%B %-d, %Y' }}

Style the notice so it reads as information, not an error:

.preorder-notice {
  margin-top: 12px;
  padding: 12px 14px;
  font-size: 0.875rem;
  line-height: 1.5;
  background: #f5f5f5;
  border-left: 3px solid #1a1a1a;
  border-radius: 2px;
}

Also update your cart and checkout messaging. Shopify's checkout doesn't know these items are pre-orders, so add a line in your cart template (sections/main-cart-items.liquid or sections/cart-template.liquid) or use an order note. The simplest reliable option: add a cart attribute that tags the order, which you can then filter in your orders list.

Testing Your Pre-Order Setup Before You Launch

Don't publish the theme copy until you've tested. Run through this checklist:

Preview the theme with the product URL appended: yourstore.com/products/handle?preview_theme_id=YOUR_THEME_ID. Confirm the button reads "Pre-Order Now."
Test at zero inventory. Set the product's inventory to 0, keep "Continue selling when out of stock" enabled, and confirm the button still works.
Test an untagged product. It should show the normal "Add to cart" with no notice.
Test a tagged product with no date tag. The notice should fall back to the generic message, not show an empty date.
Complete a real test order using Shopify's Bogus Gateway or a 100% off discount code, then check the order in admin.
Check mobile. The notice and button should not overlap or push the layout.
Run a theme check with Shopify's Theme Check tool if you have it installed, to catch Liquid syntax errors before they hit production.

Once everything passes, publish the theme copy.

When to Switch to a Dedicated Pre-Order App

The tag method handles straightforward pre-orders well. It stops being the right tool when you need:

Partial payments or deposits. Charging 20% now and the rest at ship date requires real payment logic that Liquid can't do.
Per-variant release dates. If a product has 12 variants shipping on 4 different dates, tags get unwieldy fast.
Automatic inventory allocation. Converting pre-orders to fulfillment as stock arrives.
Scheduled email sequences. "Your pre-order ships tomorrow" campaigns tied to inventory.
High order volume. At scale, a spreadsheet-and-tags workflow breaks down.

Popular options in this space include Pre-Order Now, Appikon Pre-Order, and Timesact. Pricing and features change often, so check current pricing and the Shopify App Store reviews before choosing. Compare against your monthly pre-order revenue — if the app costs more than the pre-orders bring in, stay with the theme edit.

Conclusion

Adding a pre-order button without an app comes down to three things: a preorder tag on the product, a conditional in your product template, and a clear notice with a ship date. It takes about an hour for a standard theme and costs nothing. Back up your theme first, test at zero inventory, and you'll have a working pre-order flow without a subscription.

FAQ

Will this method work on any Shopify theme? It works on any theme where you can edit the product template in Liquid, which covers all Shopify-made themes and most third-party ones. Heavily customized or app-locked themes may need extra adjustments where the button markup differs.

Do I need Shopify Plus for this? No. The tag and Liquid approach works on Basic, Shopify, and Advanced plans. You only need Plus for checkout-level customizations, which this method doesn't require.

What happens if a customer orders a pre-order item alongside an in-stock item? Shopify treats it as one order and ships when everything is available, unless you split fulfillment manually. If that's a problem, either separate pre-order and in-stock products into different orders or add a note at checkout telling customers mixed orders ship together.