Displays

Table of Content

Cart Display - Auto Mail Orders

Full cart and checkout component that logs orders to Google Sheets and sends customer emails through Gmail-based Apps Script.

What it does

Auto Mail Orders handles the cart, checkout, success state, and empty state in one component.

It logs orders to Google Sheets and sends branded confirmation emails using the Google account connected to the Apps Script.

Before you start

Make sure Cart Engine is installed.

You also need:

  • A Google Sheet for orders

  • The Apps Script added to that Sheet

  • A deployed Apps Script /exec URL

Steps to set up the component

Step 1

Place Auto Mail 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

Customize the email using Brand Name, Subject Line, Banner Image, Headline, Greeting, Body Text, Closing Line, Support Email, Website URL, Accent Color, Accent Text, Email Background, and Card Background.

Step 7

If you want owner notifications too, turn on Notify Owner and set Owner Email.

Step 8

Style the component and use Preview State while designing.

How it works

Auto Mail Orders sends the order to Google Sheets and sends email through Gmail App in Google Apps Script.

That means the sender is the Google account that owns the script.

Common mistakes

Apps Script URL is missing

Without the deployed /exec URL, orders and emails will not send.

There is no email field in the checkout form

If the customer does not enter an email, they cannot receive a confirmation message.

Expecting a branded sender address

Auto Mail Orders sends through the Google account connected to the Apps Script. Use Pro Mail Orders if you want a branded domain sender.

Quick setup checklist

  1. Install Cart Engine.

  2. Add Auto Mail Orders to the checkout area.

  3. Deploy the matching Apps Script.

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

  5. Build Input Fields and delivery rules.

  6. Customize the email settings and test a full order.

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