# Checkout Editor This is where you will start creating checkouts to start selling your offers. The Spiffy Checkout Editor comes with a wide range of options, ranging from single pay offers, payment plans, recurring subscriptions, options, price modifiers, and more. ## Table of Contents - [Editor](#editor) - [Flow](#flow) - [Design](#design) - [Offer](#offer) - [Automations](#automations) - [Settings](#settings) ## Editor Checkouts are a makeup of **_Blocks and Sections_**. When you create a Checkout, it will have the standard Checkout sections and blocks automatically generated. You can remove the default blocks (ex: address, name) to have a simple, stripped-down Checkout, or, you can add your own custom inputs and options to collect more information, or add options that you can set up with price modifiers to change the checkout total when selected. ### **Blocks & Sections** Hover over the Checkout in the main canvas area. You will see the ability to add new sections between sections, and new block elements within sections. There are dozens of different block elements that you can add to your checkout to add functionality. [Learn more about Adding Blocks](https://university.spiffy.co/elements/blocks.md) **Preview Your Checkout** See how your checkout will look without needing to publish. Turn on **Preview** **Mode** and toggle between Mobile and Desktop views. This is a preview only, so the items on your checkout will not be clickable. ### **Order Summary** The order summary is on the right side of the Editor canvas where you can see your Offer Name, Offer Description and Price that you set in the Checkout creation process. If you hover over that section and click **_Edit Order Summary_**, you can add and edit _**Line Items**_ and _**Offer Details**_. - [Learn more about Order Summary settings](https://university.spiffy.co/checkout-settings/offer-title-description.md) - [Learn more about Line Items](https://university.spiffy.co/elements/items.md) ## Flow The **_Flow_** tab is where you can view and build your upsell and downsell _Flows_. Click on the + bar at the top of any column to create a new Upsell step or Thank You page. You can also drag-and-drop upsell steps between columns _before you connect them_, to rearrange your upsell offers. [Learn more about Connections & Logic](https://university.spiffy.co/flows/connections-logic.md) If you click on the Checkout and on Upsell elements, you can create logic conditions that will route customers down different Flows based on how they interact with options and addons on the main checkout, and each Upsell step. example **Potential use-case of Checkout logic in Flows:** - If the customer DOES add the checkbox Addon on the main Checkout, then show Downsell - If the customer does NOT add the checkbox Addon on the main Checkout, then show Upsell example **Potential use-case of Upsell logic in Flows:** - If the customer DOES add Upsell 1 to their order, then show Upsell - If the customer does NOT add Upsell 2 to their order, then show Downsell You can get very creative with building intelligent upsell flows based on selections on the checkout and through the checkout flow, to maximize revenue and average order value. [Learn more about Flows and One-Click Upsells](https://university.spiffy.co/flows/one-click-upsells.md) ## Design The Design settings are where you can change the colors of just about anything on the checkout to match your brand colors. [Learn more about Design Settings](https://university.spiffy.co/styling-customization/design-settings.md) ## Offer The Offer settings give you a quick place to edit your **Offer Details** text, **line items**, and add **discounts**. ### Offer Details & Line Items These are the same settings you have access to when editing a checkout and clicking on the _Order Summary_. You actually have more settings available to you when you edit Offer Details via the visual editor and click to edit the _Order Summary_ directly. [Learn more about Items & Pricing](https://university.spiffy.co/checkout-settings/items-pricing.md) **Selling Products or Subscriptions?** Create your Products or Subscriptions first, and then add them to your checkouts as the main offer, options, addons, or upsells. [Learn more about setting up Single Products](https://university.spiffy.co/products/creating-single-products.md) [Learn more about setting up Subscriptions](https://university.spiffy.co/getting-started/creating-subscriptions.md) ### Discounts Discount Codes or Promo Codes are a great way to give your customers a chance to purchase your offer at a discounted rate. In the editor, you can select existing discount codes, or create new discount codes on the fly. **Need to Edit an Existing Discount?** If you need to edit an existing discount code, go to your account-level [discount settings](https://app.spiffy.co/settings/promos). Discounts can only be selected and created on the fly within the Checkouts Editor. Edit your discount code at the account-level settings. [Learn more about Discount settings](https://university.spiffy.co/checkout-settings/discounts.md) ## Automations Automations is where you can add checkout-level automations, and see all automations that you’ve set up in the Editor and Flows. [Learn more about Purchase Automations](https://university.spiffy.co/automation/purchase-automations.md) If you have Products on your checkout, you will also see a read-only list of automations set up at the Product level. [Learn more about Products](https://university.spiffy.co/products/products-overview.md) ## Settings Settings are where you will find some general checkout-level settings like **Checkout URL customization**, **Gateway Enable/Disable**, **Meta Data**, and **Custom Tracking** Code input. - [Learn more about Checkout URL](https://university.spiffy.co/checkout-settings/checkout-url.md) - [Learn more about Gateways](https://university.spiffy.co/checkout-settings/gateways.md) - [Learn more about Meta Data](https://university.spiffy.co/checkout-settings/metadata.md) - [Learn more about Custom Tracking](https://university.spiffy.co/checkout-settings/custom-code.md)