What is Pack? A Guide for Developers

Pack began with a single powerful insight: Shopify is built for merchants, not developers.

Shopify is ideal for business owners looking to build an ecommerce storefront without having to worry about the technical side of building a website. But today’s brands want more control over their customer experience, and as they add more apps and content, their site gets slower. To regain speed and keep adding new features, it’s time to bring developers into the mix.

This creates two unique challenges:

1. You want the flexibility to build custom experiences and features.
2. Merchants need a simplified user experience.

Solving these challenges would free up your time so you can focus on building new features and give merchants the ability to launch content without bogging down your workflow.

That’s why we built Pack. It’s a digital experience platform built by ecom developers for ecommerce teams that combines the flexibility of React with the ease-of-use of a theme, all without the DIY assembly or maintenance.

Shopify is built to empower brands, but devs need more flexibility.

Shopify has the most robust back-end offering in ecommerce, but the front end has been less of a focus. Going headless used to be the answer to achieving more flexibility on Shopify - but that option carried its own drawbacks.

Stitching together a fully custom front end required a Shopify back end plus multiple other solutions — from a web hosting service, to a headless CMS, a data orchestrator (optional), a visual page builder (optional), your custom storefront, and tons of custom-built third-party integrations — meant spending months to launch a new site. Dev teams would get bogged down in site maintenance. Plus, content changes required multiple teams to update, which led to long, complex release cycles. With a more complex site architecture, there are more opportunities for something to break.

For marketers who needed to make frequent changes, the tech was impossible to navigate, landing every single website change request on your team’s plate.

Luckily, there is a better way.

Cutting the fat with Pack: a headless CMS, dev tools, and CRO — all in one place

Pack marries the best of Shopify with the latest and greatest dev tools. You get all of the flexibility of React and custom code — without needing to engineer the architecture.

Here’s a detailed breakdown of what’s you get with Pack:

A visual headless CMS built for developers and brands on Shopify

Pack stands out from most other solutions on the market because the CMS is flexible enough for devs to customize but also easy for merchants and marketers to update themselves.

• Opinionated for Shopify — Pack is specifically designed to be compatible with Shopify’s toolset to build custom storefronts (Hydrogen, Remix, Oxygen). So you don’t need to build opinions into generic tools (i.e., a headless CMS) and pay for access to integrations that aren’t compatible with Shopify.
• Built for brands who are focused on their website — Pack focuses on your website as a channel to simplify the system and your workflows. So you don’t have to invest in complex APIs if you’re not trying to push content to a mobile app or an in-store kiosk.
• Built to be stood up quickly — Pack helps you launch a new custom storefront in weeks, not months.
• Built for smooth handoffs — Pack keeps content management workflows simple, so it's easier to onboard stakeholders who don’t have a technical background.

Pack's visual headless CMS makes it easier for merchants to manage all of the day-to-day tasks needed to run a dynamic eCom store — meaning tasks taken off your plate. The core feature set includes:

• A visual editor / customizer for creating and editing content
• Real-time content previews
• Content scheduling
• Site-wide campaigns
• Flexible content blocks
• Bulk content management

No complex content models, or high learning curves. No need to get into the weeds of the CMS to make changes to your content.

Powerful dev tools and a flexible developer experience

Pack offers unparalleled support for some of the most common tools and integrations needed to build a custom headless environment using React.

• React-based front end with a native GitHub integration
• Purpose-built for Shopify so you can help merchants unlock more value from their Shopify plan (Hydrogen + Oxygen are free with every paid plan)
• Shopify connector that automatically syncs your product catalog
• Hydrogen connector that gives you access to Hydrogen’s frameworks, hooks and utilities, and preserves your Shopify analytics.
• Support for Remix + Oxygen so you get the power of React in Shopify’s ecosystem and free hosting
• Metaobjects connector that pulls meta objects into a visual content editing experience
• Dev workflows for managing content, local, and production environments
• Components library / starter kit: to speed up build times
• 3P integrations library, so you don’t have to build them from scratch

Not into Remix? No problem. Pack also supports Next.js so you can pick your preferred framework.

CRO tools

Testing is the lifeblood of a successful ecom business, and you shouldn’t need to invest in yet another tool to get signal on what’s working and what isn’t. Now you can access A/B testing so you can assign traffic to page variants and optimize for conversions

With robust dev tools, a headless CMS, and CRO tools, Pack’s platform provides all the essentials to build a modern, blazing-fast, flexible storefront.

What does the developer workflow look like within Pack?

To get a local dev environment set up, You'll:

1. Download your code
2. Install dependencies
3. Run yarn dev

Here's a quick tutorial:

Video tutorial (Remix): Spinning up a local dev environment

Video tutorial (Next.js): Spinning up a local dev environment

Once you've gotten your local dev environment set up, you're ready to start developing / coding out your content.

To create sections, you'll:

1. Go to Pack's customizer and select localhost.
2. You'll see a live instance of your dev environment
3. Start customizing

What tools and technologies can I use within Pack?

Pack is compatible with any tools that you can use inside of Remix / NextJS. Here are just a few examples:

• Tailwind
• Typescript
• GraphQL
• Redux
• Zustand
• GSAP
• Hydrogen

How Pack stacks up vs. a traditional headless stack

Pack is purpose-built for Shopify and deeply integrated with Hydrogen. From a visual editing layer to support for Remix and meta objects, Pack makes it easy to build and manage a custom storefront while giving merchants more access on the front end. We make this possible in five ways:

1. Pack offers an all-in-one platform for your custom front end. Our unified platform gives you access to all of the tools you need to manage your storefront — without adding to the complexity and maintenance of your stack.
2. Pack fully integrates 3P tools and frameworks for efficient workflows. Pack supports popular 3P integrations and dev tools, including React, Remix, TypeScript, Hydrogen, and Oxygen.
3. Anyone can create content with Pack’s intuitive visual CMS. As you add components, marketers can access them as part of a library — with screenshots of each component. Then they can drag-and-drop those components to create new landing pages, or make updates in seconds.
4. Pack cuts down on time-to-market. Because it’s opinionated to work with Shopify, you can connect a Hydrogen storefront or stand up a new one in minutes. With Pack’s integration library and starter kit of pre-built components, you can start building your storefront right away.
5. Pack helps merchants unlock the full value of Shopify. With Pack, you can transform the powerful toolset — Hydrogen, Oxygen, and meta objects — that is included free in every Shopify plan into a fully-functional custom storefronts

Get started with Pack today and deploy a Storefront on Next.js or Remix by EOD

Yes, we’re serious. It takes just a few minutes to set up an account and connect a Hydrogen storefront. Get to proof-of-concept up-and-running — so you can test site speed and Lighthouse scores while also getting a feel for how it works.

With Pack, you’ll have all the tools you need to build custom Shopify storefronts in React that aren’t a nightmare to maintain or hand off – and that still give you the flexibility you need to code outside the box.

Create a free account and get a proof-of-concept storefront up and running within minutes.

Want to learn more? Book a personalized demo with Pack’s team of experts.