Building Studio VIII

The project started out as a simple jewelry store, but not long after we realized it had grown beyond just that way beyond. From the very beginning, we knew there was no point in building yet another Shopify theme just to spend the rest of the project fighting against its limitations. We needed Shopify in order to use its strengths: products, inventory, orders, checkout, email, but we needed to control absolutely everything that the client sees and interacts with.

This led us to making the storefront separate using Next.js and TypeScript with React and Tailwind. Shopify would work behind the scenes as the commerce engine and our website was completely our own. Product and collection feeds come through Shopify's headless APIs, however, pages, interactions, cart, navigation, promotional systems and overall experience was built custom.

That setup proved to be exactly what we needed. It makes little sense to recreate payment processing, order management, transactional emails and all other infrastructure that Shopify already spent many years building. The point of going headless was not to replace Shopify. It was to prevent Shopify from dictating the frontend for us.

Another important aspect of the work on this project was the part of the work that clients won't notice if it is done correctly. There is rate limiting and bot protection of the application, protection of the APIs, deployment infrastructure, analytics and automation behind the storefront. Promotions can be set up dynamically and it is possible to track user movement around the store, rather than just relying on the page views counters.

SEO was considered in our work on the project, not something that we would attempt to fix at the last minute before the release. Complete control over Next.js allowed us to have full control over metadata, rendering, page structure, links and performance. As a result, the completed website got a 100 SEO score and on the first day of launch it already appeared ninth (~9.2) in the search results of one of the searches we were trying to target. For a newly launched storefront, it is quite an accomplishment to wake up with.

We really liked the jewelry. So much so that I bought my mother a piece. There was something oddly satisfying in opening the website that we've been looking at in the development version for months, using it like a customer, adding an actual product to the cart, going through the checkout that we've connected and finally receiving a package.

Probably, the easiest way to describe Studio VIII as a project would be to say that it is neither a Next.js website nor a Shopify store. It is a combination of multiple systems that do their jobs well and ideally don't show themselves when the real customer appears.

If you'd like to see what we've built, visit Studio VIII here. And if you happen to like something on the site, don't forget to place an order.

Studio Viii