【Shopify.dev和訳】Themes/Getting started/Overview
この記事について
この記事は、Themes/Getting started/Overviewの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Shopify のテーマの概要
テーマは、Shopifyオンラインストアがマーチャントとその顧客にとってどのように見え、感じ、機能するかを決定します。
Shopify テーマは、Shopify のテーマテンプレート言語であるLiquidと、HTML、CSS、JavaScript、および JSON を使用して構築されています。これらの言語を使用して、開発者はクライアントが望む任意のルックアンドフィールを作成できます。Shopify は、開発プロセスを加速するためのいくつかのツールとベストプラクティスを提供します。
開発者は、特定のマーチャント用のカスタムテーマを作成したり、マーチャントのニーズに合わせてテーマをカスタマイズしたり、Shopify テーマストアで販売するテーマを作成したりできます。テーマの機能を拡張するアプリを作成することもできます。
Shopify テーマの構造
テーマは、マーチャントのオンラインストアの構成、機能、およびスタイルを制御します。テーマコードは、Shopify テーマに固有のファイルの標準ディレクトリ構造と、画像、スタイルシート、スクリプトなどのサポートアセットで構成されています。
テーマ開発者は、特定の市場セグメントまたはユースケースに合わせて、テーマの構成、機能、およびスタイルを最適化する必要があります。最高のテーマは、特定のマーチャントプロファイルを念頭に置いて作成されています。テーマを設計するための考慮事項とベストプラクティスの詳細をご覧ください。
Shopify テーマストアのテーマを作成する場合は、テーマが提供するレイアウトオプション、テーマのスタイル、および含める機能に関して、特定の要件を満たす必要があります。
マークアップと機能
各ページの構成は、次のコンポーネントによって決定されます。
1.レイアウトファイル 2.表示されているリソースに割り当てられたテンプレート 3.テンプレートに追加されたセクション 4.各セクションが含まれているブロック
各テーマには、ホームページや製品など、さまざまなタイプのコンテンツを表示するためのさまざまなタイプのテンプレートを含める必要があります。同じリソースタイプに対して複数のテンプレートを作成して、オンラインストア内でのバリエーションを可能にすることもできます。
Liquid テンプレートファイル、セクション、ブロック、およびスニペットのテーマに機能を導入できます。Liquid、CSS、および JavaScript を使用してテーマ機能を実装できます。テーマに含まれる機能は、顧客がオンラインストアのコンテンツを操作する方法を通知します。たとえば、テーマでは、Liquidform タグにproductタイプを指定して、顧客が商品をカートに追加できるようにする必要があります。
Suporting Asset
テーマにサポートアセットを追加して、コンポーネントや機能の表示を制御したり、コンポーネント間で使用できる再利用可能なコードを保存したりできます。
たとえば、テーマのスタイルを設定するにはアセットを追加する必要があります。これらのリソースは、オンラインストアの美学と、マーチャントのブランドを表現するためにコンテンツセクションをどのようにスタイル設定するかを定義するのに役立ちます。テーマのスタイルは、レイアウト、テンプレート、およびセクションファイルに適用される CSS と JavaScript によって定義されます。テーマ全体で再利用する Liquid と HTML は、スニペットに保存できます。テーマ CSS と JavaScript は、テーマのアセットディレクトリに保存されます。
さらに、ローカルファイルを使用してテーマをさまざまな言語に翻訳できます。ローカルファイルには、テーマ全体で使用されるテキスト文字列の一連の翻訳が含まれており、テーマのローカルディレクトリに保存されます。
マーチャントのカスタマイズを可能にする
マーチャントは、Shopify テーマエディターを使用して、Shopify 管理者からテーマをカスタマイズできます。さまざまなテーマのカスタマイズオプションを提供できます。これにより、マーチャントはコードを編集せずに、希望するカスタマーエクスペリエンスを作成できます。
- セクションとブロックを使用して、テーマテンプレートをモジュール化できます。
- マーチャントがテーマの外観や動作を制御できるように設定を作成できます。マーチャントは、ダイナミックソースを使用して設定のダイナミック値を設定できます。
テーマの配布
テーマは次の方法で配布できます。
- テーマディレクトリを ZIP ファイルとしてまとめ、販売者が Shopify 管理者にアップロードできるようにします。
- テーマを GitHub リポジトリにアップロードしてから、リポジトリのブランチを Shopify 管理者のテーマに接続します。
- ShopifyCLIを使用してテーマをストアにプッシュする。
Shopify テーマでビジネスを構成する
Shopify パートナーとして、Shopify テーマを操作するときにお金を稼ぐ方法はいくつかあります。
テーマのカスタマイズ
開発者にとって最も一般的なテーマ関連のタスクは、テーマのカスタマイズです。この場合、既存のテーマは、マーチャントのニーズに合わせて変更されます。カスタマイズの仕事は、マイナーな調整から大規模なオーバーホールまで多岐にわたります。
Shopify エキスパートマーケットプレイスを通じてテーマのカスタマイズサービスを提供できるように、Shopify エキスパートになるために申し込むことができます。
Shopify エキスパートになる方法の詳細をご覧ください。
オーダーメイドのテーマと店舗の構築
開発者は、テーマを最初から作成できます。これは大きな仕事になる可能性があり、作業は通常、非常に特定の要件を持つ一人によって委託されます。
Shopify Experts Marketplaceを通じて、テーマ構築をサービスとして提供できます。あなたはあなたのクライアントに彼らのテーマを構築するためにあなたが両方とも同意する料金を請求することができます。
初めて Shopify に移行するクライアントのテーマを作成する場合は、開発ストアを使用してストアを作成し、テーマを作成またはカスタマイズできます。店舗を販売者に引き渡すと、定期的な手数料が発生します。
Shopify テーマストアの構築
Shopify テーマストアは、オンラインストアを立ち上げるための商人の旅の最初の目的地の 1 つです。パートナーとして、Shopify テーマストアのテーマを作成し、何百万人もの起業家の国際的な聴衆にリーチすることができます。
Shopify テーマストアに受け入れられるには、テーマは厳格な技術、メンテナンス、およびサポートの要件を満たしている必要があります。ストアのテーマの開発を開始する前に、これらの要件を確認する必要があります。
Shopify テーマストアにテーマを送信する方法の詳細をご覧ください。
テーマと統合するアプリの構築
アプリ開発者は、販売者のテーマの機能を拡張するアプリを作成できます。特定のクライアント用のカスタムアプリを作成することも、公開アプリを作成してShopify AppStoreに送信することもできます。
入門チュートリアル
最初のテーマの作成またはカスタマイズを開始するには、入門チュートリアルの１つを使用してください。
ツール、ベストプラクティス、およびリファレンス
次のリソース、ツール、およびベストプラクティスを確認して、テーマ作成プロセスを最適化します。
ツール
Shopify は、Shopify テーマをより速く構築するのに役立つさまざまなツールを提供します。
Shopify が提供するツールを使用して、テーマをローカルで構築および編集し、Shopify インフラストラクチャにアクセスし、テーマをバージョン管理し、パフォーマンス、アクセシビリティ、およびコード品質をテストできます。また、使用することができDawn独自のテーマのための開始点として、Shopify のオープンソース参照のテーマを、または Shopify のテーマ-構築のベストプラクティスを使用して実装することができますどのように異なる特徴を探求します。
ベストプラクティス
テーマ開発エクスペリエンスを最適化するために、Shopify は、テーマとその周辺のツールチェーンおよびプロセスを開発するときに参照できる一連のベストプラクティスを確立しました。ベストプラクティスは次のとおりです。
-
テーマの設計とコーディング-最適なカスタマーエクスペリエンスを作成し、マーチャントの店舗を高速でアクセスしやすく、発見しやすい状態に保つには、多くの要素を考慮する必要があります。Dawn を構築する際、Shopify 開発者は、最適化されたテーマを設計および構築するために従うことができるいくつかの原則とベストプラクティスを特定しました。
-
ツール-チームの成長と発展に合わせて、バージョン管理とファイル変換に関するベストプラクティスを確認できます。
-
マーチャンストアでの作業-テーマを開発またはカスタマイズするときは、セキュリティ、ツールの使用、およびコラボレーションに関する特定のベストプラクティスを念頭に置く必要があります。
参考文献
テーマの開発中に、次のリファレンスを使用できます。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion