Displays

Table of Content

Cart Display - Manual Orders

Full cart and checkout component that logs orders to Google Sheets without customer confirmation emails.

What it does

Manual Orders handles the cart view, checkout form, success state, and empty state in one component.

It sends the order to Google Sheets through its matching Apps Script and can optionally notify the store owner by email.

Before you start

Make sure Cart Engine is installed.

You also need:

  • A Google Sheet. Name your desired tab "Orders"

  • The Apps Script script added to that Sheet

  • A deployed Apps Script /exec URL

Steps to set up the component

Step 1

Place Manual Orders inside your cart drawer, modal, or checkout area.

Step 2

Tap on Apps Script, a code will be copied to your clipboard. Paste it into Google Apps Script attached to your Sheet, deploy it as a Web App, and copy the /exec URL.

How to Setup Apps Script

Step 3

Paste that URL into Apps Script URL.

Step 4

Build your checkout form using Input Fields. For the fields that may affect pricing, please remember the Unique ID to be used in Charges/Discounts.

Step 5

If needed, add extra logic with Charges/Discounts.
You can use it in 3 ways - Quantity, Price, and ID

If you choose Quantity or Price, you will be using numbers operation to define what activates the Charge or Discount. You can have operations like:

x = the value you pick

x> or <x // checks if the Quantity or Price is less than x
x< or >x // checks if the Quantity or Price is more than x
x // checks if the Quantity or Price is exactly x
x = the value you pick

x> or <x // checks if the Quantity or Price is less than x
x< or >x // checks if the Quantity or Price is more than x
x // checks if the Quantity or Price is exactly x
x = the value you pick

x> or <x // checks if the Quantity or Price is less than x
x< or >x // checks if the Quantity or Price is more than x
x // checks if the Quantity or Price is exactly x

When the operation returns true, it activates the Charges or Discounts. You can pick a flat rate or a percentage. The percentage is calculate before the extra charges or discounts.

If you choose to use the ID mode, you will be prompted to input the Unique ID from step 4. If the Input Field was a toggle or checkbox, you can input true or false to trigger the Charge or Discount. You can also use the less than/more than function if the input field is a number.

Step 6

If you want basic owner notifications, turn on Notify Owner and fill Owner Email.

Step 8

Style the component, then use Preview State to review the different visual states while designing.

How it works

Manual Orders sends order data to the linked Apps Script, which writes the order into Google Sheets.

This version does not send customer confirmation emails.

Common mistakes

Apps Script URL is missing

Without a valid deployed /exec URL, the component cannot submit orders.

Cart Engine is not installed

The checkout component needs the cart engine to read cart items.

Expecting customer emails

Manual Orders does not send customer confirmation emails. Use Auto Mail Orders or Pro Mail Orders if you need that.

Quick setup checklist

  1. Install Cart Engine.

  2. Add Manual Orders to the checkout area.

  3. Deploy the matching Apps Script.

  4. Paste the /exec URL into Apps Script URL.

  5. Configure Input Fields, delivery rules, and optional Charges/Discounts.

  6. Turn on Notify Owner only if needed.

Create a free website with Framer, the website builder loved by startups, designers and agencies.