Shopify’s Online Store 2.0 is An Ultra Fast, Cost-Effective Alternative To Headless
Here's why we're recommending the upgrade to every Shopify merchant.
Here's why we're recommending the upgrade to every Shopify merchant.
On June 29th, 2021, Shopify announced the launch of “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.
In case you haven’t heard, 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.
The second feature is called asynchronous loading, and it 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 instantaneously jump to life for users.
At P3, we first observed the effects of this shift while helping to migrate our longtime client, SeaVees, to 2.0. SeaVees is highly focused on delivering a best-in-class customer experience, and over the years they’ve explored nearly every option to build the fastest site possible on 1.0. Even so, migrating to 2.0 created an instant 38% improvement in average page load times, shaving more than a second off of their previous average, and raising their desktop Google Lighthouse score from 60 to 95.
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.
And our experience suggests that the improvements in 2.0 can cut certain project development timelines in half.
2.0 is easier to develop in for a host of reasons: Github support means that local changes can now be merged with the live sales environment automatically; new pages can be quickly “collaged” out of endless drag and drop combinations using the new sections everywhere functionality in the theme editor; and the new developer console supports a faster, safer QA process. 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.
In Online 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.
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.
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.
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.
That’s a little technical, but here’s what it means: 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
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”–essentially, the age-old square peg, round hole conundrum. 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.
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.
We love making our clients' dreams reality.