Crafting a modern Shopify theme development experience

Tradewind UI: What and why?

👋 Hi! My name is Joe.

I’ve been a frontend engineer for over 10 years. In my career I’ve gone from learning to build static HTML websites to building WordPress themes for small businesses and then eventually building sites and applications with React. Through the years I have learned how valuable a great developer experience is for being productive.

For the last few years I have been working on Shopify themes at Barstool Sports. The work is very rewarding and generates a lot of revenue for the company; the work also leaves me with a nagging feeling that the developer experience can and should be better. In particular I miss using Typescript and Tailwind CSS in other projects. With these tools I can be my most productive and prevent bugs in development while working on a theme. I’ve decided to solve this problem for myself and hopefully many Shopify developers with Tradewind UI.

Shopify + Tailwind CSS + Web Components with Typescript = Tradewind UI

A starter theme and Online Store 2.0 sections

Shopify’s Online Store 2.0 upgrade was a big step forward in making components more composable and reusable. Sections are very flexible and managed by non-developers in the theme customizer. I’m a big fan of the “sections everywhere” methodology and it's many benefits.

The Dawn theme (and Shopify’s other free themes) are a great blueprint for using Shopify the way Shopify thinks it should be used. The source code emphasizes customization, reusablity and the use of Web Components with an eye towards progressive enhancement. The Tradewind starter theme will follow these principles and add the tools I wish Dawn had.

The first steps to building a great starter Shopify theme will be crafting beautiful sections for all the most common components used on e-commerce sites. Each section will contain Liquid markup with a schema, Tailwind CSS classes for flexible styling, and Web Components to add functionality and user interaction.

What makes a great starter theme?

In my mind a great starter Shopify theme will satisfy these requirements:

• Follow current best practices for theme development
• Be a full featured theme that is ready for production use
• Obsess over performance and site speed
• Treat search engine optimization as a core feature
• Shipped with great documentation
• Look great out of the box
• Provide an amazing developer experience

The Tradewind theme and what to expect

I will be building my opinionated version of a great Shopify starter theme called Tradewind. A theme is a combination of templates, sections, and blocks so that's where I'll start. As I complete features I will release an accompanying blog post on how I built it and the reasons behind decisions I made. Each section will be available in the starter theme and as a standalone code snippet that can be added to existing themes with documentation on how it works.

I’m excited. Are you?

I couldn’t be more excited to start sharing my progress and providing value to the Shopify theme developer community. I know I will enjoy working on Shopify themes with a more modern developer experience and a first class starter theme.

Follow me on twitter to stay up to date on progress. Feel free to provide feedback and any ideas you have there.