Orchard Harvest 2015 – Theming at Onestop

Onestop has been using Orchard for a few years now, and it’s one of the largest players in the community. They are delivering a complete e-commerce stack that is largely built on Orchard. And when I talk about a stack, this even includes product photoshoots and shipping from a huge warehouse in Los Angeles. They just handle everything end-to-end.

Their session at Harvest this year is about theming. Last year, they talked about using master themes, and interestingly that wasn’t such a great idea. In particular, too much code ended up in the themes, and it created coupling between sites that made the whole system brittle. Updating is more difficult, and sites can easily break each other.

In 2015, they revolutionized their approach, and took some inspiration from the auto industry, that has been changing from building car models to modular platforms that are assembled on automated assembly lines. That industry has a spectrum of processes, from fully-automated building of cheap cars, to luxury, hand-assembled Rolls Royces. Onestop has a similar spectrum of sites, the ends of which they call “Avalon”, sites that can launch in 6 weeks, and “Phantom”, the hand-built, heavily custom luxury sites.

For the Avalon sites, they put the product and creative teams together to create baseline wireframes. The themes for this have few files, and are semantic and responsive. They have defined two categories of shapes: actor and carrier. Actors shapes contain business logic, and should never be site-specific or overridden in a theme. Carrier shapes are structural and are expected to be overridden in themes. The sites have a subset of functionality, with the goal of reducing maintenance time and cost. In the end, their themes got from up to 90 overrides down to less than 20.

The Phantom sites on the other hand have more options, can modify modules, and as a consequence are more expensive to maintain. The shapes are broken down into smaller units, to enable more finely grained overrides.

They built and use a resource builder module that builds LESS files and bundles resources. This makes development of themes easier, more scalable, and performs better at runtime. Interestingly, module-level CSS can pick up variables defined at the theme level, which minimizes the number of overrides you have to make in the theme.

With all that work, they can launch sites in 4-6 weeks, QA has more time, and their partners love it. Sites launch with a tolerance of 10 bugs or less (none in the purchase path). They took maintenance cycles into account when designing the new platform, and that is probably something everybody should do.

Disclosure: Onestop has been a customer of mine for a few years, before I came back to work at Microsoft.