Shopify has been gaining popularity in an incredible way since its introduction way back in 2006. With it launching new products left and right, such as Shopify POS and a renewed, native, focus on wholesale, Shopify is becoming an increasingly viable option for much more than just e-commerce companies.

We likely don’t have to tell anyone reading this why Shopify has been gaining popularity at this rate. Examples are easy to come by in the real world, inevitable even. It’s likely to be at least a consideration for any merchant that’s setting up a new webshop.

So merchants love it, but do the developers? A look behind the curtains can initially seem to reveal some major challenges. However, after more careful consideration, embracing Shopify’s peculiarities allow for an efficient and relatively carefree setup.

We might have to get a bit techy throughout the article, however we aim to give any reader a basic understanding of how we approach our Shopify Tech stack, as well as giving developers a solid starting point.

Server

The main peculiarity developing in Shopify has is the server setup. Everything is always hosted by Shopify, including local development environments. As a full service company, we are very used to configuring and maintaining our own servers, so working with what we’re given here can be very different.

Because even local development hosting is done by Shopify themselves, we develop Shopify themes using Shopify-cli. This connects our local developing environment with a “real” Shopify webshop. Everything related to the database is then managed by Shopify but the templating code is delivered by us. All of the code is mirrored in a repository of course.

From our local environment, we can deploy to any Shopify store the connected partner account has access to. This allows for quick switching and deployment between development, staging and production environments.

Packaging and packages

As mentioned our local shopify environments are hosted using Shopify-cli. The `shopify theme serve` command hosts the environment. This takes files that adhere to Shopify’s very strict directory structure and effectively hosts them on a temporary server, only available to the developer that ran the command.

As mentioned the directory structure that is hosted is very strict. For example: no subdirectories are allowed, templating is done in `.liquid` files, styling trough bare `.css` files, `.js` should already be compiled and minimised. On first consideration, this doesn’t strictly fit our usual way of working, but after careful consideration we found a way to make it work.

To streamline development as well as improve the products, we elect to build a layer around the bare Shopify directory structure. We care a lot about our code quality, so we need linting and formatting using Prettier and Eslint. We choose Tailwind to style websites. If we really have to write CSS, we want to write SASS instead, and so much more.

To manage all these packages, we use Yarn. It makes it easy to keep everything up to date and synchronised between environments. And to tie everything together, we’re using Webpack. Just a warning, we’re going to get nerdy now:

As an example: instead of just deploying to a Shopify store using `Shopify theme deploy`, we’re using a Yarn command (`yarn deploy`) to first lint all our code, auto fix problems, compile all vue, sass and tailwind preferences, tree-shake javascript, purge css and compile everything to a separate directory that matches Shopify’s theme structure. And in one command, Webpack takes this directory, and gives it to Shopify to host, like nothing happened.

Conclusion

By embracing Shopify’s restrictions, and working with them, instead of against them, we aim to provide an experience that streamlines the product we deliver, as well as the developer experience. After all, a happy developer is an efficient developer.

We’re not about to choose suboptimal technologies to base our products on to meet the demands of an e-commerce platform, but we are about to combine the best technologies around in combination with every advantage the best e-commerce platform in the world has to offer to create jaw-dropping digital products.

Read more about our work and get in contact with us on owow.io/shopify!