No. 06 · Theme block · v1.0.0
Avant
Pre-orders with a timeline.
Delivery window, close countdown, waitlist, edition meter from real stock and a production timeline.
Code complete · live Shopify store test pendingPreview shown with demonstration products and imagery from a fictional store, to show how the block can look on your product page. Included files and features are detailed below. The demo bag doesn't touch your Maisonblock bag.
What it does
Avant turns a product page into a pre-order page. It shows when the piece will arrive, counts down to the close of pre-orders, and walks the shopper through a production timeline you update from the theme editor.
The waitlist uses Shopify's own customer form, so sign-ups land in Customers with tags and no app. The ship window travels into the cart and onto the order.
Features
- Open and closed states from a close date
- Waitlist through Shopify's customer form
- Edition meter from real stock, only when inventory is tracked
- Production timeline you update in the editor
- Ship window carried into the cart and order
- Uses a selling plan when the product has one
You'll need
- "Continue selling when out of stock" on pre-order products
- A separate product template is easiest
Configuration options
Every setting this piece adds to the theme editor, read straight from its code.
| Theme-editor setting | Type | Default |
|---|---|---|
| Delivery | ||
| Delivery window | text | Mid December |
| Status label | text | Delivery expected |
| Ships from (YYYY-MM-DD) | text | — |
| Shipping takes at least | range | 2 |
| Shipping takes at most | range | 5 |
| Pre-order period | ||
| Pre-orders close (YYYY-MM-DDTHH:MM) | text | — |
| Limited edition size | number | 0 |
| Use the product's selling plan | checkbox | true |
| Timeline and perks | ||
| Production steps | textarea | Design locked | Final fit approved Fabric sourced In production Quality check Shipping |
| Current step | range | 1 |
| Perks heading | text | Why pre-order? |
| Perks | textarea | Early pricing Free shipping included First access to the next drop |
| Small print | text | Full refund if we can't deliver. Tracking is emailed when it ships. |
| Focus colour | color | #16130F |
| Current step highlight | color | #E8D9A8 |
Screens
On desktop and phone
Every image is a capture of the live demo above, unedited. Demo store, products and photography are examples (photos: Unsplash and Pexels).
Questions about Avant
Does it charge later?
By default the shopper pays now. With a selling plan for deposits or pay-later, Avant uses it.
More from the house
