Updating Shopify’s Online Store
Redesigning the brand’s original ecommerce product.
The challenge
Shopify’s Online Store Editor had promised merchants for 2+ years it was releasing functionality that would make every page template as customizable and flexible as the homepage. The team was under a deadline meet the deadline within the year when I assumed the role of content designer for a departing team member.
The solution
I collaborated with four product designers on the team to redesign the Online Store Editor’s templates to include functionality including blocks, metafields, and a custom color picker with a gradient builder. Each feature had to be backwards compatible and work with third-party partner apps and other Shopify products. The team released the promised update within the year.
Understanding the Online Store
The Online Store is Shopify’s original product. At 15 years old and still a primary source of revenue, releasing changes and new features is complex.
The Online Store has two layers:
Editor - the interface used by all merchants
Theme - the unique design and layouts selected by merchants
These layers must work together seamlessly and integrate with Shopify Admin, as a source of content, and the Shopify App store, as a source of additional functionality and features.
Previously, the Editor included drag-and-drop sections only on the home page. This gave merchants flexibility to create a custom page introducing their store. All other pages, including product pages, were fixed unless merchants learned the necessary proprietary Liquid code to edit the pages or hired outside developers.
For several years, the Editor team had explored technical solutions and new code bases to provide sections on all pages and eliminate code changes or hacks required to make unique changes.
Updating the Editor
The redesigned Editor was restructured to allow merchants as much customization and flexibility as possible without learning code. My content design work ranged from flows supporting new features, like creating templates, or updating existing features to work within the new architecture, like installing customizable apps.
Templates
Each page type was templatized, allowing merchants to create page types with unique sections. The new template creation flow required content design that emphasized simplicity while working within technical limitations and tight deadlines.
View the template creation and assignment flow.
Additional functionality, including giving the merchants a simple flow to delete templates and the ability to bulk assign pages to templates, will be designed next.
Installing app blocks
The old version of the Editor required merchants to install apps and then paste code into a page to add its functionality to their store. Where it appeared on the page was usually decided by the app.
In the redesigned Editor, apps can be installed without editing code and function as blocks that merchants can reorder. With apps now within sections and blocks, I could write simple instructions to guide merchants through adding their new app within the Editor.
View the app block installation flow.
Sharing the vocabulary of the new Online Store
While working on the new Editor’s features, I spent a significant amount of time researching and reviewing terminology with the Editor team to find the best solutions.
When each feature was completed, I restructured and rewrote a glossary of Online Store terminology to capture rationale and usage. This glossary is available internally for everyone to refer to, from project managers, to UX designers, to engineers. With an internal culture trained to question everything, everyone needs to understand decisions as small as a label choice in a flow.
View the complete Online Store 2.0 glossary (PDF).
The results
The redesigned and expanded Online Store editor was released to merchants in June 2021. The new functionality included, like blocks, empowered Shopify’s 2M+ merchants to customize their online stores without coding. This saved them hours of time and/or the cost of developer hours to build their stores.