Storefront Overview
Your storefront is what customers see when they visit your Ordery URL. This guide explains the customer experience from landing on your home page to browsing the menu and adding items to their cart.
Storefront Home Page
The home page is the first impression customers get of your online store.
What customers see:
- Hero image — Large banner at the top (configured in Branding settings)
- Store name — Your business name in the header
- Open/closed status — Live messaging showing if you're accepting orders
- Slogan and marketing copy — Welcome message and business description
- Fulfilment options — Buttons to switch between delivery, pickup, or table service
- Promo banners — Rotating discount offers (Pro plan only)
- "View Menu" button — Call-to-action to start browsing
How it affects customers: The home page sets expectations and encourages customers to explore your menu.
💡 Tip: Update your hero image and marketing copy seasonally to keep the storefront fresh.
Open and Closed Messaging
Customers see real-time status based on your opening hours.
When You're Open
What customers see:
- "Open" badge or message
- "Start your order" or "View Menu" button is active
- Estimated prep times displayed
How it works: Ordery checks the current day and time against your opening hours and updates the status live.
When You're Closed
What customers see:
- "Closed" message
- Next opening time (e.g., "We'll be open again at 12:00 tomorrow")
- Menu is visible but checkout is disabled (unless pre-orders are enabled)
How it works: If pre-orders are disabled, customers cannot check out. If pre-orders are enabled, they see: "We're closed now, but you can pre-order for later."
💡 Tip: Keep your opening hours accurate so customers aren't disappointed by unexpected closures.
Suspension Messaging
If your Ordery subscription payment fails, customers see a suspension message.
What customers see:
- "Temporarily Unavailable" message
- Suggestion to check back later or contact you directly
How it affects customers: Checkout is completely disabled until billing is resolved.
⚠️ Warning: Keep your payment method up to date to avoid unexpected downtime. Learn more →
Menu Browsing
The menu page is where customers explore your offerings and build their order.
Menu Layout
What customers see:
- Category navigation — Jump links to different menu sections (Starters, Mains, Drinks, etc.)
- Active category highlight — The current category is highlighted as they scroll
- Item cards — Each item shows name, description, price, and image (if uploaded)
- Dietary tags — Icons for vegetarian, vegan, gluten-free, etc.
- Sticky cart — Cart widget stays visible as they scroll
Category Jump Links
Customers can click a category name to jump directly to that section.
How it works: Ordery uses smooth scrolling and highlights the active category as customers browse.
How it helps: Makes navigation fast, especially on large menus.
Intersection Observer
Ordery tracks which category is currently visible on screen.
What this does:
- Automatically highlights the active category in the navigation
- Provides visual feedback as customers scroll
- No manual clicking needed
ℹ️ Note: This is a technical feature that improves user experience. It works automatically.
Item Details
Customers can click an item to see more information.
What's displayed:
- Item name and description
- Price
- Image (if uploaded)
- Allergen information
- Dietary tags (vegetarian, vegan, etc.)
- Nutritional info (if provided)
- Allergen and dietary information
How customers interact:
- Click "Add to Cart" to add the item
- Choose quantity (if supported)
- Return to the menu or proceed to checkout
💡 Tip: High-quality images and clear descriptions help customers make confident choices.
Cart Experience
The cart tracks items, quantities, and totals.
Sticky Cart Widget
The cart stays visible as customers scroll, showing:
- Number of items
- Current total
- "View Cart" or "Checkout" button
How it helps: Customers always know what's in their cart and can proceed to checkout anytime.
Cart Breakdown
When customers open the cart, they see:
- Item names, quantities, and prices
- Subtotal
- Delivery fee (if applicable)
- Minimum order warning (if not met)
- "Checkout" button
Minimum Order Notices
If the cart doesn't meet the minimum order amount, customers see:
Example: "Add £5 more to place your order."
The checkout button is disabled until the minimum is reached.
Fulfilment Switching
Customers can toggle between delivery, pickup, and table service.
How It Works
Buttons at the top of the menu:
- Delivery
- Pickup
- Table Service (if enabled)
What happens when customers switch:
- The menu updates to show only items available for that fulfilment type
- Ordery remembers their choice for future visits
- Unavailable items are hidden or greyed out
How it affects customers: Customers only see items they can actually order, reducing confusion.
💡 Tip: Enable most items for all fulfilment types to maximise choice.
Table Number Memory
For table service orders, Ordery remembers the customer's table.
How it works:
- Customer scans QR code at their table
- Table number is stored in a cookie
- If they order again during the same visit, the table is pre-filled
- No need to rescan the QR code
How it helps: Customers can order multiple rounds (drinks, then food, then dessert) without rescanning.
Toast Notifications
Ordery displays toast messages (small pop-ups) for feedback.
Examples:
- "Item added to cart"
- "Discount code applied"
- "Address is outside delivery area"
How it helps: Provides instant visual confirmation that actions succeeded or failed.
Best Practices
Keep Your Menu Organised
- Use clear category names
- Order categories logically (starters before mains, food before drinks)
- Limit categories to 5–10 for easy navigation
Use High-Quality Images
- Upload images for your bestsellers
- Consistent lighting and style
- Show the actual dish, not stock photos
Write Clear Descriptions
- 10–20 words per item
- Highlight key ingredients and flavours
- Mention dietary or allergen info
Update Open/Closed Status
- Keep opening hours accurate
- Inform customers of closures on social media
- Enable pre-orders if you want to capture off-hours demand
Test the Customer Experience
- Browse your own storefront regularly
- Place test orders to see the checkout flow
- Ask friends or family for feedback
Common Questions
Q: Can I customise the layout or design of my storefront? Branding (logo, colours, hero image) is customisable in Settings → Branding. The layout is fixed for consistency.
Q: Can customers filter the menu by dietary preferences? Dietary filtering is not currently available. Customers can see dietary tags on each item but cannot filter the menu to show only specific diets.
Q: Can customers search for specific items? Menu search is not currently available. Customers use category navigation to browse your menu.
Q: What if a customer lands on my storefront when I'm closed? They see a "Closed" message with your next opening time. They can browse the menu but can't checkout (unless pre-orders are on).
Q: Can I hide the menu when closed? Not currently. The menu remains visible, but checkout is disabled. This lets customers browse and plan future orders.
Q: How do I promote items on my storefront? Use high-quality images, feature them at the top of a category, or create a "Specials" category. (Pro plan: Use promo banners for discounts.)
What's Next?
With the storefront understood, explore:
- Checkout & Order Tracking — Customer checkout flow
- Branding — Customise your storefront appearance
- Managing Your Menu — Update items and categories