LogoLogo
Siteglide.comAdminRoadmap
  • πŸ‘‹Welcome
  • Get Started
    • πŸš€Quickstart Guides
    • ❔Support & FAQs
      • ℹ️Siteglide Support Policy
      • ℹ️Siteglide Technology Stack
      • ℹ️External Resources
      • ℹ️Front-end Browser Support
  • Portal
    • Account
    • Sites
      • πŸš€Quickstart: Create a Site
      • ℹ️Site Details
      • ℹ️Site Users
      • πŸ“‹Install & Manage Modules
      • πŸ’³Go Live
      • πŸ’³Subscription
      • 🌍Domains
        • πŸ“‹Add a Fully Delegated Domain
        • πŸ“‹Add an External Domain
        • πŸ’»Subdomain on a separate instance
        • πŸ“‹How to setup a multi domain start page
      • ☁️Site Backups and Disaster Recovery
    • Users
      • πŸ“‹User Roles
      • πŸ“‹Invite & Manage Users
    • Billing
      • πŸ’³Billing Setup
      • πŸ’³Subscriptions and Changes
      • πŸ’³Automatic Site Upgrades
      • πŸ’³Invoices
    • Tickets
    • Marketplace
    • Agencies
      • πŸ‘©β€πŸ’»Agency Account
      • πŸ‘©β€πŸ’»Clients
      • πŸ‘©β€πŸ’»Site Copies
      • πŸ‘©β€πŸ’»Agency Whitelabelling
  • Developer Tools
    • CLI
      • πŸš€Quickstart: CLI
      • ℹ️About
      • πŸ“‹Site Setup
      • ❔Troubleshooting
      • πŸ’»Reference
      • πŸ›³οΈCLI Changelog
      • πŸ§™β€β™‚οΈGo Further: CLI
        • Creating WebApps via CLI
    • Liquid
      • ℹ️About
      • πŸ’»Reference
      • Accessing Data in Liquid Variables - Tutorial 1 - Using Dot Notation
      • Accessing Data in Liquid Variables - Tutorial 2 - Iterating over Arrays and Objects
      • Using Collections with WebApps and Modules
      • Accessing Data from the Global Context Variable
      • Truthiness - Using Liquid to determine if a field is empty or blank
      • πŸ“‹Alternatives to Storing and Executing Liquid from Database Items
    • GraphQL
      • ℹ️About GraphQL
      • πŸ“‹Tutorials
        • Tutorial 1 - Your First Query
        • Tutorial 2 - Pagination
        • Tutorial 3 - Filtering the Results
        • Tutorial 3 - (Answers)
        • Tutorial 4 - Advanced Filtering
        • Tutorial 4 - (Answers)
        • Tutorial 5 - Using Liquid to run GraphQL queries on your Site
        • Tutorial 6 - Variables
        • Tutorial 6 - (Answers)
        • Tutorial 7 - Sorting
        • Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
        • Tutorial 9 - Using Mutations to Create New Records
        • Tutorial 10 - Using Mutations to Edit a Record
        • Tutorial 11 - Using Mutations to Delete an Item
        • Tutorial 12 - Related Records and Datasources
    • Configuration
      • ℹ️Field Types
      • ℹ️Custom Field IDs
    • Zapier Integration
      • ℹ️Formatting arrays correctly
    • Developer Marketplace
      • ℹ️About Building Modules
      • ℹ️Module Setup
      • ℹ️Site Template Modules - and How to Make Your Own
      • ℹ️Create Folder Structure
      • ℹ️Updating Modules
      • ℹ️Submit Module for Approval
      • ℹ️Adding Payment to a Module
      • ℹ️Theme Module Example
      • ℹ️Data & UI Module Example
      • πŸ’»Reference
      • 🌳File Structure
    • Release Notes
      • πŸ›³οΈSiteglide Admin/API - Changelog
      • πŸ›³οΈModule - System Files - Changelog
      • πŸ›³οΈModule - eCommerce - Changelog
      • πŸ›³οΈModule - Menu - Changelog
      • πŸ›³οΈModule - Slider - Changelog
      • πŸ›³οΈModule - Secure Zones - Changelog
      • πŸ›³οΈModule - FAQ - Changelog
      • πŸ›³οΈModule - Events - Changelog
      • πŸ›³οΈModule - Blog - Changelog
  • SiteBuilder
    • Build Sites Faster
      • πŸš€Quickstart: SiteBuilder
      • About
      • Site Setup
        • πŸ—οΈMarketplace Themes & Templates
        • πŸ—οΈCreate Site From Template
        • πŸ—οΈInstall SiteBuilder Module
        • πŸ—οΈCreate a Page Template
        • πŸ—οΈSet Up Tailwind CSS with the recommended CLI method
      • Styling
        • πŸ—οΈEditing Tailwind CSS using the recommended CLI method
        • πŸ—οΈTailwind CSS Themes - Choosing a Build Method
        • πŸ—οΈTailwind CSS - Preview Mode
        • πŸ—οΈTailwind's JIT Compiler Via CDN (deprecated)
        • πŸ—οΈTheme Presets
        • πŸ—οΈExample Tailwind Project Setup
      • Layouts
        • πŸ—οΈInsert Static Layouts
        • πŸ—οΈInstalling Dynamic Layouts
        • πŸ—οΈEditing Dynamic Layouts
        • About Layouts
          • πŸ—οΈDynamic Layouts
          • πŸ—οΈStatic and Dynamic Form Layouts
          • πŸ—οΈSliders
      • πŸ’»Reference
    • Advanced Features
      • 🧞SiteBuilder Live Updates API
        • πŸ‘€Live Updates Reference
        • πŸ”ΉLive Updates Markup Example
        • πŸ“‹Steps to Setting Up Live Updates API in a Module/WebApp Layout
        • πŸ”ΉLive Updates Example - Enforcing Filters
        • πŸ“‹Steps to Use Live Updates Methods
        • πŸ“‹Steps to Initialise Live Updates with JS
        • πŸ—“οΈLive Updates Changelog
      • ℹ️SiteBuilder JavaScript
        • ℹ️Forms JS
        • ℹ️Social Sharing JS
        • ℹ️Sliders JS
        • ℹ️Dark Mode JS
        • ℹ️Cookie Settings JS
      • ℹ️SiteBuilder Liquid Includes
        • ℹ️Pagination
      • ℹ️SiteBuilder Liquid Functions
        • ℹ️Detail Page Valid
        • ℹ️Field Mapping
        • ℹ️Get Table Config
        • ℹ️Case From Order ID
      • πŸ—“οΈSiteBuilder Changelog
    • Extend SiteBuilder
      • ℹ️Create SiteBuilder Themes
      • ℹ️Create Marketplace Modules
      • ℹ️Adding Dynamic Layouts to Themes & Modules
      • ℹ️Adding Static Layouts to your Theme
      • πŸ’»Reference
  • CMS
    • Dashboard
    • Pages
      • πŸš€Quickstart: Pages
      • 🎨Studio (Alpha Release)
        • 🎨Setup
        • 🎨Create a Page
      • ℹ️Editor (Legacy Studio)
      • ℹ️Code View & Toolbox
      • ℹ️About Pages
        • ℹ️Page Settings
        • ℹ️Custom Fields in Pages
        • ℹ️Pages with Siteglide CLI
      • ℹ️About Page Templates
        • ℹ️Page Templates with Siteglide CLI
        • Preventing Duplicate Content
      • ℹ️System Pages
      • πŸ’»Reference
      • 🌳File Structure
    • Content Sections
    • File Manager
      • πŸ”ΉAbout Assets
      • πŸ”ΉLinking to Assets Explained
      • πŸ”§Assets Troubleshooting
      • πŸ”ΉSiteglide Scripts Explained
      • πŸ’»Assets with CLI
      • πŸ”ΌMigrating Assets
      • πŸ“‹Steps to Optimise Images on the Fly with Cloudinary
      • πŸ”Ήsiteglide_head_scripts and siteglide_footer_scripts Explained
      • 🌳Assets File Structure
      • πŸ‘€Tags for Assets
    • Forms
      • Quickstart: Forms
      • ℹ️About Forms
      • πŸ“‹Guides: Forms
        • πŸ“‹Steps to Using Separate Fields for First Name and Surname in a Form
        • πŸ“‹Steps to Programmatically Redirecting after a Form Submission
        • πŸ“‹Steps to Adding Form Confirmation Pages
        • πŸ“‹Steps to Adding a Progress Bar
        • πŸ“‹Steps to Changing Form Styling on Submission Using CSS
        • πŸ“‹Steps to Using Custom Field Set fields in a Form's Custom Layout
      • πŸ§™β€β™‚οΈGo Further: Forms
        • ℹ️Migrating Forms
        • ℹ️Explained - Preventing Spam Form Submissions and Captchas
        • ℹ️Explained - Show Clearly When a User is Already Logged in When Submitting a Form
        • ℹ️Forms Error Callback and Validation
        • ℹ️Forms Success Callback
        • ℹ️File Upload Previews
      • 🌳Forms File Structure
      • πŸ’»Reference
      • ❔Troubleshooting
    • Automations
      • πŸš€Quickstart: Automations
      • ℹ️About
        • ℹ️Email Templates
        • ℹ️Email Automations and Email Templates with Siteglide CLI
      • πŸ“‹Guides
        • ℹ️Integration Automations
        • ℹ️A Transactional Email Example
        • ℹ️An API Call Action Example
        • ℹ️A Custom Liquid Action Example
        • πŸ“‹Steps to Testing Emails on a Staging Site
        • πŸ“‹Steps to Authenticating Sendgrid Emails on Live Sites
      • πŸ§™β€β™‚οΈGo Further
      • πŸ’»Reference
      • 🌳File Structure
    • Categories
      • πŸš€Quickstart: Categories
      • ℹ️About
        • ℹ️Outputting Categories on WebApp / Module / eCommerce Layouts
        • ℹ️Filtering WebApps and Modules by Categories Using Liquid Parameters
      • 🌳File Structure
      • πŸ’»Reference
    • Company Information
      • ℹ️About
      • πŸ’»Reference
      • ❔Troubleshooting
    • URL Redirects
  • Modules
    • Core Modules
      • MenuBuilder
        • πŸš€Quickstart: Menu Builder
        • ℹ️About
      • Secure Zones
        • πŸš€Quickstart: Secure Zones
        • ℹ️About
          • πŸ“‹Dynamically Assign a Secure Zone during Form Submission
        • πŸ§™β€β™‚οΈGo Further
          • ℹ️Secure Zones with Siteglide CLI
          • ℹ️Using the context.current_user object
      • Media Downloads
        • πŸš€Quickstart: Media Downloads
        • ℹ️Layouts
        • πŸ’»Reference
      • Blog & Authors
        • πŸš€Quickstart: Blog & Authors
        • πŸ”ΉBlog Archive & Date Filtering
        • πŸ”ΉBlog Search
        • πŸ”ΉBlog Filter by Category
        • πŸ”ΉBlog Filter by Author
        • 🌳File Structure
        • πŸ’»Reference
      • Events
        • πŸš€Quickstart: Events
        • ℹ️Standard List View
        • ℹ️Getting Started with Event Filtering & Searching
        • ℹ️Filter by Category
        • ℹ️Filter By Host (Author)
        • ℹ️Filter by Event Dates
        • ℹ️Datasourcing the Event Host
        • ℹ️Search
        • ℹ️Map List View
        • ℹ️Calendar List View
      • FAQ
        • πŸš€Quickstart: FAQ
        • πŸ’»Reference
      • Testimonials
        • πŸš€Quickstart: Testimonials
        • πŸ’»Reference
      • Slider
        • πŸš€Quickstart: Slider
        • πŸ’»Reference: Slider
    • Community Modules
      • πŸ—οΈSiteBuilder
      • πŸš€CRM Sync
        • ℹ️About CRM Sync Module
        • πŸ“‹Steps to Set Up CRM Sync on an Automation
        • πŸ—“οΈCRM Sync Changelog
    • Go Further: Modules
      • ℹ️Front-end Submit Modules
  • WebApps
    • πŸš€Quickstart: WebApps
    • WebApp Items
      • πŸ“‹Create WebApp Items
      • πŸ“‹Importing and Exporting
    • Layouts
      • ℹ️WebApp List Layout
      • ℹ️WebApp Detail Layouts
    • Go Further: WebApps
      • πŸ“‹Searching by Location
      • πŸ“‹Searching - Advanced Filtering
      • πŸ“‹Searching - By Keyword
      • πŸ“‹Front End Create Forms
      • πŸ“‹Front End Update Forms
      • πŸ“‹Front End Delete
  • WebApp Troubleshooting
  • eCommerce
    • πŸš€Quickstart: eCommerce
    • Get Started
      • πŸ’‘About the eCommerce Module
      • Settings
      • πŸ“‚Cart, Checkout and Quotes
        • πŸ’‘About Cart, Checkout and Quotes
        • πŸ“‹Steps to Implement a Guest Checkout Flow
        • πŸ“‚Product Views
          • πŸ”ΉProduct Layouts
          • πŸ”ΉProduct List Layout
          • πŸ”ΉProduct Detail Layout
          • πŸ”ΉAdd to Cart Button
          • πŸ“‹Steps to Datasource and Display Related Products
          • πŸ”ΉDynamic Product Layouts based on Categories
          • πŸ“‚Attribute Selection
            • πŸ”ΉAttribute Layout - Presenting the Choice to the Customer
            • πŸ”ΉAttributes - Changing Product Price after Change
          • πŸ“‚Discount Selection
            • Discount Codes Layout
            • Minimum Payments
          • πŸ“‚Shipping Selection
            • Shipping Options Layout
        • Managing Products
          • Creating and Editing
          • Securing Products
          • Location
          • Custom Fields
          • Edit Module Structure
          • Product Custom Field Sets
          • Inventory
          • Managing Attributes
          • Pricing
          • Product Categories
          • Open Graph Fields
          • SEO Fields
          • Standard Fields
          • Product Import and Export
          • Discounts
        • πŸ“‚Cart
          • πŸ”ΉCart Layouts
          • Checking Inventory in Cart
          • Updating Quantity in Cart
          • Updating Displayed Cart Quantity
        • πŸ“‹How to Set Up a Shopping Cart and Guest Checkout - Tutorial
        • πŸ“‚Checkout Forms
          • πŸ”ΉCheckout Form Layouts
          • πŸ”ΉCheckout Forms with PayPal
        • πŸ“‚Orders
          • Order Confirmation
          • Re-Ordering
          • πŸ”ΉOrders Layouts
        • πŸ“‹Steps to Add Secure Zones and User Orders View to your Checkout Flow
        • Quotes
        • Selling Digital Products
        • πŸ”ΉVolume Pricing
        • πŸ“‹Steps - Alternatives to Product Grouping
      • πŸ“‚Basic Payment Forms
        • πŸ’‘About Basic Payment Forms
        • πŸ“‹Steps to Set up a Basic Payment Form (with a Fixed Payment Amount)
        • πŸ“‹Authorize.net Basic Payment Forms
        • πŸ“‹PayPal Basic Payment Forms
        • πŸ“‹Steps to Allow User to Decide Amount they Will Pay
        • πŸ“‹Step-by-step Basic Payment Confirmations
        • πŸ‘€Basic Payment Forms Reference
        • ℹ️ecommerce/basic_payment
      • πŸ“‚Payment Gateways
        • πŸ’»Building a Custom Payment Gateway
          • πŸ“‹Steps to Support Basic Payment Forms with your Custom Payment Gateway
          • πŸ“‹Steps to Support Checkout with your Custom Payment Gateway
        • πŸ”ΉPaypal Custom Parameters
        • πŸ”ΉStyling Stripe Card Elements
        • πŸ’‘About Payment Gateways
        • πŸ“‹Steps to Switching Payment Gateway
        • πŸ”ΉTest Cards
      • πŸ“‚Currency and Tax
        • πŸ’‘About Tax Codes
        • Currency Changer
        • Tax Code Changer
        • Formatting Currency
      • πŸ“‚Subscriptions
        • πŸ’‘About Subscriptions
        • Managing Subscriptions
          • Creating Subscription Products
          • Changing Price and Billing Interval
          • Creating a Form for Signing Up and Changing Payment Details
          • Subscription Order Status Explained
          • Terms and Conditions (Good Practice)
        • πŸ“‹Subscriptions Payment Gateway Setup
        • Subscriptions List Layout
        • Subscriptions Detail Layout
        • User's Active Subscriptions
        • Subscription Action Required
        • Cancelling Subscriptions
      • 🌳Basic Payment Forms Folder Structure
      • 🌳Cart and Checkout Folder Structure
  • CRM
    • πŸš€Quickstart: CRM
    • Users
      • User Details
      • User Secure Zones
      • How Users Edit their Email and Password Front End
      • Custom Field Sets & CRM Custom Fields
      • Storing User's Favourite WebApp / Module Items
    • Companies
    • Cases
      • User's Form Submissions (Cases)
  • Site Manager
    • Code Editor
    • Templates (Pages & Email)
    • Headers & Footers
    • Code Snippets (Includes)
      • πŸ”§Includes Troubleshooting
      • πŸ‘€constants_json
      • πŸ‘€constants
      • 🌳Includes File Structure
      • πŸ’»Includes with Siteglide CLI
      • πŸ”§Tags for Includes
    • System Pages
      • Automatic Site Maps
    • System Emails
    • Data Management
    • Admin Menu Editor
    • Integrations
  • Reporting
    • πŸš€Quickstart: Reports
  • Miscellaneous
    • System Features
      • Pagination on Liquid Tags
      • Custom Pagination Layouts
      • Timezones in the Siteglide Admin and on the front-end of your Site
      • Module/WebApp Caching
      • Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
      • Translating Dates
      • Site Search
      • About Site Search
      • AI Tools for the Rich Text Editor
      • Cookies on Siteglide Sites
    • Front-End Performance
      • Video Embeds
      • Forms Above the Fold
Powered by GitBook
On this page
  • Prerequisites
  • Introduction
  • Getting Started: How to Set Up a Cart and Guest Checkout Flow
  • Orders
  • A note on Inventory

Was this helpful?

Export as PDF
  1. eCommerce
  2. Get Started
  3. Cart, Checkout and Quotes

How to Set Up a Shopping Cart and Guest Checkout - Tutorial

PreviousUpdating Displayed Cart QuantityNextCheckout Forms

Last updated 5 months ago

Was this helpful?

Prerequisites

  • You have installed the eCommerce Module

  • You have set up a Payment Gateway

  • You have added Products to the database

  • You have set up a Product List View

  • You have set up Product Detail Pages

  • Using PayPal as a Payment Gateway? There are additional setup instructions .

Introduction

The Siteglide Ecommerce Module makes it easy to set up a secure and reliable Shopping Cart and Checkout flow. As usual, you can customise your layouts at every step.

In this tutorial, we will show you how to create the simplest Cart and Checkout flow- the Guest Checkout. Users can buy Products without having to sign in, but their details are stored in the CRM so the Site Owner can send them their Products.

In future tutorials we will show how to extend this with the following features:

  • Use the Secure Zone Module to Sign Up and Login users at different stages of their shopping experience.

  • Use Product Attributes to add Products with variations to your shopping Cart.

  • Use Categories to Create Pages which display different lists of Products.

  • Add a Cart Summary to the Header

Getting Started: How to Set Up a Cart and Guest Checkout Flow

Step 1- The Add to Cart Button

Make sure your Product Detail pages have an add to Cart Button in their layout’s item.liquid file.

This liquid include tag will add the "Add to Cart" Button:

{% include 'ecommerce/cart_add' -%}

This needs to be in the item.liquid file to work, because this will have access to the correct data for this Product.

Step 2 - The Cart

Create a new Page for your Cart and use liquid to include the Cart.

(Note- the Cart does not need to be on it’s own page, but this is the easiest place to start.)

Use this liquid to include the Cart layout in your page.

{%- include 'ecommerce/cart', layout: 'cart', remove_default_css: 'false' -%}

Use the layout parameter to select the folder which contains the wrapper.liquid and the item.liquid file you would like to use for your layout. For now, you can use the "cart" layout which is included in the Ecommerce Module.

Use the remove_default_css parameter to choose if you want to remove siteglide_example.css from output or not.

Learn more about Cart Layouts here

Step 3 - Create a Form for your Checkout Page

This will store a paying User against the CRM and submit their payment details securely via your chosen Payment Gateway.

You will need to add the following information when creating your form:

  • Form Name: e.g. Checkout Form

  • Redirect URL - This is the relative URL you want a user to be redirected to after submission of payment details e.g. a confirmation page.

  • In the payments tab, toggle "Use as a payment form?" to on

  • Payment Form Type will appear under the payments tab. Select "Standard Checkout".

Save your changes.

Step 4- Create a new Page for your Checkout.

Step 5- Add the Checkout form to your Checkout Page

Include the Checkout Layout in your page:

{% include 'ecommerce/checkout', form_id: '2', layout: 'default' -%}

The form_id parameter should be the id of your Checkout Form. If you use the Toolbox to add this code, you can lookup your form by name.

The layout parameter should refer to the folder which contains your form layout file. This file exists here:

layouts/forms/form_2/default.liquid

For now, you can use the "default" layout that is included with the eCommerce module.

If the page is visited while the user has an empty cart, an alternative "empty" layout will show. The default form layout will automatically add an empty layout at the path:

layouts/modules/module_14/checkout/default/empty.liquid

If you create a custom layout, you should also create an empty.liquid file, renaming the default folder in the filepath above with the name of your form layout.

Step 6: Test your eCommerce flow.

Users will be added to the CRM in Admin.

You can see the records of transactions in Admin by navigating to the Orders list or finding the User in the CRM.

Orders

After a User has submitted your Checkout form, an order will be automatically generated. You can see a list of orders under ECOMMERCE/Orders in the left-hand menu.

Click on the name of the order for more information.

A note on Inventory

As a user buys a Product, the Inventory decreases accordingly.

A User cannot buy a Product if its Inventory is 0, but you can also hide Products that have sold out from the Product List Views.

Learn more about Product Detail pages .

You can add a form by navigating to CMS/Forms in the left hand Menu and then clicking the "+ Add New Form" button in the top right of the page. Learn more about forms .

Learn more about pages

Remember, you will need to use the test cards from your chosen Payment Gateway. Find more information

πŸ“‚
πŸ“‹
here
here
here
here
here