"i only speak liquid" #58: 3 pre-launch checks for your custom Shopify theme

Hey everyone!

Welcome to my 2nd contribution to the  i_only_speak_liquid newsletter!

I'm Martynas, a freelance web developer and proud member of the Storetasker network. I spend a lot of time building Shopify sites, and also React applications.

Outside of work, I spend most of my free time in the gym and enjoy building things, such as carpentry projects. This passion for fitness and hands-on creation keeps me balanced and continually learning.

Let’s connect via Linkedin.

What I’ve been thinking about:

“3 Essential Resources to Review Before Starting Your Custom Shopify Theme Development”

As a developer getting into the world of Shopify theme development, selecting the right tools can make a big difference, both in terms of how fast you can work and the quality of what you produce.

Below, I’ve explored three resources that, in my opinion, stand out in the Shopify theme development space.

1. Adastra: Next-Gen Theme Development with Modern Frontend Tools

Adastra is a handy collection of Vite plugins, perfect for developers who want to create custom Shopify themes using the latest frontend tools.

Key Features:

• Flexibility: Seamlessly integrates with existing workflows and Shopify themes.

• Developer Experience (DX): Lightning-fast Hot Module Replacement (HMR) for static files, complemented by a custom CLI built on Shopify CLI.

• Performance: Supports code splitting and lazy loading of static files by default.

• UI-Agnostic: Compatible with popular frameworks like React, Preact, Solid, Vue, and more.

• Customization: Offers sensible built-in configurations that are highly extensible.

Pros:

• Powerful and flexible for developers familiar with modern frontend tools.

• Extensive examples demonstrate its usage with various UI frameworks.

• A discord channel for support.

Cons:

• Lacks built-in UI components, which may require additional development time.

Example in Action:

The Cambridge Satchel website is a great example of what can be achieved using Adastra from scratch with Tailwindcss.

2. Archetype Devkit: A Component-Driven Approach

Archetype Devkit is for advanced theme design and development. It focuses on being collaborative and simple, making it a great option for developers who want a straightforward approach without heavy tooling.

Key Features:

• Collaborative Development: Encourages developers to build together, centralizing theme code across projects.

• Simplicity: Avoids compiled code and bundlers, leveraging modern browser capabilities.

• Reusable Components: Focuses on building reusable theme components.

• Better Design: Provides Figma designs for base components.

Pros:

• Ideal for those who prefer a vanilla approach to theme development.

• A centralized and component-based development approach simplifies the maintenance of themes over time.

Cons:

• May be limiting for developers who need more advanced tools, such as ReactJs or Angular.

Explore the Devkit repositories for a comprehensive guide on theme component development and theme development.

3. Dawn: Shopify’s Reference Theme

This is not a surprise to anyone working with Shopify. The Dawn theme is designed to be a reference point for developers building Shopify themes, focusing on performance, flexibility, and compatibility with Shopify’s Online Store 2.0 features.

Key Features:

• Web-native at its core: Leveraging modern browsers while maintaining support for older ones.

• Lean and fast: Prioritizes speed and reliability, only shipping code that meets strict quality standards.

• Server-Rendered: Uses Liquid for server-side rendering, ensuring business logic remains on the server.

• Functional, not pixel-perfect: Themes prioritize functionality across all browsers using semantic markup and smart design.

Pros:

• A robust starting point with Shopify’s best practices baked in.

• Great for developers looking to build high-performance themes with a minimalistic approach.

Cons:

• Less flexible than other options, as it adheres strictly to Shopify’s guidelines and principles.

Contribution Guide:

You can dive deeper into Dawn’s theme code by checking out the contribution guide.

Which Option Should You Choose?

Ultimately, the choice depends on your specific needs and development style:

• Adastra is perfect if you’re looking for flexibility and modern frontend tools. It’s ideal for developers who want to push the limits of what’s possible with Shopify themes.

• Archetype Devkit is best suited for developers who prefer minimal tooling and a production-ready workflow.

• Dawn is your go-to if you’re looking for a solid, performance-oriented foundation that adheres to Shopify’s strict standards.

If you personally lean towards simplicity and a more standardized approach, Archetype Devkit would be my choice.

3 links you can’t miss:

1. Untitled UI: This is the ultimate Figma component library that I rely on for about 90% of my design projects. It offers a vast array of page templates and components, all easily customizable to fit your needs. Think of it as LEGO for web design.

2. Iconfinder Illustrations: My go-to resource for illustrations to enhance my designs. It’s packed with a wide variety of icons and illustrations to add that extra flair to your projects.

3.Awesome Design Systems: A curated collection of top-notch design systems, organized by useful tags like Components, Voice & Tone, Designers Kit, and Source Code. It’s a treasure for anyone looking to build or explore design systems.

1 app I like:

KaChing Custom Cursor: An app I love for adding a personal touch to your store with custom cursors. It’s a fun way to make your site stand out—cute and effective!

One learning as a freelancer:

As a freelancer, you’re your own boss, with the freedom to choose your projects, clients, and schedule. However, this also means you’re fully responsible for your success and growth. The balance of freedom and responsibility is key to thriving in this space.

Martynas