ストア2.0でどう変わる？アプリを新しいストアテーマで表示する方法

Shopify Unite 2021で発表されたOnline Store 2.0は、これまでのShopifyストアテーマを触ってきた人たちにとって、劇的な変化を感じられるものだったと思います。特に、ファイルやコードを追加してカスタマイズしてストア構築を行っていた人たちにとっては、テーマエディターからファイルの追加・設定・編集ができるということの便利さに驚いたことと思います。

今回は、アプリ開発者の視点から、ストア2.0に合わせたアプリのコードをテーマに追加する方法について解説させていただきます。

Templates/SectionsからApp blocksへ

これまで、アプリのコードをテーマ上で表示したい場合、page templatesを追加したりsectionの中でsnippetsファイルを呼び出すようなコードを追加していたアプリが多くありました。これはテーマのコード編集やAPIを使った方法でのみファイル追加が可能であったため、マーチャントがテーマエディターから確認できず、結果的にコード編集画面ではいくつも使用されていないファイルが存在していたり、アプリ追加によって生成されたファイル同士が干渉していてもテーマエディターから管理することはできませんでした。

そこで、今回ストア2.0では、ストアにインストールされたアプリのコードをApp blocksというカテゴリで管理する機能が登場し、アプリがアンインストールされたタイミングで該当のアプリによって生成されたファイル等が削除されるようになりました。

App blocksは、Theme app extensionsというShopifyのコマンドラインツールを使って簡単に作ることができます。また、作成したextensionは shopify extension register を使ってアプリの拡張機能として登録することができ、 shopify extension push を使ってパートナーダッシュボードでバージョン管理ができるようになります。

Theme app extensionsのディレクトリ構造

shopify extension create --type=THEME_APP_EXTENSIONを使うと、theme-app-extensionというディレクトリが作成され、以下のようなディレクトリ構造になっています。

└── theme-app-extension
  ├── assets
  ├── blocks
  ├── snippets

App blocksはliquidファイルで構成されるため、従来のTemplatesやSectionsで書いていたliquidコードと同じように開発を進めることができ、{& schema &}内ではassetsディレクトリに置いたcssファイルやjsファイルの指定ができます。

{% schema %}
  {
    "name": "My Extension",
    "target": "section",
    "stylesheet": "app.css",
    "javascript": "app.js",
    "settings": [
        { "label": "Color", "id": "color", "type": "color", "default": "#000000" }
    ]
  }
{% endschema %}

また、snippetsファイルを別途作成し、{% render "app_snippet" %}のような形でblocks内のファイルから呼び出すことも可能です。詳細はこちら

Theme app extensionsによって実現できること

これらの拡張機能が生まれた背景には、最初にご説明したアプリによるファイルの生成、相互干渉による不具合等、テーマファイルの管理が複雑であったことが挙げられるかと思います。

つまり、Shopifyのテーマはコード編集が可能な人間でなくても、テーマエディターから簡単にマネージできることが最も理想的な姿であり、カスタマイズによるファイルの大量生成や1つのファイル内に複数のアプリに関わるコードは含まれている状況は避けるべきであると考えられます。

今回ご紹介したTheme app extensionsは、この拡張機能が登録されたアプリがストアからアンインストールされた場合、自動的にテーマから除かれるようになっており、現在のストア運営に関係ないコードやテーマファイルが残り続けるのを防ぐことができます。

実際、ストア2.0になっても従来のやり方でTemplatesやSectionsにliquidファイルを追加していくことはできるため、これまで使用していたアプリを継続して使っていくこともできますが、online store 2.0で構築したストアであれば、アプリを追加する際、Theme app extensionsに対応しているかどうかも重要な判断基準になるのではないでしょうか。

ストアのメンテナンスや成長を持続可能なものにするためには、Shopifyが提供するテーマの形に沿って構築していく必要があるでしょう。

Shopify×グロース支援のお問い合わせ

StoreHeroは、Shopify×グロースに必要なデータを集約したプラットフォームを活用したグロース支援を行っています。
Shopify、Shopifyアプリ、Google、Instagramなどのデータから伸びしろを可視化し、Shopify×グロースのエキスパートが改善提案＆実装支援を行い着実な成長を実現しています。
StoreHeroのサービスにご興味をお持ちの方は、お気軽にお問い合わせください。








現状ない場合は空欄で結構です

上記以外に、ご予算や納期などの詳細が決まっているようでしたら、ご記入ください。


関連記事

  • Shopifyストアと外部のデータを連携するには？ -各種データをShopifyのAPIで連携する方法 –

    Shopifyの利用者が増える中で、「これまで別のサービスでオンラインストアを運営していたけれど、Shopifyに移行したい！」、「自社で使用している配送サービスや倉庫管理のサービスとShopifyを連携させたい！」とい […]

    もっと見る