🌐

【Shopify.dev和訳】Apps/Online store/Extensions/Overview

2021/09/11に公開

Shopify

apps

tech

この記事について

この記事は、Apps/Online store/Theme app extentions/Overviewの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

テーマアプリの拡張機能の概要

テーマアプリの拡張機能は、開発者がテーマコードの整合性を保護し、より良いアプリ開発と販売者体験を提供する方法でテーマを拡張することを可能にします。テーマアプリの拡張機能は、Shopify の Online Store 2.0 リファレンステーマである Dawn を含む Online Store 2.0 テーマとしなやかに統合されます。

このガイドでは、テーマアプリの拡張機能についてご紹介します。

サンプルアプリ

Shopify の製品レビューアプリと Dawn の GitHub リポジトリをクローンして、テーマアプリの拡張機能が Shopify テーマでどのように動作するかを理解することができます。テーマアプリ拡張機能を実験して、製品レビューアプリが Dawn をどのように拡張するかを学び、その後、既存のアプリを更新してテーマアプリ拡張機能を使用します。

フレームワーク

テーマアプリ拡張機能には、以下のリソースが含まれています。

ブロック - テーマに注入したいもののエントリーポイントとなる Liquid ファイル。
アセット - CSS、JavaScript、その他の静的なアプリコンテンツで、テーマに注入されます。
スニペット - 複数のブロックで使用できる再利用可能な Liquid スニペット。

テーマアプリ拡張フレームワークには、以下の種類のブロックがあります。

アプリブロック：ページ上にインラインコンテンツを注入するアプリ用のブロックです。
アプリ埋め込みブロック：UI コンポーネントを持たないアプリや、フローティング要素やオーバーレイ要素をテーマに追加するアプリのためのブロックです。

最高の販売者体験を実現するための設計

テーマアプリ拡張フレームワークで構築されたアプリは、テーマのコードを編集しないため、テーマに破壊的な変更を加えるリスクが減少し、統合内容の反復が容易になり、販売者体験が向上します。

販売者は、テーマエディタを使用して公開設定を行い、テーマセクションにアプリブロックを追加して、ページのレイアウトに正確に配置することができます。

UX ガイドライン

テーマアプリの拡張機能には、優れた顧客体験と販売者体験の設計に役立つ一連の UX ガイドラインが用意されています。

メリット

他の統合方法ではなく、テーマアプリの拡張機能を使用することで、あなたのアプリにメリットがあります。

テーマアプリの拡張機能は、テーマエディタでアプリを自動的に公開します。エディタのビジュアル編集機能を、アプリで再現することなく活用できます。
アプリを使用するすべてのオンラインストアに、同時にアプリを展開することができます。また、アプリのバージョン管理や Shopify CDN でのアセットホスティングのためのライフサイクル管理にもアクセスできます。
存在するさまざまなテーマの統合メカニズムを追加することなく構築できます。すべてのテーマに対応する単一の統合ロジックと指示を構築できます。
販売者がテーマコードを手動で編集しなくても構築できます。販売者にも好評です。

開始方法

テーマアプリ拡張機能の構築を始めるには、スタートアップチュートリアルをご利用ください。

アップデート

Shopify では、AssetやScriptTagリソースを使用するアプリをアップデートして、代わりにテーマアプリの拡張機能を使用する方法を提供しています。

リソース

https://github.com/Shopify/dawn

ツール

Shopify アプリのご紹介

Discussion

ログインするとコメントできます