Replace Add to Cart with a Pre-Order Button on Shopify

One of the first things merchants ask when they start exploring preorders is deceptively simple: how do I actually change that button? The “Add to Cart” button is the most prominent call to action on any product page — and when a product is out of stock or not yet launched, leaving it as-is sends the wrong signal entirely. A greyed-out button or a “Sold Out” label tells the customer there’s nothing they can do. A “Pre-Order” button tells them something very different: this product is coming, and you can secure yours now.

Making that switch doesn’t require editing theme code or hiring a developer. With the right setup, it’s a configuration change that takes a few minutes and applies automatically based on your inventory rules. This guide walks through exactly how that works — what changes on the storefront, what the customer sees, and how to get it configured correctly the first time.

The “Add to Cart” button isn’t just a functional element — it’s the primary conversion point on your product page. Every other element on that page exists to get a customer to click it. When that button reads “Sold Out” and does nothing, the entire page stops working as a sales tool.

Replacing it with a “Pre-Order” button changes the page’s function entirely. Instead of a dead end, it becomes a demand capture mechanism. The customer has a clear action to take, the expectation is set — this is a preorder, not an immediate purchase — and the transaction can proceed.

The messaging around the button matters just as much as the button itself. A preorder button without any supporting context (expected ship date, what happens at checkout, what the customer is committing to) creates confusion and increases the likelihood of chargebacks or cancellation requests after the fact. Done well, the button swap paired with clear messaging is the foundation of a trustworthy preorder experience — and as detailed in this guide to building preorder product pages that convert, the details around that button are often what separates high-converting preorder pages from ones that underperform.

It helps to understand the mechanics before walking through the setup. When Timesact is configured for a product or variant, it doesn’t modify your theme’s code — it works through Shopify’s native App Embed system to replace the storefront button state for the relevant product.

What this means practically:

• The “Add to Cart” button is replaced by the “Pre-Order” button (or whatever label you configure) for that specific product or variant.
• In stock variants continue showing “Add to Cart” normally — the swap is surgical, not store-wide.
• When the preorder campaign ends or inventory is restored and the product is removed from Timesact, the button reverts cleanly. No leftover code in your theme.
• The button replacement works at the variant level — so for a product with multiple sizes or colors, you can have some variants on preorder (showing “Pre-Order”) while others remain as standard purchases (showing “Add to Cart”).

This variant-level control is particularly useful for large or complex catalogs where only certain configurations are out of stock or not yet available, without affecting the rest of the product listing.

Different types of merchants hit this problem in different ways, but the underlying pattern is consistent.

Merchants launching new products have inventory on order but not yet in hand. Leaving the product page live with no purchase option means losing the early demand that launch momentum generates. Replacing “Add to Cart” with “Pre-Order” lets them use a new product launch as a revenue event from day one, not from the day stock arrives.

Merchants with recurring stockouts on fast-moving SKUs face this regularly. The product sells through, the page goes dead, and they’re left waiting for a restock while traffic keeps arriving. A preorder button keeps that page earning during the gap.

Merchants with large catalogs — anywhere from a few hundred to tens of thousands of SKUs — need a system that can handle the button swap at scale, across many products and variants, without manual intervention for each one.

In all three cases, the core need is the same: replace a non-functional button with one that converts, without breaking the theme or creating a custom development project.

When merchants come to this specific problem, the pain points they describe tend to cluster around a few recurring themes:

• “My product page goes dead when I’m out of stock” — there’s no action for visitors to take, and no way to capture their interest while they wait.
• “I don’t want to hide the page but I also can’t let people add it to cart normally” — taking the product offline loses SEO equity and organic traffic; leaving it up with a dead button loses conversions.
• “I need different button states for different variants” — some sizes are available, some aren’t, and a blanket “Sold Out” on the whole product is inaccurate and frustrating for customers.
• “I tried editing my theme and broke something” — DIY button swaps via theme code are risky and often not reversible cleanly.
• “I want to set a shipping date expectation on the button or near it” — customers need context to commit to a preorder, and the standard button gives them none.

Timesact replaces the “Add to Cart” button with a “Pre-Order” button through Shopify’s App Embed system — no theme code editing required. Here’s how the key pieces work:

The Selling Plan

Shopify requires a Selling Plan for any preorder that involves a deferred payment or specific purchase condition. In Timesact, you create a Selling Plan and assign it to the product or variant you want to put on preorder. The Selling Plan is also where you set the shipping date — the expected date the product will be dispatched — which Timesact can then surface in your storefront messaging via dynamic variables.

If you’re running a straightforward preorder with full payment at checkout and want to display an expected ship date, the Selling Plan is where that date lives.

The Pre-Order Template

The Template controls everything the customer sees: the button label, the message below the button, the cart label, and any supporting text. This is where you configure “Pre-Order” as the button text (or any variation you prefer — “Reserve Yours,” “Order Now,” etc.), and where you write the short message that sets expectations for the customer.

A well-configured template answers three questions the customer has at the moment they’re deciding whether to click: What am I buying? When will it arrive? What happens to my payment? You don’t need to answer these in paragraph form — a single line of clear message text beneath the button is usually sufficient.

Variant-Level Assignment

Once your Selling Plan and Template are in place, you add the product to Timesact and assign the plan and template to the specific variants you want on preorder. Variants not assigned remain on their standard “Add to Cart” state. This is the step that makes the button swap live on your storefront.

This is the full sequence from installation to a live preorder button:

1. Install Timesact from the Shopify App Store and open the app in your Shopify admin.
2. Enable the App Embed. In Timesact, go to Settings and enable the App Embed for your active theme. This is the step that connects Timesact to your storefront — without it, no button changes will render.
3. Create a Selling Plan. Navigate to Selling Plans in Timesact, create a new plan, give it an internal name, and set your shipping date if you have one confirmed. The Selling Plan name is the customer-facing text shown in the cart and checkout, so write it clearly — something like “Pre-Order — Ships [Month]” rather than an internal label.
4. Create a Pre-Order Template. Navigate to Templates, select Pre-order, and configure your button text, the message that appears beneath or near the button, and the cart label. Use the {{shippingDate}} dynamic variable in your message if you’ve set a shipping date in the Selling Plan — this pulls the date automatically so you don’t have to update it manually.
5. Add your product to Timesact. Go to the Products tab, add the product, select the variants you want on preorder, and assign your Selling Plan and Template to them.
6. Choose your stock management setting. Timesact gives you three options: preorder only when out of stock, preorder regardless of stock level, or preorder only when Shopify inventory is available. For a standard out-of-stock preorder scenario, “preorder when out of stock” is the right setting.
7. Preview the customer experience. Before going live, place a test order through your storefront to see exactly what your customers will see — the button, checkout flow, payment breakdown, and preorder confirmation email. This is the step most merchants skip and occasionally regret — launching your first preorder with a walkthrough behind you is always the right call.
8. Go live. Once the test passes, your preorder button is live. Customers arriving at the product page will see “Pre-Order” instead of “Add to Cart” or “Sold Out,” with your configured messaging setting expectations clearly.

A few practical details worth knowing before you configure:

• Button text is fully customizable. “Pre-Order” is the default, but you can use any label that fits your brand — “Reserve Now,” “Order Yours,” “Secure Your Spot.” Update it in your Template settings.
• The cart label is separate from the button label. Configure both — the cart label is what the customer sees after they’ve added the item, and it should reinforce that this is a preorder, not a standard purchase.
• Finish your product setup in Shopify before adding it to Timesact. If you add variants in Shopify after the product is already in Timesact, those new variants won’t sync automatically — you’ll need to remove and re-add the product in the app.
• “Continue selling when out of stock” must be enabled in Shopify for the variant you’re putting on preorder. Without this, Shopify won’t allow the purchase to proceed regardless of what Timesact displays.
• The preorder button reverts cleanly when you’re done. When you remove a product from Timesact or your campaign ends, the button returns to its standard state — “Add to Cart” if stock is available, “Sold Out” if not. No theme cleanup required.
• For large catalogs, Tag Automation in Timesact lets you apply preorder settings to many products at once using Shopify product tags, rather than adding each product individually.

When the preorder button is configured correctly and the messaging around it is clear, the impact on your product page is immediate and measurable through your Shopify analytics.

Dead pages start converting again. A product page with a working preorder button continues earning during stockouts or pre-launch periods instead of generating traffic with no return.

Customer expectations are set at the point of purchase. Clear shipping date messaging on the product page and in the cart reduces post-purchase confusion and the support volume that comes with it — the most common questions after a preorder (“when does it ship?” “what did I actually order?”) are answered before the customer even clicks.

Variant-level precision reduces friction. Customers browsing a product with mixed stock can see exactly which variants are available now versus on preorder, and make an informed decision without contacting support.

No theme risk. Because Timesact works through Shopify’s App Embed system and leaves no code behind on uninstall, merchants can configure and remove preorder buttons without involving a developer or worrying about residual changes to their theme.

1. Identify the product or variant you want to put on preorder — out of stock, upcoming launch, or limited availability.
2. Confirm “Continue selling when out of stock” is enabled in Shopify for the relevant variant before you begin.
3. Install Timesact and enable the App Embed on your active theme.
4. Create your Selling Plan with an internal name and shipping date (if confirmed).
5. Create your Pre-Order Template — configure button text, supporting message with {{shippingDate}} if applicable, and cart label.
6. Add the product to Timesact, select the relevant variants, assign your Selling Plan and Template, and set your stock management preference.
7. Run a test order to verify the full flow end-to-end.
8. Go live — your “Add to Cart” button is now a “Pre-Order” button for the configured variants.
9. Monitor via Shopify orders using Timesact’s preorder order tags to track preorder volume separately from standard purchases.

Switching from “Add to Cart” to “Pre-Order” is one of those changes that looks small on the surface but has an outsized effect on what your product page can do. It turns a page that was generating traffic with no revenue output into one that captures demand, sets expectations, and keeps your store earning — even when inventory isn’t there yet.

The setup is no-code, reversible, and variant-level precise. Most merchants have their first preorder button live within a single session.

Install Timesact on Shopify and replace your first “Add to Cart” button today. If you’d like a guided walkthrough of your specific product setup, Book a free setup call and we’ll get it configured together.