Shopify Digest #12

Shopify Unite 2021 has happened. As Tobias Lütke, a former Shopify CEO, has mentioned, 12 months ago two distinct industries, retail and online commerce, were separated, but now they are a single eCommerce industry. At Unite 2021 we’ve got a really outstanding upgrade of the Shopify platform. Let’s dive into it.

Online Store 2.0

Online Store 2.0 is a set of features and feature improvements that make themes and theme apps easier to build, more flexible, and maintainable. What’s new in Store 2.0?

JSON templates

Shopify has added the JSON templates in addition to Liquid classic templates. The major benefit of them is applied to the section entity. Instead of having long settings_data.json files, you will have all your section-related data inside of your JSON section.

By introducing the JSON format they’ve provided their long-waited feature “Section everywhere”.

Customize Editor has changed as well.

Docs for JSON templates can be found here.

App blocks

This is a way to include app-related sections into the merchant’s theme without altering the source code.

Migrations of old themes to Online Store 2.0

You can use this doc to learn how to make such types of migrations.

Metafields have been upgraded

From the first starting point of working with Shopify, I’ve faced the same question countless times. “Can we add custom fields to products?”. And solutions were included with different Shopify apps, which were handling those metafields manipulations. This has changed. Later this year we will be able to manage metafields directly in the admin.

At this moment you can use only Product metafields.

How to use products metafields:

1. Go to the your-store/admin/metafields.
2. The root entity is called metafields definition. It acts as a template for your metafield with the Name, Namespace and key, Namespace and key, and Content-type fields.
3. When you create the definition for a product, your product will have this list of fields available for filling in.
4. To add a metafield to the page you need to go to the theme editor, choose the page type, the section which supports metafields, and to choose the metafield you want to add to your page.

Here is the documentation for the metafields.

Checkout UI Extensions

Checkout app extensions make it easy for developers to extend their app code into the checkout and customize many aspects of the checkout experience.

Docs are here.

Hydrogen

Based on React, it is a quick-start toolkit and set of components for building unique experiences in Shopify stores. This tool will be launched in 2021 Q3-Q4.

Docs: https://shopify.dev/hydrogen

New Dawn theme

Development stores created after June 29, 2021, use Dawn as their default theme. The authors of this theme decided to make it web-native, functional, not pixel-perfect, without any frameworks, libraries, and dependencies.

Dawn represents a HTML-first, JavaScript-only-as-needed approach to theme development. It’s Shopify’s first source available theme with performance, flexibility, and Online Store 2.0 features built-in, and it acts as a reference for building Shopify themes.

The theme has its own Github repo: https://github.com/Shopify/dawn. It has been included with the Theme Check CLI tool in the list of VS Code extensions inside the repo, so if you are a VSCode user, you can use it right away:

shopify theme check

It is really unusual to see that the Shopify theme team decided to go from frameworks and libraries to the pure web-native world. As you remember, there is no SASS, only pure CSS and now we see the statement “NoJS is our baseline”.

New robots.txt.liquid template

Finally, we have a customizable tobots.txt file, which we can edit. If you remember, Shopify didn’t have such a file, and that was causing some troubles with SEO agencies.

This file is based on the robots object and has this default value inside:

{% for group in robots.default_groups %}
  {{- group.user_agent -}}
  {% for rule in group.rules %}
    {{- rule -}}
  {% endfor %}
  {%- if group.sitemap != blank -%}
    {{ group.sitemap }}
  {%- endif -%}
{% endfor %}

You can check the result by going to your-store/robots.txt URL.

Of course, you can use the plain text rules, but using liquid notation is preferable.

Lighthouse CI

I remember a time when the Google Page Speed tool was the unwanted guest in the Shopify ecosystem. It was impossible to improve the overall score honestly, without any hacks and fakes.

Google Page Speed has been morphed into Lighthouse, and now we have a CI tool from Shopify to use Lighthouse on Shopify Theme Pull Requests using GitHub Actions.

Reference of usage:

# .github/workflows/lighthouse-ci.yml
name: Shopify Lighthouse CI
on: [push]
jobs:
  lhci:
    name: Lighthouse
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Lighthouse
        uses: shopify/lighthouse-ci-action@1.0
        with:
          app_id: ${{ secrets.SHOP_APP_ID }}
          app_password: ${{ secrets.SHOP_APP_PASSWORD }}
          store: ${{ secrets.SHOP_STORE }}
          lhci_github_app_token: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
          lhci_min_score_performance: 0.9
          lhci_min_score_accessibility: 0.9

You can get Lighthouse CI here.

Recap

Needless to say, this is the best version of Shopify ever existed. Awesome features, awesome things to try and to include in stores of merchants, to make them profitable and useful for the customers.