Updating Shopify’s Online Store

Redesigning the brand’s original ecommerce product.

Role: Senior Content Designer

Company: Shopify

The Challenge

Replace a departing content strategist on an tight-knit team redesigning Shopify’s Online Store Editor.

The Solution

Pair with four UX designers to create content that is consistent with existing product experiences and create new experiences that help merchants achieve their tasks.

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 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.

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.

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.

The Results

The redesigned and expanded Online Store editor was released to merchants in July 2021.