How Does Online Store 2.0 Change Things? How to Display Apps with a New Store Theme

Online Store 2.0, announced at Shopify Unite 2021, was likely a dramatic change for anyone who had been working with Shopify store themes up to that point. In particular, those who had been customizing and building stores by adding files and code must have been amazed by the convenience of being able to add, configure, and edit files directly from the theme editor.

In this article, we will explain from an app developer's perspective how to add app code tailored for Online Store 2.0 to a theme.

From Templates/Sections to App Blocks

Previously, when apps wanted to display their code within a theme, many of them would add page templates or include code that called snippet files within sections. Since file additions were only possible through code editing in the theme or via the API, merchants could not review them from the theme editor. As a result, the code editing screen would accumulate many unused files, and even when files generated by different apps interfered with each other, there was no way to manage this from the theme editor.

To address this, Online Store 2.0 introduced a feature to manage app code installed in the store under a category called App Blocks. When an app is uninstalled, the files and other assets generated by that app are now automatically removed.

App Blocks can be easily created using Theme app extensions, a Shopify command-line tool. Once created, extensions can be registered as app extensions using shopify extension register, and version management can be handled in the Partner Dashboard using shopify extension push.

Directory Structure of Theme App Extensions

Using shopify extension create --type=THEME_APP_EXTENSION creates a directory called theme-app-extension with the following directory structure.

└── theme-app-extension

  ├── assets

  ├── blocks

  ├── snippets

Since App Blocks are composed of Liquid files, development can proceed in the same way as writing Liquid code in the traditional Templates or Sections. Within {& schema &}, you can specify CSS and JS files placed in the assets directory.

{% schema %}

  {

    "name": "My Extension",

    "target": "section",

    "stylesheet": "app.css",

    "javascript": "app.js",

    "settings": [

        { "label": "Color", "id": "color", "type": "color", "default": "#000000" }

    ]

  }

{% endschema %}

It is also possible to create separate snippet files and call them from within blocks using a syntax like {% render "app_snippet" %}. Learn more here

What Theme App Extensions Make Possible

The background to these extensions being created likely lies in the complexity of managing theme files — issues such as file generation by apps, bugs caused by mutual interference, and so on, as explained at the beginning.

In other words, the most ideal state for a Shopify theme is one that can be easily managed from the theme editor without requiring someone who can edit code. Situations where customizations generate large numbers of files, or where a single file contains code related to multiple apps, should be avoided.

The Theme app extensions introduced here are automatically removed from the theme when an app registered with these extensions is uninstalled from the store, which prevents irrelevant code and theme files from persisting in the store.

In practice, even with Online Store 2.0, it is still possible to add Liquid files to Templates and Sections the traditional way, so you can continue using apps you have been using. However, if your store is built on Online Store 2.0, whether an app supports Theme app extensions should be an important factor in your decision-making when adding apps.

To keep store maintenance and growth sustainable, it is important to build in alignment with the theme structure that Shopify provides.