โ† Go Back

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 Designer

Involvement

End-to-end, Research to Launch

Timespan

4 months, Discovery to Release

Setting 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

Edit

Titan 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

Edit

Titan Canada

titan-canada.myshopify.com

Store details

Edit

Titan US

titan-us.myshopify.com

Store details

Edit

Titan EU

titan-eu.myshopify.com

Store details

Edit

Titan Australia

titan-au.myshopify.com

Store details

Edit

Titan Staging

titan-staging.myshopify.com

Store details

Edit

Titan Dev

titan-dev-sandbox.myshopify.com

Store details

Edit

Titan Wholesale

titan-b2b.myshopify.com

Store details

Edit

Titan QA

titan-qa-testing.myshopify.com

See the problem?

The Navigation That Wasn't Helping

Plus overview
Orders
Products
Customers
Analytics

Tools

Flow
Customer service

Administration

Apps
Staff
Stores
Billing

Stores

Titan Canada
Titan US
Titan EU
Titan Australia
Titan Staging
Titan Dev
Titan Wholesale
Titan QA
Titan Japan

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.

๐Ÿ‡จ๐Ÿ‡ฆTitan Canada

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

TCTitan Canada
TUTitan US
TETitan EU
TATitan Australia
TJTitan Japan
TBTitan B2B
TSTitan Staging
TDTitan Dev
TQTitan QA
T1Titan Sandbox 1
T2Titan Sandbox 2
TXTitan Experimental

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.
BรธrBรธrns

2 Words

  • Take the first character of the first word.
  • Take the first two characters of the second word.
รœWiรœllo Wine

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.
TBFTitan Extreme (Belgium - French)

Combination of accepted and not-accepted characters

Create an abbreviation out of the allowed characters, following the rules outlined above.

ksekurashiru select [ใ‚ฏใƒฉใ‚ทใƒซใ‚ปใƒฌใ‚ฏใƒˆ]
ZENZENB๏ผˆใ‚ผใƒณใƒ–๏ผ‰ๅ…ฌๅผ้€š่ฒฉ
FraFrancfranc๏ผˆใƒ•ใƒฉใƒณใƒ•ใƒฉใƒณ๏ผ‰ๅ…ฌๅผ้€š่ฒฉ ๅฎถๅ…ท...

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

Change

Gymshark Finland

The store name displays on your website, customer notifications and marketing emails.

Internal store name and identifier

Change

The internal store name and identifier are based on the store name by default.

GF

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.

21โ†’4%

Reduction in Store Navigation Bounce Rate

Within 6 months of rollout