Pre-order campaign
A pre-order campaign turns a pre-order into a launch: early buyers pay less in phases (for example Early bird −25%, Early access −15%, Last call −5%), each phase can be limited to a number of slots, and a timeline shows the goal, shipping and the estimated delivery. The campaign is stored once on the product, so the product page and the Pre-order campaign section always show the same dates.
Treble shows it in two places: the Pre-order campaign block on the product page (the phase that is on, its price, slots left, when the price rises, a delivery countdown and the timeline), and the Pre-order campaign section for the home page or any page.
The campaign doesn't turn on pre-orders by itself
The Pre-order button, the note under it (that also goes on the order) and the Pre-order badge come from Treble's pre-order mode, not from the campaign. Each variant must track inventory, be at 0 stock (or below) and have Continue selling when out of stock turned on in Shopify admin, with Theme settings > Pre-orders set to every variant sold past zero stock, or to products tagged pre-order. See Pre-orders.
Leave the campaign's Reserved field empty: the reserved count then follows the real pre-orders (the stock going below zero).
Before you start
The campaign uses two metaobjects and one product metafield. You create them once in Shopify admin (step 1).
How to set it up
Step 1: Create the definitions (once)
- In Shopify admin, go to Settings > Metafields and metaobjects > Metaobject definitions and click Add definition.
- Create Pre-order phase (type
preorder_phase) with the fields name (single line text), discount (integer, whole percent), slots (integer), starts_at and ends_at (date and time), note and icon (single line text). - Create Pre-order campaign (type
preorder_campaign) with title, opens_at (date and time), phases (list of Pre-order phase references), goal and reserved (integer), ends_at (date and time), goal_note and shipping_note (single line text), ships_at, delivery_from and delivery_to (date). Every field is optional except the title. - Under Products, add the metafield
custom.preorder_campaign: a metaobject reference to Pre-order campaign. Turn on storefront access for the definitions.
Step 2: Create a campaign
- Go to Content > Metaobjects > Pre-order phase and add the phases, for example Early bird (25%, 100 slots), Early access (15%, 400 slots) and Last call (5%).
- Go to Pre-order campaign, add a campaign, pick the phases in order under Price phases, and fill in the dates, the goal and the delivery window.
- Open the product, pick the campaign in its Pre-order campaign metafield, and choose the product.preorder template under Theme template.
Step 3: Set up the block
- In the theme editor, open the product.preorder template. The Pre-order campaign block sits under the price in Product details.
- Choose what the card shows (1): the phase price, slots left, the next phase with a price-rise countdown, and a delivery countdown.
- Choose where the Timeline goes (2): Below product information (a full-width row under the product), In product details, or hidden.
- In product details the timeline folds open and closed; set Expand the timeline by default and the Direction (vertical, or horizontal that scrolls sideways when narrow). Add a Pre-order timeline place block to the Product details or the Second column to move the timeline there.
Step 4: Show it on other pages (optional)
- Add the Pre-order campaign section and pick the Product. On a product page, leave it empty to use that product.
- Choose Stage (heading, the phase price, reserved of goal, a button and the product with a delivery countdown, over the timeline) or Timeline (the timeline in a panel).
How the timeline is worked out
Campaign rules
| Phases | Any number, up to 8, in the order of the Price phases list. A phase without a start begins when the one before ends (the first when pre-orders open); without an end, it runs until the next one starts or the campaign ends. |
|---|---|
| Slots | A phase also ends once its slots, added to the slots of the phases before it, are reserved. The card shows the slots left in the phase that is on. |
| Reserved | Blank: counted from the units sold past zero stock on the product's tracked variants. A number: shown as it is. |
| Milestones | Pre-orders open (opens_at), each phase, Campaign goal (goal and ends_at), Shipping (ships_at and shipping_note) and Estimated delivery (delivery_from and delivery_to). A milestone whose fields are all blank is left out. |
| Pre-order note | The note under the button uses custom.preorder_date first, then the campaign's ship date ("Ships from …"), then its delivery window ("Estimated delivery Dec 8 – Dec 16"). |
Settings reference
Pre-order campaign
| Show phase price | The price after the phase discount. Create the same discount in Shopify (an automatic discount for the phase dates) so checkout matches. |
|---|---|
| Show slots left | Turns this on or off. |
| Show next phase and price-rise countdown | Turns this on or off. |
| Show delivery countdown | Turns this on or off. |
| Timeline | |
| Timeline | Below product information: a full-width row under the product. In product details: under this block, or where you put a Pre-order timeline place block. Options: Below product information, In product details, Hidden. |
| Direction | Horizontal scrolls sideways when the column is narrow. Options: Vertical, Horizontal. |
| Expand the timeline by default | Turns this on or off. |
| Heading | |
| Panel color scheme | Colors from Theme settings > Colors. |
| Show reserved of goal | Turns this on or off. |
| Pre-orders open icon | Type an icon name, such as truck or screw. See all icons |
| Price phase icon | A phase’s own icon field is used first. See all icons |
| Campaign goal icon | |
| Shipping icon | |
| Delivery icon | |
Pre-order campaign
| Product | Leave empty on a product page to use that product. Elsewhere an empty product shows a sample campaign. |
|---|---|
| Layout | Options: Stage, Timeline. |
| Panel color scheme | Colors from Theme settings > Colors. |
| Label | |
| Show delivery countdown | Turns this on or off. |
| Show product image | Turns this on or off. |
| Show reserved of goal | Turns this on or off. |
| Button label | |
| Timeline icons | |
| Pre-orders open icon | Type an icon name, such as truck or screw. See all icons |
| Price phase icon | A phase’s own icon field is used first. See all icons |
| Campaign goal icon | |
| Shipping icon | |
| Delivery icon | |
Product data
| Pre-order campaign metafield | A product metafield that references a Pre-order campaign metaobject. Leave empty for custom.preorder_campaign. How to set it up |
|---|
Section width, corners, padding, color scheme, divider and visibility work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- The theme only shows each phase's discount: create the matching discount in Shopify, for example an automatic discount for the product limited to the phase's dates, so checkout charges the same price.
- Dates are worked out again in the browser, so the phase, the countdowns and the timeline stay right on cached pages, and move on by themselves when a phase ends.
- Products without a campaign show nothing; in the theme editor the block and section show a sample campaign so you can style them.
- Phase names and notes can be translated with Translate & Adapt (the metaobjects are translatable).
Troubleshooting
The button still reads Add to cart.
The variant is in stock or doesn't continue selling when out of stock: see the warning at the top of this page.
Checkout charges the full price.
Create an automatic discount for the phase's dates: the theme shows the phase price but doesn't change the price at checkout.
Nothing shows on the product page.
Check the product's Pre-order campaign metafield and its Theme template (product.preorder, or a template with the Pre-order campaign block).