Navigating Multi-Store Complexity
As Shopify Plus merchants scale, they often manage a sprawling ecosystem of stores: production and staging environments, regional storefronts for different locales, dedicated wholesale channels, and development sandboxes. Without clear visual differentiation, teams risk making critical changes in the wrong environment.
I designed wayfinding solutions that gave merchants instant clarity about which store they were operating in, reducing costly mistakes and streamlining workflows across their entire multi-store organization.
Role
Lead Product DesignerInvolvement
End-to-end, Research to LaunchTimespan
4 months, Discovery to ReleaseSetting the Scene
Imagine you're a merchant selling gym clothes and exercise equipment under the brand name Titan. You started with a single Shopify store serving Canadian customers.
Store details
EditTitan Canada
titan-canada.myshopify.com
Business is booming. As a Shopify Plus merchant, you're now expanding into new markets: the US, Europe, Australia. Each region needs its own storefront with localized pricing, currency, and fulfillment.
You've hired developers who need sandbox environments to test new features without breaking production. Your ops team wants a staging store to preview holiday campaigns before they go live. And your B2B arm? That's a separate wholesale channel entirely.
What was once a single store is now a network of 20+ Shopify stores you manage daily. Each with their own domain, admin panel, and team members logging in and out.
Store details
EditTitan Canada
titan-canada.myshopify.com
Store details
EditTitan US
titan-us.myshopify.com
Store details
EditTitan EU
titan-eu.myshopify.com
Store details
EditTitan Australia
titan-au.myshopify.com
Store details
EditTitan Staging
titan-staging.myshopify.com
Store details
EditTitan Dev
titan-dev-sandbox.myshopify.com
Store details
EditTitan Wholesale
titan-b2b.myshopify.com
Store details
EditTitan QA
titan-qa-testing.myshopify.com
See the problem?
The Navigation That Wasn't Helping
Tools
Administration
Stores
This was the Shopify Plus navigation at the time. Your stores lived in a flat list at the bottom of the sidebar. Identical icons, no visual hierarchy, no way to distinguish production from staging at a glance.
This wasn't an oversight. It was a consequence of Shopify's origin story. Unlike Amazon, which built top-down to serve big box retailers and massive conglomerates with tens of thousands of SKUs, Shopify focused on the little guy. Mom and pop shops. Vendors with two products and a dream to build something of their own.
Stores were never meant to span regions, operate across countries, or support the kind of development workflows that enterprise teams demand. One merchant, one store, one dream.
But Shopify Plus changed everything. Suddenly you're managing 20+ stores, switching between them dozens of times a day, and every single one looks identical. One wrong click and you're editing prices on your live Canadian store instead of staging. That mistake has real consequences.
Exploration
A Global Perspective
We spoke to 120+ merchants from across the globe. San Diego to Santiago, Amsterdam to Cape Town, and across as many languages, writing directions, and character systems as we could find.
The goal was to gather a truly multi-national, multi-cultural dataset. How do merchants in Japan think about store organization? What mental models do German teams use? How do right-to-left languages change the way people scan a navigation?
From this research stemmed a series of experiments in wayfinding. One early direction: let merchants customize how their stores appear in the navigation. Give them control over abbreviations, emojis, even custom images to create instant visual differentiation.
Customize
Rename the store label, assign an abbreviation, choose an emoji, or change the background color to customize the way your store appears for you. This will not be visible to your customers.
Name
Store name
Customize Appearance
Emoji
The emoji picker was particularly interesting. Flags became an intuitive way to represent regional stores. A Canadian flag for Titan Canada, a US flag for Titan US. No reading required, just instant recognition.
But emoji proved problematic in ways we hadn't anticipated.
First, the practical constraints. Emoji didn't fit Shopify Plus's carefully constrained color palette. For accessibility reasons, the platform relied on specific color combinations that ensured sufficient contrast and readability. Emoji, with their fixed, vibrant colors, clashed with these standards and couldn't be adjusted to meet WCAG guidelines.
More fundamentally, emoji carried cultural baggage that varied dramatically across regions. A clapping hands emoji ๐ might signal applause in the US and much of Europe, but in China it's commonly understood to represent something far more intimate. The thumbs up ๐ that Americans use casually can be deeply offensive in parts of the Middle East. What seems like a universal visual language is anything but.
Flags presented their own minefield. National representation is never neutral. It privileges some identities while erasing others. Which flag represents a merchant serving the Kurdish diaspora? What about regions with contested sovereignty, or communities whose identities have been systematically suppressed? Flags flattened complicated ethnoracial identities into neat national boxes that many of our merchants didn't fit into.
The emoji experiment taught us something important: simplicity that ignores complexity isn't simplicity at all. It's exclusion wearing a friendly face.
The Power of Three Letters
We kept circling back to one option that initially seemed too boring to be the answer: simple letter abbreviations.
Two to three letters. No colors. No cultural symbolism. Just text.
What abbreviations lacked in visual flair, they made up for in practicality. They were scannable at a glance, worked in any color palette, and carried no hidden cultural meanings. "TC" for Titan Canada. "TS" for Titan Staging. "TX" for Titan Experimental.
More importantly, abbreviations were shared. Unlike personal emoji choices that might differ between team members, abbreviations were synchronized across all admin users on a store. When Sarah in Toronto and Priya in London both saw "TS", they knew they were looking at staging. No ambiguity. No miscommunication.
Yet there was still room for differentiation. Merchants could craft their own conventions, using numbers for sandbox environments, letters for regions, or any system that matched their mental model. The constraint of three characters became a creative canvas rather than a limitation.
Stores
The navigation transformed from a wall of identical icons into a scannable list where each store had its own identity. Production environments stood apart from staging. Regional stores were instantly distinguishable. The cognitive load of context-switching dropped dramatically.
The Rules Behind the Letters
Of course, "just use letters" sounds simple until you try to systematize it across tens of thousands of merchants with stores named everything from "Bob's Bikes" to "ใฏใฉใทใซใปใฌใฏใๅ ฌๅผ้่ฒฉ".
We developed a rule system that automatically generated sensible abbreviations while remaining predictable and consistent. The system accepted A-Z, numbers, and accented characters, covering Latin scripts and their variations.
Accepted characters
A through Z, as well as numbers. Both lowercase and uppercase are accepted. This includes accented letters.
Can be reduced to the following Regular Expression.
[z0-9-a-zA-Z\u00C0-\u024F\u1E00-\u1EFF]+
Names using only accepted characters
1 Word Only
- Take the first three characters of the store name.
2 Words
- Take the first character of the first word.
- Take the first two characters of the second word.
3 Words (or more)
- Take the first character of the first word.
- Take the first character of the second-to-last word.
- Take the first character of the last word.
Combination of accepted and not-accepted characters
Create an abbreviation out of the allowed characters, following the rules outlined above.
Names without accepted characters
Abbreviation is replaced by a Store Icon.
The rules were designed to extract meaningful abbreviations from store names of varying lengths. Single-word names took the first three characters. Two-word names combined the first letter of the first word with the first two letters of the second. For three or more words, we took the initials of the first, second-to-last, and last words, capturing both the brand identity and the store variant.
For merchants operating in mixed-language environments, like Japanese stores with romanized brand names, the system intelligently extracted Latin characters while gracefully handling the rest. And for stores named entirely in non-Latin scripts? We fell back to a simple store icon, acknowledging that forced transliteration would only create confusion.
This rule system was later expanded to support additional character sets under slightly more restrictive guidelines. Cyrillic and Greek alphabets were added, along with select characters from other scripts that maintained clear visual distinction at small sizes. The goal was always the same: provide enough flexibility to feel personal, with enough constraint to remain scannable.
Live in Shopify Plus Today
This three-letter abbreviation system is the configuration that shipped, and it's still accessible in Shopify Plus today. Every merchant with multiple stores can customize their internal store name and identifier through the store settings.
Store name
ChangeGymshark Finland
The store name displays on your website, customer notifications and marketing emails.
Internal store name and identifier
ChangeThe internal store name and identifier are based on the store name by default.
Gymshark Finland
The internal store name and identifier display in the admin only. They help your staff and partners identify stores and navigate the admin.
The "Internal store name and identifier" setting lives right below the customer-facing store name. It's a small distinction with significant implications: merchants can keep their public branding clean ("Gymshark Finland") while their admin teams navigate using whatever shorthand makes sense internally.
What started as a research question about wayfinding became a foundational piece of the Shopify Plus experience. A quiet improvement that thousands of merchants use every day without ever thinking about it. That's the goal of good design work: to solve problems so thoroughly that they stop feeling like problems at all.
Measuring Success
How do you measure whether people are clicking on the right store?
This question haunted us through the entire project. Traditional metrics didn't quite fit. We couldn't track "accidental clicks" directly. There's no way to know someone's intent when they navigate to a store. Task completion rates were too coarse. User satisfaction surveys felt too subjective and lagging.
We went in circles for weeks, building increasingly complex instrumentation proposals, before taking a step back and realizing the answer had been in front of us all along.
Bounce rate.
Specifically: how frequently were users navigating to a store URL or tab, then navigating away again within a few seconds? A quick bounce strongly suggested they had landed on the wrong store, realized their mistake, and corrected course.
Before the rollout, this bounce rate sat at 21%. One in five store navigations was immediately abandoned. For merchants managing dozens of stores with dozens of team members, that's thousands of wasted clicks every month. Thousands of moments of confusion. Thousands of opportunities for someone to accidentally make changes to the wrong environment.
Six months after launching the three-letter abbreviation system, that bounce rate had dropped to under 4%.
A reduction of over 80%. Not through forcing new behaviors or adding friction, but by making the right choice easier to see at a glance. The abbreviations worked exactly as intended, creating just enough visual differentiation that merchants could trust their navigation without second-guessing.
Reduction in Store Navigation Bounce Rate
Within 6 months of rollout