Most orthopedic and recovery stores have the same navigation problem. The catalogue is organised the way the warehouse thinks about it, by product type, and the shopper arrives thinking about a body part. Braces, Supports, Compression, Sleeves: four menu items, and the person with a sore knee has to open three of them to find out which one has knee products.

A body map skips that translation step. Click the knee, land on knee products. Below is the whole setup, including the parts that take longer than the docs suggest.

Try the body-area collection demo before installing. The example uses grouped areas: a leg selection opens knee and leg supports. Shopify Free includes 23 grouped areas with a watermark. Pro is $9/month or $90/year in USD, removes the watermark and adds 158 detailed zones.

Before you start

You need two things, and only one of them is technical.

The technical one: a Shopify store on the Online Store channel, with a theme that supports app blocks. Every Online Store 2.0 theme does, which means Dawn and every theme built in the last few years.

The other one: a decision about what each body area should open. This is the part teams underestimate. If a knee click lands on a collection with two products in it, the body map makes your store look thin rather than smart. Sort the mapping out first.

Step 1: Install the app

Install PersoScan from the Shopify App Store. Shopify handles the permissions and the billing, so there is no license key to generate and nothing to paste into your theme.

Why the app path and not the iframe

You can embed the widget as a raw iframe on Shopify. Do not, unless you have a specific reason. The app loads the widget through the Shopify app proxy, keeps the navigation mappings in your Shopify admin, and keeps setup inside Shopify. Check the app block after changing your theme.

Step 2: Place the block

Open the theme editor, pick the section where you want the body map, and add the PersoScan app block.

Where it goes matters more than it sounds. Placements that work:

Homepage, below the hero. Good when body-area shopping is the main way people browse your catalogue. It is the most visible option and the easiest to measure.
Inside a collection page. Good when you have one broad collection, like Supports, and you want a way to narrow it without a filter sidebar.
A dedicated page, linked from the main menu as “Shop by body area”. Our preference for stores that also sell things unrelated to the body. It keeps the homepage clean and gives you a URL you can send traffic to.

The block exposes height, theme, language, body model, colours, auto-rotate and camera behaviour. Set the height deliberately. Too short and the model gets cropped on phones, which is where most of your traffic is.

Step 3: Build the zone map in a spreadsheet

Two columns. Body zone on the left, destination on the right. Fill it in before you open the app admin, because doing this inside a UI encourages you to stop thinking after the obvious ten.

Grouped mode gives you 23 broad regions, which is the right place to start. The keys look like this:

Zone	Typical destination
`lower-back`	Lower back supports collection
`upper-back`	Posture and upper back collection
`neck`	Neck supports and pillows
`left-shoulder`, `right-shoulder`	Shoulder supports collection
`left-leg`, `right-leg`	Knee and leg supports collection
`left-foot`, `right-foot`	Insoles and foot supports
`left-hand`, `right-hand`	Wrist and hand supports

Left and right are separate zones. Unless you genuinely stock side-specific products, point both sides at the same collection. Nobody wants a left-shoulder collection and a right-shoulder collection with identical products in them.

Every zone a shopper can click needs a destination that has products in it. A zone pointing at an empty collection reads as a broken store, not a thin catalogue. If you have nothing for the head, send head clicks to your closest relevant collection or leave the zone unmapped.

Step 4: Decide grouped or detailed

Grouped mode has 23 regions. Detailed mode has 158, down to individual tendon and joint areas.

Detailed is tempting and usually wrong at the start. It only helps if your catalogue is specific enough to reward the precision. A physiotherapy equipment supplier with separate products for the medial and lateral knee gets real value from it. A store with one knee sleeve does not, and the extra zones just give shoppers more ways to land in the same place.

Start grouped. Move to detailed when you can name the products that need the extra resolution.

Step 5: Test it like a shopper, on a phone

Open the storefront on an actual phone, not a resized browser window. Then click through every mapped zone.

Check that the destination collection has products in it. Check that the page you land on reads as an answer to “I clicked my knee”. Then check the model itself: does it rotate, are the labels readable, and does it push your add-to-cart button below the fold.

Keep ordinary menu links available alongside the model.

Step 6: Instrument it

The Shopify app path gives you Shopify’s own analytics on the destination collections, which is enough to answer the first question you will have: which body areas do people actually click.

Collection visits alone do not identify which navigation element sent the shopper. Compare body-area clicks, destination visits and product views using consented store analytics. Treat install clicks as intent, not completed installs or sales. We have no merchant results establishing a conversion uplift.

What this does not fix

A body map routes intent. It does not create demand, and it does not rescue a catalogue where the collections themselves are wrong. If your knee collection is a jumble of sleeves, braces, tape and cold packs with no further structure, the body map delivers people to a jumble faster.

Fix the collections first. Then give people a body to click.

Doing this on WooCommerce, BigCommerce, Wix or a custom storefront instead? The mapping logic is identical, the embed is an iframe plus one event listener. See adding a body map to any website.