Designing Shopify’s New Default Theme

Writing UI and placeholder copy to guide merchants through the new theme.

Role: Senior Content Designer

Company: Shopify

The Challenge

Shopify last updated its free default online store theme, Debut, in 2016. While more than 330,000 merchants built online stores with Debut, ecommerce standards have advanced in the past five years: online stores need to be fast and intelligent, offering more flexible menus, filters, and search capabilities to help buyers find what they want. As the design layer of the Online Store, themes also need to support the functionality of the Online Store Editor, including the 2021 release of templates composed of flexible sections.

The Solution

To meet these requirements, the Themes team began building a new default theme. However, they didn’t have a content designer. Historically, the team’s five UX designers were left to write their own UI and placeholder copy, sometimes borrowing it from third-party themes. As the Online Store Editor’s content designer, I was the obvious choice to support the team and align with the Editor’s changes while also creating principles and standards for themes UI and placeholder content.

Designing Dawn’s UI copy

I joined the project’s Figma file, but created a separate copy doc to track drafts, rationale, and feedback without cluttering or losing anything to resolved comments as the designers divided up the work across Dawn’s 9 JSON templates and 16 sections.

Defining principles

While I begin to draft and revise UI copy, I established principles to guide content decisions and support future content designers who may work with the Themes team.

Naming sections and blocks

Like Debut, simple descriptive names were used for all section and block labels, although in some cases, I needed to research and make a case for a change. For example, Debut’s “Newsletter signup” section didn’t align with Shopify’s email product, released in 2020, or the expectations of most merchants, who use emails to share sales and new products with customers. I did some quick desk research of internal and external uses of “Newsletter” and “Email” to support my recommendation to rename the section.

Not all of my labeling recommendations were as successful at the C-suite level. For example, I made the case that the purchase button block label shouldn’t be identical to an existing, separate Shopify channel – Buy Button – to avoid any merchant confusion or SEO impacts, but my proposed labels were over-ruled. It is a great label, unfortunately it’s so good it’s being used by two products.

Writing support text

With sections on every template and new blocks giving merchants new functionality and choices, new support copy needed to be written to concisely explain the options and benefits to merchants without overwhelming them with information.

I focused on using concise, consistent vocabulary to help them achieve tasks as quickly and easily as possible. In the content design documentation, I added guidelines.

UI Design and Copy – from Figma to a live online store page

Dawn Product template UI Design

Dawn Product Template in the Online Store Editor

Dawn product page

The Results

The first Online Store 2.0 theme, Dawn, was released on August 31, 2021. It will become the default theme installed in the Online Store for all new merchants. It’s also available for free to 2 million existing merchants to upgrade the features and functionality of their online stores.