Skip to main content

Upload Center Plan & Assign Shops

Overview​

This guide shows you how to upload a center plan and assign shops as a Content Creator.

Prerequisite

You have received an SVG file from the designer — or a PNG/JPEG (hybrid / AI plan).
Without vector: Hybrid Center Plan · Generate with AI: AI Master Prompt (DE/EN) · Illustrator: Illustrator Guide.

Step-by-Step Instructions​

Step 1: Open Dashboard​

  1. Open the cockpitOS Dashboard
  2. Log in
  3. Select your Center (top right)

Step 2: Upload SVG​

  1. Go to Center Plans in the main menu
  2. Click on Create SVG Map
  3. Select the SVG file from the designer
  4. Click Upload
What happens?

The system analyzes the SVG file and automatically detects:

  • Shop areas (everything with shop- in the name)
  • Service elements (everything with service- in the name)
  • Floors (if available)

Step 3: Create Floor​

After uploading:

  1. Give the floor a name:
  • e.g. "Ground Floor" or "1st Floor"
  1. Select the floor number:
  • 0 = Ground Floor
  • 1 = 1st Floor
  • -1 = 1st Basement
  1. Set as default floor (optional)
  • If this is the main floor
  1. Click Save

Step 4: Assign Shops​

Now you will assign the shops to the areas on the map:

  1. Go to Center Plans → Mapping
  2. Select your Center
  3. Select the Floor
  4. You will now see:
  • Left: List of unassigned shops/services (optionally collapsible)
  • Right: SVG Map – click on an area to assign a shop

How to assign shops:​

  1. Click on an area in the SVG map (right) where the shop should be placed
  2. A modal opens with the list of unassigned shops/services
  3. Select the shop from the list (optional search)
  4. The shop will be placed at the clicked position and automatically saved

Step 5: Check Preview​

  1. Click on Preview
  2. You will see the map as it will look on the website
  3. Test:
  • Hover over shops → Does the tooltip appear?
  • Click on shop → Does the redirect work?

Step 6: Perform Sync​

For the map to appear on the WordPress website:

  1. Go to WordPress Admin
  2. Click on cockpitOS → Sync
  3. Click on Start Full Sync
  4. Wait for the sync to complete
What gets synced?
  • SVG file is saved locally
  • Shop assignments are transferred
  • All shop data (name, category, opening hours, etc.)

Step 7: Embed on Website​

  1. Open WordPress and go to Elementor
  2. Edit the page where the map should appear
  3. Add the cockpitOS Center Plan Widget
  4. Settings:
  • Map Type: Interactive SVG
  • Center: Select your center
  • Floor: Select the floor
  1. Click on Update

Checklist​

Before you finish, check:

  • SVG file uploaded
  • Floor created
  • All shops assigned
  • Preview tested
  • Sync performed
  • Widget embedded on website
  • Website preview tested

Multiple Floors​

If your center has multiple floors:

  1. Repeat Steps 2-4 for each floor
  2. Upload a separate SVG file for each floor
  3. Assign shops per floor
  4. Visitors can switch between floors on the website

Tips & Tricks​

Tip 1: Shops missing from the list?​

Make sure the shops are created in the dashboard:

  • Go to Shops → All Shops
  • Check if the shop exists
  • If not: Create it first

Tip 2: Shop area not detected?​

Check in the SVG file:

  • Does the area have a name beginning with shop-?
  • Is the area on the correct layer?
  • Contact the designer if necessary

Tip 3: Zooming the map & clicking small areas​

  • Use Zoom Buttons (top right) to enlarge/reduce
  • "Hide Names": Helpful for small shop areas – hides text labels so you can click the area itself

Tip 4: Changes not visible?​

After changes always:

  1. Save in the dashboard
  2. Perform sync to WordPress
  3. Clear browser cache (Ctrl+F5)

Frequently Asked Questions​

Can I reassign shops later?​

Yes! Go back to Center Plans → Mapping, click on the shop's pin, confirm the removal. Then click on the new position and select the shop again from the modal.

What happens if I delete a shop?​

The assignment on the map remains but the shop will no longer be displayed. You should manually remove the assignment.

Can I have multiple shops on one area?​

No, each area can only be assigned to one shop. If a shop has multiple areas, create multiple areas in the SVG.

How do I change the colors of the map?​

The colors are set in the SVG file. Contact the designer for changes.

Preparing AR Navigation (Beta)​

Optional: For centers that wish to use AR navigation in the NOW! app:

  1. Create shopfront photos: Photograph the shopfronts in the center (straight, well-lit, without passersby)
  2. Upload in the dashboard: Center Plans > Floor > Routes > Select Waypoint > Expand "AR Navigation (Beta)" > Enter shopfront image URL
  3. Maintain AR fields (optional): Enter facing direction, aisle direction, distance, and landmarks for each waypoint -- this information improves AR accuracy
  4. Compile AR markers: Click the "AR Marker" button in the routes toolbar -- the system compiles all shopfront images into a .mind file
  5. Configure .mind file: Upload the generated file and enter the URL in the center options

Details on the technique can be found under SVG Routes > AR Markers and in the Premium AI Template.

Next Steps​

After setup:

  1. Test the map on the website
  2. Collect feedback from colleagues
  3. Optimize if necessary
  4. Document special settings

Need Help?​

If you have questions:

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /en/centerplan/content-creator-workflow