Skip to main content

Principles

In our approach to building Shopify themes, we adhere to several key principles that guide our development process and ensure we deliver high-quality, efficient, and merchant-friendly products.

Work Smarter Not Harder​

We believe in working intelligently and leveraging existing tools and frameworks to streamline our development process. This includes using Vanilla JS for a lightweight codebase, Tailwind CSS for its utility-first approach, Daisy UI for baseline components, and Vite for faster build times.

Examples:

  • Using ChatGPT to generate boilerplate structures for your components.
  • Customizing a DaisyUI component that looks close to your intended design, instead of building it from scratch.

CSS-First​

Our focus is on a CSS-first approach, where we prioritize CSS for styling and layout over JavaScript implementations. This approach ensures faster load times and better performance, especially on mobile devices. In saying this, do not compromise on accessibility in the pursuit of a CSS only approach. Eg, avoid checkbox hacks.

Example:

  • Not jumping to JS if you know there is a way to achieve the same functionality with simple and easy to understand CSS

KISS (Keep It Simple, Stupid)​

Simplicity is key in our design and development process. We aim for clear, straightforward solutions that are easy to understand and maintain. This principle is reflected in our choice of Vanilla JS and our approach to building reusable components.

Example:

  • Don't start throwing other frameworks such as Alpine.JS or Bootstrap on-top of this project. Follow the structure outlined in the documentation so we can easily port sections / components / features to other projects.

Speed​

We understand the critical importance of speed in eCommerce. Every millisecond counts, and our development choices are geared towards optimizing load times and site performance, balancing the need for dynamic features with the necessity of a fast, responsive user experience.

Examples:

  • Lazy loading PhotoSwipe due to it not being needed on the initial page load.
  • Lazy loading below the fold elements, but potentially not lazy loading one or some above the fold elements.
  • Making use of section.index0 to detect the position of a section.

Merchant-driven-development​

Our development is driven by the needs and requirements of our Shopify merchants. We focus on creating themes that are not only visually appealing and functionally robust but also cater to the specific needs and challenges faced by eCommerce businesses.

Example:

  • Writing clean and concise schema so the merchant does not need to constantly refer to the documentation to understand how the sections in their theme works. Use defaults. Use info. Use header elements to group similar settings together.

Self-QA​

Quality assurance is an integral part of our development process. We conduct thorough self-QA prior to a PR being put forward for review. While changes will always undergo a formal QA process, a Self-QA will help avoid your PR being quickly sent back with changes requested.

Example:

  • Testing your PRs end-to-end prior to requesting a review. Testing bit-by-bit can not always be enough.

Tests​

Testing is a critical component of our workflow. We employ various testing strategies, including linting and theme checks, to ensure code quality and reliability. Our build pipeline is designed to deliver themes efficiently, with a focus on preventing any disruption to live merchant sites.

Example:

  • Writing Cypress tests should you be working on a feature that is along the critical path to conversion.