Rebuilding Sales by State on “Purple” WooCommerce Block Theme

sales·by·state has run on a theme I built from scratch via WordPress Studio since the start. Every header change, every section, was a quick prompt inside Studio’s UI. Today we moved the site to Purple, WooCommerce’s own block theme. Purple, Woo’s first official block theme, is ready for beta testing, so I thought this was…

sales·by·state has run on a theme I built from scratch via WordPress Studio since the start. Every header change, every section, was a quick prompt inside Studio’s UI.

Today we moved the site to Purple, WooCommerce’s own block theme. Purple, Woo’s first official block theme, is ready for beta testing, so I thought this was the perfect way to give it a go and send them some feedback as well!

Here’s what it took to make the Purple theme actually look like us, and what changed.

Why move off a theme I already had working

The custom theme worked. It had the brand colors, the layout, the header I wanted.

However, this site is… a couple of weeks old, so the WooCommerce announcement caught my attention and I decided to ask Claude Code to do the switch.

Purple is maintained by WooCommerce. Cart, checkout, product filters, variations, account pages: all of it comes tested and updated by them, not by me.

That’s the actual trade I made. I gave up a theme that matched us pixel for pixel out of the box, in exchange for one where the checkout flow keeps working whether or not I’m paying attention to it.

Also, the demo looks beautiful (at least to me), minimal, and “relaxing” to the eye.

What Purple actually gives you

Purple is WooCommerce’s own starter theme, built for the Site Editor. It ships full templates for the whole storefront: shop, single product, cart, checkout, account.

It has its own swappable style system too: nine color palettes and ten font pairings baked in as alternate theme.json files you can switch between from the Site Editor.

None of the nine built-in color options were close to our teal and amber, so that part didn’t save us any work.

But the mechanism did: instead of hacking the theme apart, Claude wrote one more palette file using our actual brand colors and dropped it in the same way Purple’s own designers would have.

Making someone else’s theme look like ours

The default Purple homepage is a generic storefront demo: model photos, a “shop new arrivals” hero, fashion category tiles. The real work was replacing it piece by piece without fighting the theme’s own structure.

Homepage of the Purple theme demo

First, I needed to work on the header and hero background. I asked Claude to replicate what we had on the old design, and we reused same map art we already use on the WP.org plugin banners for the WooCommerce, FluentCart, and SureCart versions, not a new graphic. I pulled the text off the existing banner, recolored the map from its amber wash to our teal, and used that as the hero image. It’s the same visual language a visitor already saw on the plugin page, just bigger.

Redesigned homepage of Sales by State website with the Purple theme

The “watch your state sales tax thresholds” and “built for store owners” sections used to show placeholder screenshots. They now show actual images taken from the Sales by State Report Pro for WooCommerce plugin, the real one, sitting inside WooCommerce’s own Analytics menu, with real test data behind it. If you’re going to tell people what the report looks like, it should look like the report!

The old “see your own numbers” section had a plain screenshot and two generic buttons. It’s a real WooCommerce product grid now, pulling the actual Free plugin listings for WooCommerce, FluentCart, and SureCart straight from the catalog, each with a working “Learn More” link. The products are the call to action; they don’t need a separate one next to them.

What changed along the way

A few things only showed up once real content was sitting inside Purple instead of demo content.

The homepage read narrower than it should because two-column sections needed an explicit “wide” alignment Purple expects that our old theme never required.

The single posts were, once again, contained, and instead we went “wide” there too.

Before and after

This was the former design that I got after 10-15 prompts inside WP Studio. I gave it the brand guidelines, objectives, a minimal outline, and it did a pretty good job (later, I had to fix a few minor bugs):

And this is what happened after a few minutes, when Claude and I decided to move to Purple theme:

Same content, same brand, running on a theme somebody else keeps up to date instead of just me!

What’s still ahead

Purple hasn’t been released on the WordPress.org theme repo yet — for now it’s GitHub-only, so there’s no changelog and no update notifications, just whatever commit I happened to pull.

I’m looking forward to that moment, both to get updates the normal way and to see the theme tested across more stores than just this one, which was the whole point of moving off my own theme in the first place.


Leave a Reply

Your email address will not be published. Required fields are marked *

More from the journal

The latest news on sustainability, knitwear and clothing care guides.