Explore Blueprint: A production-ready, open-source Shopify Hydrogen theme for growing eCommerce brands

The Challenges of Building a Shopify Hydrogen Storefront

Look, we get it. Building a Hydrogen storefront from scratch could be fun—if you had unlimited time, unlimited resources and no antsy stakeholders (lol). That's why we’ve spent months building and iterating on Blueprint: an open-source, production-ready Hydrogen theme that lets you focus on the fun parts of development instead of piecing together basic heroes, 50/50 tiles and product sliders. It’s used in production by brands you may recognize: Atoms, Umzu, Liquid IV, Public Rec, etc.

What's Blueprint (besides awesome) and what makes it stand out?

It's what happens when you take Shopify's Hydrogen starter and add everything it needs to be production-ready. Think of it as your "I need this to actually work" starter repo. Whether you're building a simple storefront or a complex marketplace, Pack’s open-source Hydrogen theme gives you the foundation to build something amazing without having to start from scratch.

The stack (because we have standards)

• Remix for top-notch SSR performance
• Tailwind CSS because life's too short for vanilla CSS
• TypeScript because we care about your sanity
• Pre-configured for Oxygen hosting (DevOps? Completed it mate)
• Metaobjects support because we're living in 2024

And if you’re worried about Remix, don’t be. The learning curve isn’t as intimidating as you’d think. Jeremy Gabriel, who worked on dozens of Next.JS stores built Pack’s Blueprint theme picked it up fast and has become a Remix convert:

What's in the box for Pack’s open-source Hydrogen theme 📦

The must-haves

• 50+ of your your favorite components: heroes, product grids, sliders
• A cart that actually does what marketing wants
• Reviews, testimonials, accordions (you know the drill)
• Newsletter signup that works right out of the box

But wait, there's more! (Sorry, our marketing team made us say that)

Advanced commerce features your stakeholders will love

• Multi-currency support that actually works
• Intelligent shipping calculator with free shipping meter
• Product grouping that makes variant management bearable
• Mobile-first navigation that won't frustrate users
• Search that finds what shoppers are actually looking for
• Internationalization support for your global domination plans

The dev goodies (the good stuff)

• GA4 data layer that's actually reliable (QA'd by Elevar + Fueled)
• Pre-built integrations that just work
• SEO that'll make your growth team happy
• TypeScript everywhere (you're welcome)
• A CLI to get you started

Performance optimizations

Because nobody likes a slow site:

• Server-side rendering optimization
• Automatic image optimization
• Intelligent code splitting
• Pre-fetching for faster page transitions
• Cache optimization that actually makes sense
• Bundle size optimization (we keep it lean)

Real talk from people who've used Pack’s Hydrogen theme

Here's Matheus from Atoms (who's probably forgotten more about frontend than we know):

He migrated from Sanity in 1.5 months. Solo. While doing his regular job. Not too shabby.

Then there's Jon, who built UMZU's entire storefront in 4 months:

How we're different than Shopify's Hydrogen demo storefront

Shopify's demo is great for getting a quick feel for how a Hydrogen storefront works. But Blueprint? It's what you use when you actually need to ship something. Blueprint includes:

Enhanced commerce features

• A cart system that does more than just exist
• Advanced navigation that’s easy to customize
• Components optimized for production
• Analytics that tell you what's actually happening

Developer experience

We built Blueprint to lower the barrier to entry for Hydrogen development. As Jeremy puts it:

With Blueprint, you can expect:

• Comprehensive documentation that doesn't make assumptions
• Code that follows best practices (seriously, check the repo)
• Component architecture that scales
• Type safety throughout the codebase

Theme styles designed for your vertical (and to make marketers swoon)

Seeing is believing when it comes to a new theme. We’ve created multiple styles for Blueprint with fonts, buttons, colors and sample imagery so you can 1) hit the ground running and 2) help your colleagues catch the vision of what’s possible.

Here are a few of the styles we’ve created (or are actively creating) for Blueprint:

• Apparel
• Shoes
• Beauty
• Jewelry
• Eyewear
• Consumer packaged goods (CPG)

Built-in integrations

We've pre-built integrations with the tools you actually use:

• Klaviyo for email marketing
• ReCharge for subscriptions
• Yotpo for reviews
• Attentive for SMS
• GA4 for analytics
• And more (because we've been there)

Content management that makes sense

Remember when custom storefronts meant "goodbye easy content management"? Not anymore. Check out the:

• Visual editor for content teams
• Drag-and-drop interface that doesn't generate spaghetti code
• Preview environments that actually work
• Content scheduling that won't give you trust issues
• SEO tools built right in

Ready to save some time and rev up your site?

• Docs: docs.packdigital.com (Actually helpful, we promise)
• GitHub: github.com/packdigital/pack-hydrogen-theme-blueprint
• Free tier: 10k monthly pageviews (No strings attached)

Technical requirements

[Coming soon - We're still debating whether "a will to live" should be listed as a requirement]

Getting started guide

Because everyone loves a good tutorial:

1. Clone the repo (you know how this works)

2. Install dependencies (the usual npm/yarn dance)

3. Configure your environment variables (we've documented them all)

4. Start building (the fun part)

Full getting started guide in our docs, with actual explanations and everything.

Want to ship a Hydrogen store without the headaches? Give Blueprint a shot. Your future self will thank you.

FAQ

Because we know you're going to ask:

Q: Can I use this for a production store?

A: That's literally what we built it for.

Q: Will this work with my existing Shopify apps?

A: If it's a popular Shopify app, we probably already have an integration for it.

Q: Is it really free?

A: Yes, up to 10k monthly pageviews. We're not in the business of hidden fees.

Q: What if I need help?

A: Our documentation is actually good, but if you get stuck, our support team knows their stuff.

Q: Is this a headless approach?

A: Yes and no—Generally when brands talk about going “headless” they’re building a completely custom stack, stitching together and maintaining hosting, CMS, data orchestrator, page builder etc. Hydrogen takes the legwork out of framework and architecture upkeep, and Pack gives you the simple theme editor experience. So while it is has some elements of a headless approach, you’re offloading most of the risk, maintenance and innovation to Shopify and Pack so you can focus on building your storefront. Not convinced? Check out this article about “should I go headless”.

Ready to build something awesome? Check out the open-source repo and our documentation to get started.