ABOUT SHOPIFY'S ONLINE STORE 2.0
On June 29th, 2021, Shopify launched “Online Store 2.0,” a soup-to-nuts platform revamp that promised to deliver more speed, flexibility, and functionality to merchants, while introducing vastly improved tools for developers.
Along with Store 2.0, Shopify introduced Dawn, a free, mobile-first theme developed to maximize 2.0’s capabilities. The Dawn demo at Shopify Unite showcased a shape-shifting frontend composed of slick, customizable drag and drop elements that the company calls “sections everywhere.” It was a tantalizing display meant to inaugurate the dawn (get it?), of an exciting new era of storefront personalization.
At P3, We’ve been quietly developing on Dawn for three months, putting 2.0 through its paces, and migrating a handful of our most experience-focused Shopify Plus clients.
As an agency that prioritizes client growth and revenue protection, we generally wait for new tools to prove their stability and revenue generating potential in the marketplace before rolling them out to our clients.
But in this case, the early results are clear and overwhelming: Online Store 2.0 delivers a faster user experience, is easier to develop on, and is simpler to maintain than its predecessor. Plus, even enterprise level Shopify merchants can migrate to 2.0 in around 4 weeks.
These aren’t improvements for the sake of progress. If you’re familiar with web performance metrics, you already know that faster, more personalized websites produce significantly more revenue for merchants. And a website that costs fewer dev hours to maintain delivers higher margins. Here's a peek at what we mean:
With Shopify Online Store 2.0, our clients saw results fast
Yes, 2.0 still comes with a few trade-offs that will give some merchants pause, and we cover our experience with those in the “cons” section below. But given the massive revenue-generating potential we’ve already seen, P3 is recommending migration to all of our current merchants. Moreover, we’re committing to developing all new Shopify stores on Dawn moving forward.
Here’s why we’re doing it, and why we think you should seriously consider upgrading, too.
PROS:
2.0 is super fast
We all know that faster sites create more sales than slower ones. Just how important is site speed to revenue generation? A broadly referenced study from the Aberdeen Group found that, "A 1-second delay in page load time equals 11% fewer page views, a 16% decrease in customer satisfaction, and 7% loss in conversions." That’s a $7,000 loss for every $100,000 you make in revenue. Plus, as of April 2021, Google’s adjusted search algorithm prioritizes faster sites over slower ones, meaning that faster sites now rank higher in organic search.
Shopify's Online Store 2.0 introduces two major redesign features that dramatically improve page load speeds, and thereby protect your bottom line—custom elements and asynchronous loading.
Historically, most eCommerce stores (including headless ones), encode groups of elements into huge, unwieldy CSS and Javascript files. That means every time a customer’s browser needs to access the 13,000th line of code in a massive pagefile, it has to read the preceding 12,999 first.
In 2.0, most page elements have been divided into discrete components with their own code files. Because these individual CSS and Javascript files are much smaller, browsers can read the code faster. And faster reading and execution equates to faster page loading. That’s the power of custom elements.
The second major redesign feature of 2.0, asynchronous loading, works because pages are now divided into custom elements. In a pagefile, code is read sequentially from top to bottom, with elements loading for users in the order that their code appears. In 2.0, the smaller, discrete code blocks that make up your pages load independently of each other. And when pages load asynchronously behind the scenes, they appear to jump to life for users, instantaneously .
In other words, this site flies now. As we’ve already covered, more speed equals fewer bounces and more conversions during normal traffic periods. But during revenue-critical peak traffic periods, like the Q4 holiday season, these gains can be even more dramatic.
For instance, we recently helped CVG, one of our high-volume athleisure clients, improve the speed of their Shopify Plus store by 30% in advance of their popular semi-annual flash sale. The performance improvement resulted in a 20% increase in flash sale revenue YOY, even with traffic to the site remaining comparable over the two sales periods. Those kinds of potential revenue gains are ultimately why we’re so thrilled about 2.0’s speed out of the box, but they’re far from the only reason for excitement.
Pete Hardie, Head of eCommerce at SeaVees, views these gains in terms of their holistic impact on business operations:
We have seen a bump in conversion rates since we launched the site over the previous month. That’s hugely important, but I think the piece that’s more important from a conversion perspective, is that I now know that site speed is not limiting conversion rate. Going into this on July 6th this year, when I took a look at the backlog of work for SeaVees.com, 80% of the tasks were speed related. As of today, that list is entirely empty, which means my capacity, [P3’s] capacity, and our design team’s capacity is freed up for adding features, testing concepts, and building content-rich experiences.
Returning that much time to your team is a potential gamechanger, and as we’ll discuss in the next section, 2.0 not only eliminates much of the ‘housekeeping’ work that consumes the lion’s share of developer hours, it also saves developers significant time on the projects they do tackle, compounding both your time savings and cost savings on a per-project basis.
It's much more developer friendly
Our experience suggests that the improvements in 2.0 can cut certain project development timelines in half.
• Github support means that local changes can now be merged with the live sales environment automatically
But for our developers, the most dramatic improvement in usability has been (unsurprisingly) the introduction of custom elements. Because 2.0 is organized around custom elements that have their own files, developers can now reuse code across a website wherever they want to duplicate functionality, as opposed to having to rewrite and insert the code for that functionality by hand. And that translates to a huge potential savings in terms of both sunk and opportunity costs.
For example, if you want to develop a native side cart in Shopify’s traditional development environment, it generally takes around four full days of work to connect the cart to all of the “quick add” and “add to cart” buttons on site, because each time a new connection is created, it must be manually configured. That means developers have to insert a lot of redundant code, which takes more time and slows down your website.
With Store 2.0, these connections can be configured automatically, and the code used to make a single connection can be reused across the website wherever you want to duplicate functionality. Translation: the full cart development timeline drops from four days to two. That’s two days of work you’re not paying for anymore, for a side cart that will run more quickly and seamlessly. Not. Bad. Not bad at all.
It’s extremely customizable
Savvy personalization of the user experience can raise revenue by 19%, and boost profits by 15%. That’s why the top eCommerce companies invest so heavily in technologies that create smart product recommendations and tailored landing pages.
In 2020, if you wanted to easily build a custom Shopify page using drag and drop elements, you’d have needed to use the services of a third-party pagebuilder like Shogun or Pagefly. But with the introduction of custom elements via “sections everywhere” and new, flexible themes like Dawn, Shopify is putting that power in your hands out of the box.
And that’s not just great news for your profits. It’s great news in terms of cost efficiency as well. Pagebuilder subscriptions can be expensive. And previously, to unlock the degree of frontend customizability that 2.0 offers, many brands had to go headless, which can be extremely expensive.
From what we’ve seen, 2.0 makes it cheaper and simpler than ever before for merchants to reap the revenue-driving benefits of custom frontend design, and that’s an extremely compelling reason to consider adoption for brands that want to maximize ROI without overspending on technology.
Shopify merchants can migrate to 2.0 in around a month
When a development environment is intuitive, CSS files are smaller, and local changes merge with the live environment seamlessly through Github, your developers end up saving lots of time.
How much time? While a regular platform migration from say, Magento to Shopify can take 12 weeks or more, we’ve been able to move current Shopify merchants to 2.0 in as few as four weeks.
A truncated development runway means that Shopify merchants don’t necessarily need to spend big or wait for a full quarter to start reaping the massive performance benefits of 2.0. With an experienced team, you can upgrade your whole web experience in around a third of the time traditional migrations take.
2.0’s raw speed, customizability, and cost-effectiveness from a migration and maintenance standpoint raises interesting questions about the future of expensive headless eCommerce setups. We’ll address these after we discuss the primary caveat that merchants interested in upgrading should consider.
CONS:
A number of your apps will require manual reinstallation
Migrating to 2.0 will require you to manually reinstall apps that aren’t running separately (i.e. hosted elsewhere). For most merchants, this applies primarily to frontend apps that are connected to admin panels. In other words, if your store uses apps that make changes to a user’s frontend experience based on information stored in your backend, those apps won’t follow you to 2.0 without some applied elbow grease.
For instance, if you use a third-party subscription tracking app that surfaces new products for your subscribers (a frontend change) based on their purchase history (backend information), the app won’t automatically reinstall itself during the upgrade process. The list of apps that fit this description include a few common types, like:
• Subscription tracking apps• Review apps
• Apps that manage store credit
Most apps by Bold will also require manual re-installs, since they’re written into pages as if/else liquid, and 2.0 is designed to use JSON templates to create “blocks.” Hardcoded apps, like your ERP integration, won’t be affected since they always require manual reinstallation.
Typically, manual installs like this don’t take very long (we’ve reinstalled the Bold Subscription app on 2.0 in around an hour, for reference), but depending on the size of your website, properly QA’ing new installs can require up to two days.
This shouldn’t be a dealbreaker for most merchants, especially when considering the performance gains 2.0 has to offer. But if your site runs any of the app types above, you’ll want to consult your developers to get a sense of how costly it will be to move them over to 2.0, and factor that additional work into your budget.
WHAT DOES 2.0 MEAN FOR THE FUTURE OF PAGEBUILDERS & HEADLESS ECOMMERCE?
We don’t know yet! But here’s why we’re asking the question: Headless commerce is primarily attractive to merchants for two reasons, flexibility and speed. Decoupling the front-end presentation layer of an eCommerce website from the backend, logistical layer gives merchants ultimate flexibility in terms of both frontend design, and website architecture. Plus, since decoupled frontends and backends are hosted on different servers, they draw from different resources, enabling a faster, more responsive web experience for users. At least, that’s the sales pitch.
Most headless platforms essentially offer to host your content on a server that’s faster than the one hosting your content now. And for that service alone, you’ll pay five figures a year on top of the cost of a headless build, which generally starts around $250,0000.
But Shopify 2.0 is blazing fast without any additional premiums. And with a drag-and-drop style pagebuilder built in, it’s fair to ask how long brands will continue to pay additional development and maintenance costs to use the third-party page builders that once offered a clear upgrade over Shopify’s native theme editor.
With 2.0 in its nascency, there is still some time before these questions really come to a head. Currently, Shopify’s page building experience doesn’t include tools for custom styling, and Dawn is configured so that only the homepage is fully customizable.
But we’re an incremental update or two away from a world where merchants can reap the most important revenue-generating benefits of going headless without spending any more money, or having to painstakingly link several third-party technologies together. And when we do reach that threshold, it will pay to be ready.
