Improving merchant expressibility with Section Groups
Overview
On Shopify, when merchants built their online store they’d run into a few limitations. Many want to add content to the header and footer to express their brand. So our goal was to allow merchants to add sections to not just the template, but also the header and footer.
We launched to 100% of merchants February 2023, announcing it at Shopify Editions Winter ‘23.
Initial Design Questions
What sort of content do merchants want to add?
How would this work with apps?
Is it clear that header and footer content appears almost everywhere?
Do merchants understand Header and Footer?
Before we could add this feature, we needed to validate if merchants understand the concept of Header and Footer, aka that they’re global and any content added to them appears across their online store.
This would help us gauge how much education we needed to include in our content strategy.
UNMODERATED USER TESTING RESULTS
As a quick gut check, I decided on building a simple prototype and tested it with 10 merchants who haven’t used Shopify.
We found that every merchant easily understood the concept of Header and Footer and what it means to add content to them.
“Sure, the stuff I added would show up everywhere. It’s a header, of course it does.”
What’s the scope?
In partnership with engineering and theme designers, we evaluated technical feasibility and what to limit to create the best usability.
In scope
Moving, adding, editing, and deleting sections in the Header and Footer.
Out of scope
Adding template sections to header and footer.
Early Explorations
Header and Footer Layout Designs
After reviewing designs with my team and leadership, we decided on a more subtle layout that clearly separates the Header, Template, and Footer sections.
End Result
What I learned
Merchant feedback is incredibly important to get the details right
There are many dependencies in the Online Store editor, such as Theme Developers and App Developers, and its important to consider them early on in the design work
Exploring future states and presenting them to leadership ensures we’re aligned on the direction the editor is going in