--- title: "Online Ordering Website" description: "Plan a branded web ordering journey and the operational connections it needs for your Ordering.co website launch project." canonical: https://www.ordering.co/platform/ordering-web/ --- # Plan a web ordering journey around your operation. Ordering Web is the place to discuss the storefront, menu and order flow your customers should use, plus the operations and connections that must support it. [Book a demo](https://www.ordering.co/contact/?meeting=demo#book)[Talk to Ordering.co](https://www.ordering.co/contact/) - Storefront planning - Branded journey - Project-based scope Sample restaurant lunapizza.com/menu Sample restaurantMenuLocationsOrdersDelivery · 14 Elm StCart · 2 Sample promotion**Featured menu items** PizzaPastaSaladsDrinks Pepperoni$14.00 Margherita$12.50 Four cheese$15.00 **Your order**2× Pepperoni$28.001× Garlic bread$5.50Delivery$3.40Total$36.90CheckoutApple Pay · Google Pay · Card · Cash Example storefront preview with menu categories, a cart, and checkout. Start with the order journey, then map the work behind it. - Storefront - Menu - Order flow - Fulfillment Ordering Web ## Design the storefront around a real order journey. 01 ### Customer journey Start with the menu, service choices and order steps customers need to understand before they place an order. 02 ### Brand and domain Discuss the brand expression, domain setup and responsibilities for your website. 03 ### Operational readiness Identify the hosting, availability and support expectations that need an explicit project agreement. 04 ### Implementation approach Choose the appropriate configuration or implementation path after confirming the customer journey and technical requirements. ## Clarify the storefront decisions before implementation. [All features](https://www.ordering.co/features/all-features/) ### Menu structure Define the categories, products and choices customers must see to place the right order. ### Checkout scope Confirm the payment, account and checkout requirements that apply to the selected market and project. ### Service choices Map the fulfillment choices customers need, including the store, timing and handoff that each one requires. ### Location model Identify how customers find the correct store and which location rules need to be supported. ### Order communication Decide which status, service and follow-up communications belong in the customer journey. ### Public information Plan the storefront pages and local information customers need before they start an order. See Ordering Web in action ## See the marketplace journey customers move through. Start with a business, choose from its menu, review the cart, and return to the order detail. The views below show these moments across the web experience. 1. Discover ### Find businesses that fit the customer's location. Customers can set a delivery address, explore categories and filters, or use a map to move from a broad marketplace to a business listing. Your setupChoose the location, categories, filters, and businesses that belong in your marketplace. ![Marketplace home with food categories, search filters, offers, and business listings](https://www.ordering.co/_astro/marketplace-home.aSaVAPDH.webp) Find a business through categories, filters, and listings. [View full image](https://www.ordering.co/_astro/marketplace-home.aSaVAPDH.webp) See 3 more web views ![Delivery address dialog with a map and address fields](https://www.ordering.co/media/features/ca910b41b6ac96d7ddfe8d914f3126250e2a7917c34a3c2e3bed9923489a3ab9.webp) Set a delivery address before exploring nearby businesses. [View full image](https://www.ordering.co/media/features/ca910b41b6ac96d7ddfe8d914f3126250e2a7917c34a3c2e3bed9923489a3ab9.webp) ![Marketplace page with categories, offers, and business listings](https://www.ordering.co/media/features/7d443f208ec82f6c434c091081833f64a6efc56a16f8ca3101c38edf47bc60c9.webp) Compare businesses with categories and delivery details in view. [View full image](https://www.ordering.co/media/features/7d443f208ec82f6c434c091081833f64a6efc56a16f8ca3101c38edf47bc60c9.webp) ![Three web views showing business discovery, a store menu, and a location search](https://www.ordering.co/media/features/4ab973336b47320518a62042539adcefa284781cfc9c1a9b9c138ab86b28e9ef.webp) Browse businesses, open a menu, and begin an order on the web. [View full image](https://www.ordering.co/media/features/4ab973336b47320518a62042539adcefa284781cfc9c1a9b9c138ab86b28e9ef.webp) 2. Choose ### Turn a business listing into a menu choice. A business page brings together menu categories, product images, prices, and item options. Customers can review an item before adding it to the cart. Your setupDefine the menu, options, upsells, and relevant offers each business can show. ![Business page with menu categories, product photos, and store information](https://www.ordering.co/_astro/store-menu.CxgH3ebN.webp) Open a business page to browse its menu. [View full image](https://www.ordering.co/_astro/store-menu.CxgH3ebN.webp) See 4 more web views ![Business menu with featured products, photos, and prices](https://www.ordering.co/media/features/586476ca86fcefe919d8afbb55d6d17b6a996617e3457a1d368b9860c759bac1.webp) See featured menu items and prices together. [View full image](https://www.ordering.co/media/features/586476ca86fcefe919d8afbb55d6d17b6a996617e3457a1d368b9860c759bac1.webp) ![Category navigation above a grid of menu items](https://www.ordering.co/media/features/80c2f25ee3490c2f28b00d1e41e51294e640756c4dde095659c3058117678b34.webp) Move between menu categories to find an item. [View full image](https://www.ordering.co/media/features/80c2f25ee3490c2f28b00d1e41e51294e640756c4dde095659c3058117678b34.webp) ![Product details with a photo, options, quantity, and add to cart action](https://www.ordering.co/_astro/product-options.DQRpoByB.webp) Review product options before adding an item. [View full image](https://www.ordering.co/_astro/product-options.DQRpoByB.webp) ![Product option groups with selectable extras](https://www.ordering.co/media/features/d3e9ff310bf69afcd2faa519f3a8ed3ab3a02e65bef5b735ce5798b63d3fa25f.webp) Choose item extras before adding to the cart. [View full image](https://www.ordering.co/media/features/d3e9ff310bf69afcd2faa519f3a8ed3ab3a02e65bef5b735ce5798b63d3fa25f.webp) 3. Place ### Keep the cart and checkout choices clear. Customers can review items, choose delivery or pickup where offered, enter order details, and see the payment choices and total available for that order. Your setupConfirm fulfillment, payment, fees, offers, and loyalty choices for your project. ![Web checkout with delivery details, payment methods, tip, and order summary](https://www.ordering.co/_astro/checkout.DVbc2dr2.webp) Review delivery details, payment, and the total before ordering. [View full image](https://www.ordering.co/_astro/checkout.DVbc2dr2.webp) See 3 more web views ![Cart panel with two items, quantities, subtotal, and checkout action](https://www.ordering.co/_astro/cart.D7wvZt0L.webp) Edit quantities and review the cart subtotal. [View full image](https://www.ordering.co/_astro/cart.D7wvZt0L.webp) ![Checkout page with customer information and order choices](https://www.ordering.co/media/features/11684f2c65a2e0676300e507d288f030e4fb99f9815243f47dcce66a4a1caf4a.webp) Keep customer information and fulfillment choices together. [View full image](https://www.ordering.co/media/features/11684f2c65a2e0676300e507d288f030e4fb99f9815243f47dcce66a4a1caf4a.webp) ![Checkout with payment methods, loyalty points, and order total](https://www.ordering.co/media/features/2c8dbf71b3e862837cbc3ad25a8b9e2cfdde25bed858eb664aa3820131656c17.webp) Review the payment and loyalty choices available for the order. [View full image](https://www.ordering.co/media/features/2c8dbf71b3e862837cbc3ad25a8b9e2cfdde25bed858eb664aa3820131656c17.webp) 4. Follow up ### Give every order a place to return to. Order details show the items and status. The web experience also shows a rating prompt and a way to start another order. Your setupChoose the status updates and return visit actions your customers should see. ![Completed order detail with items, total, rating, and delivery address](https://www.ordering.co/_astro/order-details.C7fOqiu8.webp) Check items, order status, and delivery information after checkout. [View full image](https://www.ordering.co/_astro/order-details.C7fOqiu8.webp) See 2 more web views ![Product page with featured items and customer ratings](https://www.ordering.co/media/features/8796903531b56a2d4699aecdcd4333e3c02d98bc9f2032d4971b1dac25a53e43.webp) See ratings alongside featured menu items. [View full image](https://www.ordering.co/media/features/8796903531b56a2d4699aecdcd4333e3c02d98bc9f2032d4971b1dac25a53e43.webp) ![Sign in form with email, phone, and one time code choices](https://www.ordering.co/media/features/b8907306a37cff91af2506f3e368c5a4fc6085aebd21de003c7fe3ef3ba87967.webp) Give returning customers a way to sign in. [View full image](https://www.ordering.co/media/features/b8907306a37cff91af2506f3e368c5a4fc6085aebd21de003c7fe3ef3ba87967.webp) Ordering Widget ## Decide where ordering belongs in your web experience. When an existing website is part of the customer journey, use the project conversation to choose the placement and flow that should lead into ordering. Example entry points; availability depends on your plan. Entry pointA visible action can direct customers toward the selected ordering journey. Guided entryA guided entry can help customers recognize where the ordering flow begins. Embedded journeyAn embedded approach should be planned around the existing page structure and customer task. Before you launch ## Try changes on a staging site before customers see them. A staging version of your ordering website is a separate copy of the live site, used to test changes before they reach customers. Where you use it: Your project setup, alongside the live storefront ### What a staging site is for - A separate test copy Changes to the menu, design, or ordering flow are made on a staging site first, without affecting what customers see on the live site. - Test the full order flow Walk through browsing, checkout, and payment on staging to confirm everything works before it goes live. - Try it with a small group first Share the staging site with a small group of people, so issues surface before every customer sees the change. - Train your team before launch Staff can practice on the staging site before customers start using the real one. ### Why it matters - **Fewer surprises at launch**Bugs and issues get caught on staging instead of in front of customers. - **A team ready on day one**Staff who have already practiced on staging can support customers as soon as the site goes live. [See order and product reports](https://www.ordering.co/features/business-intelligence/) Cart and checkout ## Customers review everything before they pay. Customers browse the menu, pick items, and finish the order from one screen, with a cart they can change until the last step. Where you use it: Ordering Web and customer apps ### One screen to order - Browse, select, and order in one place Customers move through menu categories, add items to the cart, and see the running total without leaving the ordering screen. - An ordering screen in your brand The look and feel of the ordering screen follows your brand, and you adjust it to what your customers need. ### Review before finishing - Edit the cart at checkout On the review step customers add or remove items, change quantities, and apply discounts or coupons. - Confirm payment details Customers review and confirm their payment information before the order is placed, an extra check before they pay. - A short, clear checkout Checkout asks only for what the order needs, with delivery or pickup and payment options customers recognize. - The payment methods you choose Cards, debit cards, PayPal, Stripe, and any third-party payment gateway you connect, from providers available around the world. ### Why it matters - **Fewer order mistakes**A last review of items and payment details catches errors before the order reaches the store. [Explore payment integrations](https://www.ordering.co/integrations/payments/) Search visibility ## Pages and images that search engines understand. SEO settings let you describe your platform, stores, products, and images the way you want them to appear in search results. Where you use it: Dashboard, for Ordering Web ### What you can set - Meta descriptions for pages Write the title and description that search results show for your platform, products, and categories. - Descriptions for images Add a description to each image so search engines understand what it shows. - SEO tools for your website Further SEO settings help your ordering website reach customers searching for what you sell. ### Why it matters - **More customers from search**Clear descriptions help the right customers find and choose your website in search results. Built-in help ## Answers inside the ordering experience. A help section inside your ordering channels gives customers and your team a place to find answers without leaving the site. Where you use it: Ordering Web and customer apps; content edited from the Dashboard ### What the help section includes - FAQs customers can search Customers search frequently asked questions to solve common issues on their own. - Guides and tutorial videos Step-by-step guides and videos show how to order and use your channels. - Contact details When an answer is not there, customers find how to reach your team. - Help for your team Your staff finds guides on features and answers to technical questions in the same place. ### Why it matters - **Fewer repeat questions**Customers resolve common questions themselves, so your team spends less time on them. One infrastructure ## Map the storefront to the work behind an order. Use the planning map to identify the menu, store, fulfillment and system connections that must be reviewed with the selected customer journey. - Web - App - Kiosk - Phone - AI agent ![Ordering.co](https://www.ordering.co/assets/logos/ordering-lockup-color-on-white.svg)![Ordering.co](https://www.ordering.co/assets/logos/ordering-lockup-color-reversed.svg)Selected ordering channels and operations - Merchant App - POS - Drivers - Loyalty & CRM Project decisions ## Agree the implementation path before launch. The project should record the storefront design, content ownership, integrations and technical responsibilities that its chosen ordering journey requires. - Brand expression Clarify the brand assets, pages and content ownership required for the storefront. - Content needs Identify the public information customers need before they reach the menu. - Technical connections Identify which system connections or implementation decisions must be evaluated with technical owners. - Delivery responsibilities Confirm the hosting, implementation and support responsibilities included in your plan. ## Every other way your customers order. - [BuildOrdering AppsExplore the app journey and requirements alongside the web storefront.](https://www.ordering.co/platform/ordering-apps/) - [BuildOrdering KioskExplore the in-store customer journey alongside the web storefront.](https://www.ordering.co/platform/ordering-kiosk/) - [BuildOrdering Call CenterExplore assisted ordering needs for teams that take orders by phone.](https://www.ordering.co/platform/ordering-call-center/) - [NewAI Ordering AgentsExplore conversational ordering alongside the web storefront.](https://www.ordering.co/platform/ai-ordering-agents/) - [BuildRestaurant websiteThe same ordering website for a single restaurant brand instead of a marketplace.](https://www.ordering.co/platform/restaurant-website/) ## Plan your storefront around the operation. Use a demo to review the customer journey and confirm the website, domain, payment, integration and fulfillment scope relevant to your project. Product guide: [Website overview](https://docs.ordering.co/docs/products/website/) [Book a demo](https://www.ordering.co/contact/?meeting=demo#book)[Talk to Ordering.co](https://www.ordering.co/contact/)