Shopify · 2022
Shopify Section Groups
Allowed merchants to add sections to header and footer content areas — one of the most highly requested features for Online Stores.
Role
Senior Product Designer
Skills
- Information Architecture
- User Experience
- Visual/Design System
Team
- 1 Product Manager
- 4 Engineers
Company
Merchants were limited on what they could add to their site’s header and footer.
The most highly requested feature for Online Stores, many want to add content to the header and footer to express their brand and differentiate their store.
- Goal
- Allow merchants to add sections to not just the template, but also the header and footer content areas.
- Scope
- Adding, editing, and deleting specific sections and apps in the header and footer such as Navigation or Logo. This will not include adding template sections such as Banner, Form, or Blog Post.
- Limitations
- These new customizable header and footer areas are directly connected to Shopify’s Liquid code. The design has to be considerate of editor and coding usability.
- Success Metrics
- 100% developer adoption of the template version with header and footer customization.
Visual Explorations
After reviewing these explorations with my team and leadership, we decided on a more subtle layout that clearly separates the Header, Template, and Footer sections.
Final Design
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 it’s 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