The one-page checkout was built with the goal of making the purchase experience as efficient as possible. Because of this, all marketing materials (i.e. photos and copy) should be directly on the merchant's webpage. To learn more, please view this blog post or tinker with our live example.
- PayPal is not supported.
- You must email email@example.com to request access.
- Celery product descriptions are not supported in the new checkout.
Inside your website header, add the Celery snippet shown below.
Once done, link all pre-order buttons to your product specific URL.
Adding a single product
The syntax for your product specific links is shown below.
The product ID can be found in your Celery product editor. Click on any product and copy the unique identifier shown in the address bar link.
<h1>Product 1</h1><a href="https://subdomain.celeryshop.com/checkout?product_id=ProductID1">Pre-Order Now</a>This will trigger the overlay checkout when paired with the Celery SDK.
<h1>Product 2</h1><a href="https://subdomain.celeryshop.com/checkout?product_id=ProductID2">Pre-Order Now</a>
<h1>Product 3</h1><a href="https://subdomain.celeryshop.com/checkout?product_id=ProductID3">Pre-Order Now</a>
Adding multiple products at onceIf you want to add multiple products at once, use the following syntax instead (note the change from product_id to products). This is most commonly used for bundles and "must-add" accessories.
<h1>Bundle 1</h1><a href="https://subdomain.celeryshop.com/checkout?products=ProductID1&products=ProductID2&products=ProductID3">Pre-Order Now</a>
There's a couple new features available to one-page checkout.
- Cart persistence - All items added from multiple checkouts flow into a unified cart.
- Abandoned Cart Recovery - Contact buyers who had failed to complete their purchases.
- Responsive Design - The checkout will render correctly on both mobile and desktop.