GoSovereign/Docs

Guided Tour

Learn about the admin guided tour feature that helps new users understand their admin dashboard.

Overview

The guided tour is an interactive onboarding experience that automatically starts when administrators first log into their admin dashboard. It walks users through all the key features and navigation elements.

Available in: All templates (Products, Services, Brochure)

How It Works

First Login

When you log in to your admin dashboard for the first time:

  1. A welcome message appears after the page loads
  2. The tour automatically guides you through each navigation item
  3. Each step highlights a feature with a description
  4. Use Next / Back buttons to navigate
  5. Click Finish or close at any time

Tour Progress

The tour shows:

  • Current step number (e.g., "3 of 14")
  • Step title and description
  • Navigation buttons

Completion

After finishing the tour:

  • Your completion is saved in localStorage
  • The tour won't auto-start again
  • You can retake it anytime (see below)

Retaking the Tour

Click the Help button (question mark icon) in the admin navigation to restart the guided tour at any time.

Desktop: In the top navigation bar

Mobile: In the hamburger menu dropdown

Tour Steps

Products Template (Hosted)

The tour covers:

  1. Welcome - Introduction
  2. Dashboard - Key metrics overview
  3. Products - Catalog management
  4. Collections - Product organization
  5. Coupons - Discount codes
  6. Gift Cards - Gift card management
  7. Orders - Order processing
  8. Abandoned Carts - Cart recovery
  9. Reviews - Customer feedback
  10. Analytics - Revenue insights (Pro)
  11. Settings - Store configuration
  12. View Store - Live preview
  13. Tour Button - How to restart
  14. Complete - Summary

Services Template

The tour covers:

  1. Welcome - Introduction
  2. Dashboard - Service metrics
  3. Services - Service offerings
  4. Portfolio - Work showcase (if enabled)
  5. Menu - Menu builder (if enabled)
  6. Booking - Appointment system (if enabled)
  7. Inquiries - Contact submissions
  8. FAQ - FAQ management
  9. Settings - Business configuration
  10. View Site - Live preview
  11. Tour Button - How to restart
  12. Complete - Summary

Note: Steps 4-6 only appear if those features are enabled for your business type.

Brochure Template

The tour covers:

  1. Welcome - Introduction
  2. Dashboard - Overview stats
  3. Portfolio - Project showcase
  4. Messages - Contact submissions
  5. Settings - Site configuration
  6. View Site - Live preview
  7. Tour Button - How to restart
  8. Complete - Summary

Technical Details

Library

The guided tour uses Driver.js, a lightweight (5kb) JavaScript library that:

  • Works across all modern browsers
  • Supports keyboard navigation
  • Is fully accessible
  • Has smooth animations

Storage

Tour completion status is stored in browser localStorage under the key admin_tour_completed. Clearing browser data will reset this.

Customization

For developers who want to customize the tour:

Tour Steps: lib/tour-config.ts

  • Modify step content
  • Change step order
  • Add/remove steps

Styling: app/globals.css

  • Look for "Guided Tour Styles" section
  • Customize colors, spacing, fonts
  • Modify animations

Behavior: hooks/useTour.ts

  • Adjust auto-start delay
  • Modify completion logic
  • Add callbacks

Troubleshooting

Tour Doesn't Start

  1. Check if you've already completed the tour
  2. Clear localStorage (admin_tour_completed key)
  3. Or use the Help button to restart manually

Tour Skips Steps

Steps require their target elements to exist:

  • Dashboard must fully load
  • Feature-gated items only appear when enabled
  • Use Help button to restart after navigation

Styling Issues

If the tour popover looks wrong:

  1. Check for CSS conflicts
  2. Verify driver.js/dist/driver.css is imported
  3. Review custom styles in globals.css

Added: January 15, 2026 (v9.46)

Need help? Contact info@gosovereign.io