Unpacking Utopia: What it is, who it’s for, and when to use it

Shopify Summer Editions 2024 put a lot of focus on Shopify Hydrogen storefronts, and one of the releases was about a new visual code editing tool for Hydrogen called Utopia. 

Since Pack helps growing brands unlock the value of Hydrogen-related tech, we made it a priority to dig in and really understand what Utopia is, how it works, and who it’s for. This is being written right after the Shopify Summer Editions conference in July 2024, and we’ll do our best to keep this post updated! 

What is Utopia?

Utopia is an open-source visual code editor—currently in alpha (the tool hasn’t been officially released as generally available yet)—that enables designers and developers to collaborate in a shared interface in real-time. 

Core value props of Utopia include:

• Fully open sourced platform

• Using the code as the source of truth to simplify design / dev handoffs

• A space for real-time collaboration

Top features of Utopia include:

• Figma/Webflow-like design tool to drag-drop, resize, and move elements pixel-by-pixel

• Ability to reference external data source—like a content management system—to populate content (announced, but not yet functional)

• Real-time collaboration across design and code changes, this includes real time cursors, live changes (similar to a Figma), and commenting in-line. 

• Visually displaying nested components

Summary: Utopia is a code-based platform for designers and developers to collaborate on a digital canvas. 

How does Utopia work?

Utopia provides real-time syncing with your code base, always referencing the code as the source of truth. Content is either stored in code (as it is in the demo store) or referenced in an outside data source. There are currently some issues related to the external CMS integration so we are unable to fully test.

Who is Utopia for?

While Shopify’s headline marketing emphasizes that Utopia is for full-team collaboration, the layout of the canvas and the user experience clearly indicates that developers and designers are the first priority users for this tool. 

For now, we’re ruling out most marketers as heavy users of Utopia—unless they’re very tech savvy, quick learners, and comfortable with a complex interface—since Utopia forgoes a simple drag-and-drop experience in exchange for granular design tools. 

What is unclear is if this is how designers and developers want to collaborate. 

Do developers (a) want to visually build in this type of visual interface, and (b) are they comfortable  giving designers or non-developers the ability to push code into their code base? 

And for designers, how will they use Utopia alongside their existing design/Figma process, and do they want code-level control (for the quick one-off change sure, but what about at a global level?)  

What could Utopia be used for today?

There is a live alpha version that folks can play with, but as of today no ecommerce brands have been announced as actively collaborating on their content within the tool. 

If you’re eager to give Utopia a go, we recommend exploring the tool, but pressure testing it extensively before you actually try to use it in content workflows—there are still a lot of open pull requests and reported issues that could slow things down—especially with the gaps in the CMS integration.

When will Utopia be generally available?

Shopify has yet to announce an official launch timeline, but the alpha version is available to play with.

What could Utopia be used for in the long run?

After playing with the tool and hunting down all available content on Utopia, here are our best educated guesses— assuming Shopify makes some massive investments: 

• In the long run, Utopia could potentially be used for design teams as a replacement for Figma. Designing everything in Utopia would simplify the design to developer handoff.

• Designing in Utopia would also drastically reduce the need for developers to write code. Instead, they’d probably take on a more code-review type role.

• Utopia could be used by non-developers—who are technically savvy and comfortable with a complex user interface—to make very granular code adjustments like moving something X pixels left/right, change colors, etc. 

• Utopia could be used by teams that want to visually see and manipulate data that’s coming in from an external or legacy data source (CMS, PIM, custom DB, etc.)

What does Utopia not include? What doesn’t it do well?

While Utopia shines when it comes to visual collaboration, it’s important to know where the functionality stops:

It’s not set up for content management

• Utopia is not a content management system—content has to be sourced from an external source 

• Because it’s not a content management system, it also doesn’t have features for managing content workflows 

  • You can preview changes real-time in Utopia, but you can not stage/schedule content 

  • Does not establish limits on non-developers making Git commits (how does one control bad code commits from non-developers?)

• As a visual code editor, you probably wouldn’t expect Utopia to be able to connect with your data layer—and you’d be right. Utopia isn’t set up for collecting / managing storefront data in a datalayer, which is another reason it would be impossible to use Utopia as a standalone tool to visually manage your Hydrogen content.

• Utopia isn’t set up to manage critical content management needs like redirects and cross-origin resource sharing.

• Because it’s code-based, you need to do a code push to publish your content instead of just clicking a “publish” button.

It doesn’t fully replace design tools

• Full transparency, we are big fans of Figma for design and collaboration. There will be a large gap—especially when it comes to more robust design features—between Utopia and Figma, and that will be hard to close.

It may make it harder to keep your code clean

• Real-time code manipulation sounds cool, but could it backfire? What if it leads to overconfident non-developers pushing up mistakes at a code level. A typo is much different with copy vs. code.

• Designing in Utopia forces you to do content modeling and content entry as you design—there’s no way to design something without it being code. That probably doesn’t keep your code as light and tight as you want to maximize site speed.

It doesn’t give you a full-context preview before you go live

• Content management systems like Pack can help you visualize and manipulate your whole storefront in context—including your scripts, 3rd party integrations, data layer etc. Because Utopia is only focused on visualizing and reading the code, it won’t pick up on scripts, or 3rd party integrations or your data layer events until after you push code live. That means it’s harder to detect issues early.

How do Utopia and Pack compare?

While both Utopia and Pack can help brands visually interact with their Hydrogen storefront, it’s an apples-to-oranges comparison. Here’s why:

	Utopia	Pack
	What Utopia is:  A visual code editor	What Pack is: A digital experience platform (DXP)
	Who it’s (primarily) for: Developers and designers	Who it’s (primarily) for: Developers and marketers
	When to use Utopia (once it’s released): Collaborate on an interactive canvas—leave comments, make changes in real time Visualize content management system data (not yet functional) Simplified design / dev handoffs Quick / small design or copy changes	When to use Pack:  Spinning up a Hydrogen storefront quickly and easily with flexible Hydrogen themes and templates Creating, staging, editing, scheduling and publishing landing pages, PDPs, your homepage, collection pages, etc.  A/B testing to optimize for conversions Serving up personalized content to specific user segments (coming soon) Integrating with Shopify-specific tools
	How it works: Utopia connects directly to your GitHub repo, and renders your code visually on an interactive canvas.  Workflows revolve around code Design and code update each other in real-time Can implement a custom interface to allow for templating To publish content to your storefront, you need to push it through GitHub code commits. Risks: only reading code means you’ll need another solution for redirects, cross-origin resource sharing, data layer / events. Implementing 3rd party scripts would also be more difficult to do without seeing the live preview.	How it works: Pack connects to a Hydrogen storefront, and loads your website and content in a visual content management system. Workflows revolve around content Your code renders your content, and it doesn’t flow into designer or marketer workflows, which keeps the code clean. To publish content to your storefront, you push the “Publish” button—more like a content management workflow. Benefits: Because Pack loads your site, all the events, 3rd party scripts etc. work as though it would on a live site, so you get a more realistic preview of your site and you can identify bugs / risks earlier.
	What it includes: Visual code editor Integrations with VScode, Github, CI/CD	What it includes: Content management tools  Headless CMS Visual storefront editor Content management + workflow tools Shopping page builder CRO tools A/B testing Landing page builder Content personalization features Developer tools Hydrogen theme 3p integrations with top Shopify apps, GitHub, and Shopify functionality (Ex. metaobjects) Data layer for managing data / events
	Additional tools required to manage + optimize your Hydrogen storefront: Headless CMS for content management + workflows  Landing page builder for spinning up quick landing pages (if your marketer isn’t tech savvy) CRO tools for A/B testing + personalization  Solution for collecting and managing data / events on the frontend - as of now, Utopia is not set up for any kind of tracking. Your favorite Shopify apps	Additional tools required to manage + optimize your Hydrogen storefront:  Your favorite Shopify apps
	Where Utopia “wins” (apples-to-oranges comparison):  Real-time visual collaboration Open source tool  Price point (free)	Where Pack “wins” (apples-to-oranges comparison): Proven solution with growing Shopify brands Network of certified agency partners that can quickly and easily implement Testing & personalization features to meaningfully boost conversion rates Workflows and efficiency features to speed up content production Developer experience, tools, & flexibility  Pre-built Hydrogen themes and templates that are easy to spin up and customize CRO tools like A/B testing and personalization

How would Utopia and Pack be used together?

We are keeping a close eye on how Utopia evolves—and once Utopia is more generally available, we will explore how brands can use Pack + Utopia side by side. 

Once Utopia’s CMS integration is fully functional, Utopia could consume Pack’s CMS data (Utopia does not store its own data) so that merchants could take advantage of the free collaboration features, light-weight visual code editing, as well as Pack’s content management, testing and personalization features.

We will keep the community posted as Utopia becomes more mature to see where there is potential value for design-developer collaboration. 

Let’s sum it all up: Our hot take on Utopia

While Utopia shows potential as a real-time collaboration tool for designers and developers, it’s probably more complex than marketers will want to deal with. It could be great for making small content tweaks, but it’s not optimal—especially in its current state—for full-scale storefront management. 

Overall, the tool is too early and raw to be added to a brand’s content workflows—or even a side project—without encountering bugs and introducing risks (typos in the code anyone?).