Nothin' Sketchy

Nothin' Sketchy needed a fully custom Shopify store to help sell its brand new smoothie kits. Figma designs were provided and 10xDev had to translate them into pixel-perfect code. 10xDev also needed to build out a custom cart experience and product displays by using Shopify's AJAX APIs.

First Steps

Due to the nature of setting up a fully custom Shopify store and working with asynchronous javascript APIs, we wanted to establish a modern development workflow that would allow us to build a scalable web application. Because Shopify provides a CLI that allows for local theme development, we were able to incorporate any build process that we wanted. We decided to use Typescript and Tailwind along with Vite as our code bundler and transpiler. This helped us create a maintainable frontend and accelerated development significantly.

Replicating the Designs

Shopify uses Liquid, its own server-side templating language, for UI development. 10xDev developed custom Liquid templates to match the design specifications, and wrote modularized Typescript for site interactions. We also created a design system with Tailwind that helped us write maintainable CSS.

Allowing Customization

Along with developing the custom templates, we had to ensure that our client could edit the templates through the Shopify Theme Editor. This meant incorporating Shopify's section schemas to make each template fully customizable and dynamic. Each product that was displayed was tied to custom collections that were editable for non-technical users. Every heading and subheading were also editable through Shopify.

Setting up the Store

Our client needed product bundles, subscriptions, and reviews for each product. 10xDev incorporated different Shopify apps to accomodate these features. Since we were using a fully custom cart in our code, we implemented significant logic to account for each purchase option.

The Results

The fully custom store was built in 80 hours over the course of 4 weeks. 10xDev tested all functionalities and delivered a product that our client was very happy with. The site consistently receives praise from users for its UI/UX.