One-Page Checkout

Overview




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

Disclaimer

  1. PayPal is not supported.
  2. You must email help@trycelery.com to request access.
  3. Celery product descriptions are not supported in the new checkout.

Installation


Inside your website header, add the Celery snippet shown below.
<script src="//www.celeryshop.com/sdk/sdk.js"></script>
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.

https://subdomain.celeryshop.com/checkout?product_id= ProductID

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. 


Example:
<h1>Product 1</h1><a href="https://subdomain.celeryshop.com/checkout?product_id=ProductID1">Pre-Order Now</a>
<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>
This will trigger the overlay checkout when paired with the Celery SDK.

Adding multiple products at once

If 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.

https://subdomain.celeryshop.com/checkout?products=ProductID1&products=ProductID2

Example:
<h1>Bundle 1</h1><a href="https://subdomain.celeryshop.com/checkout?products=ProductID1&products=ProductID2&products=ProductID3">Pre-Order Now</a>

Features


There's a couple new features available to one-page checkout. 
  1. Cart persistence - All items added from multiple checkouts flow into a unified cart.
  2. Abandoned Cart Recovery - Contact buyers who had failed to complete their purchases.
  3. Responsive Design - The checkout will render correctly on both mobile and desktop. 



Feedback and Knowledge Base