Getting Started with Shopify Online Store 2.0

Shopify recently released their biggest change in years in regards to Shopify theme development. New CLI, new default theme, sections everywhere, and official metafield support within themes themselves - I couldn't have even dreamed of such a nice gift.

I'm hoping to take you along with me as I explore the new features and functionality by creating a new theme in the Online Store 2.0 standard for use by some of my firm's clients.

The initial goal is to start from a base of the new Dawn theme by Shopify, and bring it up to feature parity with one of the clients that has a simpler store, so we can get this stuff live quicker. Later more advanced functionality for other clients, as well as functionality that better takes advantage of the new server-side options can be added.

Shopify Theme CLI

Replacing the older themekit, Shopify has expanded the functionality of Shopify CLI (formerly limited to helping develop apps for the app store) to include tools for editing the theme.

You can install the Shopify CLI via their instructions here: shopify.dev/apps/tools/cli/installation and learn how to use it here: shopify.dev/themes/tools/cli/theme-commands

The biggest and most impactful differences between Shopify CLI and Themekit, are that Shopify CLI uses OAuth for permissions, and the "development theme" system.

Instead of a private app key, OAuth makes set up much easier, especially when dealing with clients. Just request collaborator access with Theme Permissions, and then you can easily access the store's themes through the CLI aftering logging into your partner account with shopify login.

When using the CLI, you can run shopify serve and it will push the current directory to a "development theme" on the store that is currently selected. This isn't the live theme, and won't show up in the stores theme list, and each developer on the store has their own. It allows you to view the store, with auto reloading and hotswapping of CSS as you make changes to your local files. No more LiveReload or Browser-sync needed.

This is a godsend, truly. It does a much better job of refreshing after changes are actually reflected on the server. Even with a generous delay on Browsersync, it would often refresh before Shopify's servers would reflect the change. Now the process is just much simpler with less tools requires.

The Dawn Theme

With the reopening of the Theme Store, and the launch of Online Store 2.0, Shopify also provided a new default theme, Dawn. This replaces the rather old Debut theme as the "basic" theme any store starts with, as well as the standard for how Shopify expects themes to perform and be coded.

It absolutely pushes performance much higher, and uses some different tricks to get there.

Improved Deferred CSS

On the Debut theme, Shopify used a single large CSS file that it deferred with a simple CSS+JS trick shown here:

<link rel="stylesheet" href="{{ 'base.css' | asset_url }}" type="text/css" media="print" onload="this.media='all'">

This causes the CSS to download asynchronously and, when combined with a link rel="preload" and some inlined critical CSS, allowed the store to display the header area without downloading any additional files, with the rest of the view to show later.

In the Dawn theme, this has mostly gone to wayside. Interestingly, this isn't used for any of the CSS needed for the page at all. Instead, Shopify scatters Stylesheet tag throughout the page, specifically at the start of every section a store may have embedded.

This prevents everything after the tag from rendering until that stylesheet has loaded, but allows what is above it to render. So the page progressively renders down the page as stylesheets load in.

This has the benefit of limiting styles loaded to only those used in sections actually being displayed. When developers extend Dawn, and keep this paradigm in place, total CSS on a store load can be kept small, even if the total amount of used CSS the theme provides to store owners is much larger.

Simple Hotswapping

Now, I don't actually know if this is a new feature of Online Store 2.0. It could have been just a "hack" to take advantage of how the store customizer worked, but it sure wasn't present in the Debut theme.

With Dawn, many places in the theme, from collections filters, to product page main sections, to the cart notifications and beyond, use the shopify servers to render specific sections, and then dynamically swap them in over existing sections.

The new Cart API allows you to pass sections and sections_url parameters in your POST body for it to provide new content back with the add/remove/change request that you can slip into your dynamic cart drawers and other sections.

  renderContents(parsedState) {
      this.productId = parsedState.id;
      this.getSectionsToRender().forEach((section => {
        document.getElementById(section.id).innerHTML =
          this.getSectionInnerHTML(parsedState.sections[section.id], section.selector);
      }));

      this.header?.reveal();
      this.open();
  }

This is how the Cart Notification handles it. The add to cart does it's fetch, and feeds the response in as the parsedState to this function.

You can also just GET a page with the URL query section_id with the section you want refreshed based on that page. Then just slide it in wherever.

This can reduce the need for client-side rendering in many places, leaving it to Shopify's servers to render the content. When the situation already calls for communicating with their servers, this can vastly improve experience and consistency.

Combined with the new and improved collections filter queries, many filtering apps may be going by the wayside.

Sections Everywhere

But of course, what good is hot swapping sections if you can't put sections on every page?

Before Online Store 2.0, Sections could only be dynamically added to the homepage, and hard coded in on other pages, limiting the benefits of actually using sections on other template types.

But now, sections can be added to every page type dynamically, and some can be hard coded into the template .json file.

This offers a lot more flexibility to store owners with displaying dynamic content without needing to jump into the theme files themselves.

Additionally, this change comes with allowing app developers to add "app sections" that can take advantage of the fast liquid rendering. In the past, it was necessary for app developers to heavily rely on javascript and app server data for the bulk of the display work, otherwise the code could be copied away by anyone. With app sections, a much larger portion of the work can be handling in liquid, providing a faster and cleaner experience, while keeping the relevant display code secure.

All of this can allow more and more of the page content to dynamically display content in context, like the appropriate size chart on clothing products, without complicated rules written into custom liquid files.

Metafields

All of that is aided by the new metafields features. In the past, Metafield data on products and collections, and the store was available for storing and accessing namespaced data, but Shopify typically hasn't made it easy to edit without an app.

But now, metafields can be added to every kind of data object in the store, and even referenced and linked to section fields.

So you can have a section that displays the size chart, and link the size chart information to a product metafield, so you can easily ensure the correct size chart is displayed on each product.

There are even new types of data that can be stored in metafields, but only a limited set can currently be linked to type matching customization fields. In time this may be expanded further.

Conclusion

Overall, these are major changes to how to even think about a Shopify theme and its construction, and it will probably be some time before those other than the most active and dedicated are really taking advantage of all the new toys.

I'll be doing my best to learn it, and bring some insights from my journey back for everyone.