Use the Floor Plan Designer to create a visual map of your store layout, place racks and fixtures, assign product categories to zones, and manage layout versions for seasonal changes. The designer is powered by a drag-and-drop canvas that makes it easy to build an accurate representation of your sales floor.
Overview
The Floor Plan module has three main pages:
Page | Purpose | Route |
Designer | Visual drag-and-drop canvas for placing racks and editing the floor plan |
|
Layouts | Create, compare, and activate different category assignment configurations |
|
Rack Types | Reference guide showing all available rack shapes, sizes, and zone counts |
|
The Designer Interface
The designer is a full-featured visual editor built on the SyncFusion Diagram component. It fills your browser window and includes several key areas.
Header Bar
The header bar at the top shows the floor plan name and provides quick access to:
Save -- Save diagram changes
Fullscreen -- Toggle fullscreen mode for maximum canvas space (press
Escor click the button again to exit)Navigation links to Layouts, Rack Types, and Reports
Canvas Area
The main canvas is where you build your floor plan. Key interactions:
Action | How |
Pan | Click and drag on empty space or hold space bar |
Zoom | Scroll wheel or pinch gesture |
Select rack | Click on a rack |
Move rack | Drag a selected rack to reposition |
Multi-select | Hold Shift and click multiple racks |
Toolbar
The toolbar provides tools for:
Adding new racks from the rack type palette
Searching for racks by name
Uploading a background image (e.g., a store blueprint)
Exporting the floor plan as PNG or JSON
Syncing diagram positions to the database
Sidebar Panel
When you select a rack on the canvas, the sidebar shows:
Rack name and type
Zone/socket details
Category assignments for the current layout
Edit and delete options
Creating Your First Floor Plan
Step 1: Open the Designer
Navigate to Admin > Floor Plan or go directly to /admin/:typeNum/floor-plan.
If no floor plan exists yet, the designer will prompt you to create one.
Step 2: Add Racks
Open the rack palette from the toolbar
Select a rack type (see Rack Types Reference below)
The rack appears on the canvas -- drag it to the correct position
Double-click the rack to rename it (e.g., "Wall Rack A", "Center Island 1")
Step 3: Position Your Layout
Drag racks to match your physical store layout
Use the grid snapping to align racks neatly
Upload a background image of your store blueprint for reference positioning
Step 4: Save
Click Save in the toolbar to persist all rack positions. After saving, use Sync to ensure all rack positions are written to the database for use in reports and heatmaps.
Tip: Use the fullscreen mode when working on detailed layouts. The extra screen space makes positioning much easier.
Draft Workflow
The designer supports a draft workflow so you can make changes without affecting the live floor plan:
Create Draft -- Start editing from the current published state
Make Changes -- Add, move, or remove racks
Preview -- Review your changes before publishing
Publish -- Apply the draft as the new current state
Discard -- Throw away draft changes and revert
Rack Types Reference
Access the Rack Types the link in the designer header.
Rack types are organized by category and each type specifies:
Property | Description |
Name | The rack type name (e.g., "4-Way Rack", "Wall Section") |
Shape | Rectangle, circle, or cross |
Default Size | Width x Height dimensions |
Zones | Number of zones/sockets where categories can be assigned |
Description | What this rack type represents physically |
Each rack type card shows a shape preview so you can visually identify the type at a glance.
Tip: The number of zones determines how many different product categories can be assigned to that rack. A "4-Way Rack" with 4 zones can hold 4 different category assignments.
Layout Management
Layouts define which product categories go where on your floor plan. Navigate to Layouts (/admin/:typeNum/floor-plan/layouts) to manage them.
Layout Types
Type | Purpose |
Current | The active layout representing what is actually on your sales floor right now |
Wanted | A planned layout for future changes (e.g., seasonal resets, event layouts) |
Layout Statuses
Status | Color | Meaning |
Draft | Gray | Being prepared, not yet active |
Active | Green | Currently in use |
Scheduled | Amber | Set to activate on a future date |
Archived | Light Gray | Previously active, now historical |
Creating a Layout
Click
Create LayoutEnter a Name (e.g., "Holiday Season 2025")
Select Type: Wanted (for planning) or Current
Optionally Copy Assignments From an existing layout to start with the same category placements
Optionally Link to Event to auto-schedule activation with an event start date
Add an optional Description
Click
Create Layout
Comparing Layouts (Diff)
For Wanted layouts, click Diff to compare it against the current layout:
Additions (green): Categories placed in the wanted layout that are not in the current layout
Removals (red): Categories in the current layout that are removed in the wanted layout
Dropped Categories (amber): Categories that exist in the current layout but have no placement in the wanted layout
Generating Move Tasks
After reviewing a diff, click Generate Tasks to create actionable move tasks:
For dropped categories, choose whether to Send to Backstock or mark as Gone (No Task)
Click
Generate TasksTasks are created for each addition and removal
Viewing and Completing Tasks
Click Tasks on any Wanted layout to see all generated move tasks:
Each task shows a description, category, and status
Click
Completeto mark a task as doneFor backstock tasks, you can optionally enter a bin number
The pending count badge shows how many tasks remain
Activating a Layout
Find a Draft layout on the Layouts page
Click
ActivateConfirm the activation -- the previous layout will be archived automatically
Warning: Activating a layout replaces the current active layout. Make sure all move tasks are completed first.
Using Background Images
You can upload a photo or blueprint of your store to use as a reference layer behind your racks. This makes it easy to position racks exactly where they belong in the real world.
Uploading a Background
Click Background Image in the header bar
Click Choose File and select an image (PNG, JPG, or WebP -- max 5MB)
A preview of the image appears in the modal
Adjust the Opacity slider to control how visible the background is behind your racks (lower values make it more subtle)
Click Save
The image will fill the canvas behind all your racks and fixtures.
Adjusting Opacity
Open the Background Image modal at any time to change the opacity slider. A lower opacity (10-30%) works well so racks remain easy to see, while a higher opacity is helpful when you are first positioning racks and need to clearly see the reference image.
Removing a Background
Click Background Image in the header bar
Click the red Remove button
Confirm the removal
Tip: Upload a photo of your actual store or an architectural blueprint, then lower the opacity to around 20%. This gives you a faint reference layer to position racks accurately without the image being distracting.
Exporting Your Floor Plan
Two export options are available from the designer toolbar:
Format | Use Case |
PNG | Visual image for printing or sharing |
JSON | Data backup or transfer to another store |
Troubleshooting
Racks are not showing on the canvas
Ensure the floor plan has been saved and synced. Click
Syncin the toolbar.Try refreshing the page. Large floor plans may take a moment to render