Leader App (Shopify Plus, B2B)
1. Introduction
I’d like to share a project I have built called “LeaderApp”, B2B lead management app for Shopify, aimed at Shopify plus stores like Gutter Guard Direct that work with installers and need to capture, assign, and track leads from submission to close.
The app was designed from a product brief that spelled out two main sides:
”admin dashboard” for store owner and “customer view” for B2B partners (installers) who receive and work on leads.
2. Chapter 1 - Project overview, Goals and Tech stacks
The goal of the app is to let B2B customers (and eventually new partners) receive “leads” submitted through a store form.
Those leads are stored as records and can be assigned manually and automatically using location and proximity.
The leads are generated from customers who visit storefront and include detail lead information (customer name, addresses, phone numbers, product informations and notes, etc).
Admin Dashboard - The shopify store owner see all leads in lists, open a detailed “lead view”, and take actions such as assigning leads to B2B installers or edit email templates.
Customer View - Where each B2B installers only see leads assigned to them.
This is delievered via Customer Account UI Extension and reuses list and detail views, but filtered to customer.
Lead Generate Form - Where customers who visit storefront generate lead via theme extension to include lead detail information
Tech Stacks
Frontend : React Polaris
Backend : Node.js
Database: Supabase
Hosting : Cloudflare
Customer Account UI Extension
Theme Extension
Google Map Javascript api
Google Map AutoComplete api
Resend Api
Twilio Api
3. Chapter 2 - Admin Dashboard
Admin Dashboard has 3 pages: Leads, Email Template and Installer Sync pages.
Chapter 2.1 - Leads Page
Leads page has Lead list and Lead detail sections
Chapter 2.1.1 - Leads List Section
In Lead list section, store admin can assign/unassign lead to installers.
Each installers have service radius and isService metafields, when admin assign lead to them, they can confirm assign lead on their leads page(Customer Account UI Extension).
**
Chapter 2.1.2 - Leads Detail Section**
In Lead detail section, admin can see detail lead information and also can assign/unassign lead to installers or can see assigned installer information.
Also, admin can see lead status update history in history component.
History component is updated automatically when event related to history happens
Chapter 2.2 Email Template Page
This app’s important feature is sending email notification when lead events happens(Assigned, Unassigned, Accepted, Customer Contracted and Won, etc).
Also, when installers dont update lead status, app is sending automated reminder email to installers.
Store owner can edit email template in this page including html content, logos and footer
Chapter 2.3 Installer Sync
This page is built for sync when store owners update installer’s information
4. Chapter 3 - Customer View (Customer Account UI Extension)
Customer View on storefront has 2 pages : Lead List Page and Lead Detail Page
Chapter 3.1 Lead List Page
B2B installers can confirm leads that assigned to them and they can update lead status.
And B2B installers can add/edit company locations via modal component
Chapter 3.2 Lead Detail Page
In Lead detail page, B2B installers can confirm lead information and can also update lead status
5. Lead Generation Form (Theme Extension)
Customers who visit store can submit lead via this form
Conclusion
Leader app is built to match this brief step by step: from the lead generation form, through the B2B installer’s customer account UI extension and the admin dashboard, to extra pages (installers sync, email templates) and email notification and geolocation.
If you are working on similar - lead management, B2B flows, or Shopify apps - I would be glad to hear from you.
Feel free to leave a comment or reach out.
Best regards!
