Storefront Web Components

For years, the Buy Button app was Shopify's main way to sell on external websites, but it was built for an earlier web. Developers who wanted to sell on their own sites had no good option:

• The Buy Button was locked down. It rendered inside an iframe, so developers couldn't apply their own CSS, combine it with other elements, or fit it into a design system without !important overrides.
• Headless commerce was too heavy. Building a custom storefront required deep GraphQL knowledge and a lot of infrastructure, which was too much for developers who just wanted to sell on an existing site.
• Component libraries still imposed a look. Even flexible web component libraries set a baseline design through their structure and shadow DOM, so brands ended up fighting the library.

A brand new library that lets anyone embed Shopify commerce into any website with a few lines of HTML. The playground was where we could prove it, showing developers and non-developers alike how easy and flexible the components were:

• A polished, approachable playground anyone could tinker in
• Well-executed examples people could reference and build from
• Templates merchants could copy directly into their own projects

I joined the project midway through development, focused on the experience of the playground and the production-ready templates. I lead the final polish and execution of the playground, working closely with engineers and the product manager.

• Getting up to speed hands-on. I reviewed Buy Button feedback, developer forum threads, and stakeholder feedback.
• Designing and coding production-ready templates. Drawing on my front-end background, I designed and coded ready-to-use templates for product cards, collection grids, and cart drawers, pairing closely with engineers. I gave each one a different visual style to show that the library imposes no design of its own.
• Polishing the playground. I fixed interaction and UX issues, like lack of code wrapping in the editor and responsive behaviour across screen sizes. Because the examples had no documentation embedded, I also added a new feature: a description for each one.
• QA and catching a race condition. I handled much of the pre-launch QA so engineering could stay focused on the library. While building full template examples, I found critical race condition bugs where nested components didn't load properly, which the team fixed before launch.

By providing a polished playground with live-code examples, we transformed the merchant workflow from struggling with rigid app constraints to building high-fidelity, custom commerce experiences on any site. The project was featured on Hacker News to strong reception, with praise particularly for the playground experience.

• Zero setup: Shopify commerce embeds into any site with a few lines of HTML
• Any stack: works with React, Vue, plain HTML, or no framework at all

Now this is what Web Components are great for. The playground is very well done btw, worth checking out IMO

Hacker News comment