【Shopify.dev和訳】Themes/Getting Started/Customize a theme
この記事について
この記事は、Themes/Getting Started/Customize a themeの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
テーマのカスタマイズ
テーマ開発者として、Shopify のマーチャント向けにテーマをカスタマイズすることができます。これらのカスタマイズは、小さな微調整から完全な再設計まで多岐にわたります。Shopify のエキスパートは、Shopify のエキスパートマーケットプレイスを通してテーマのカスタマイズサービスを提供することができます。
このチュートリアルでは、Shopify CLI を使ってマーチャントのテーマをカスタマイズし、その進捗状況をマーチャントと共有します。
もしあなたが顧客のためにテーマをカスタマイズしているのであれば、マーチャントと作業するためのベストプラクティスも確認してください。
このチュートリアルでは、Shopify GitHub インテグレーションを使用していないテーマのカスタマイズについて説明します。もしマーチャントがテーマのコードを管理するために Shopify GitHub 統合を使用しているのであれば、マーチャントにリポジトリへのアクセスを要求するか、Shopify CLI を使用してリポジトリのブランチに接続されているテーマに変更をプッシュすることができます。
学習内容
このチュートリアルを終えると、以下のことができるようになります。
- マーチャントのストアへのアクセス権を得る
- ローカルの開発環境を整える
- マーチャントのテーマのコピーをダウンロードする
- 変更を加えてプレビューする
- 変更内容をマーチャントと共有する
- 変更内容の公開
ステップ 1：マーチャントのストアへのアクセスをリクエストする
マーチャントのテーマで作業するには、マーチャントのストアへのアクセスをリクエストする必要があります。マーチャントのストアでテーマを作業すると、マーチャントの製品やその他のリソースでテーマをテストできます。
ストアのテーマ管理パーミッションまたはテーマパーミッションを持つコラボレーターアカウントをリクエストする必要があります。コラボレーターアカウントでは、マーチャントがアクセスを許可したストアのセクションにのみアクセスでき、ストアのスタッフ数の制限にはカウントされません。
ステップ 2：Shopify CLI のインストール
まだやっていなければ、Shopify CLI をインストールしてください。Shopify CLI は Shopify のテーマを構築するのに役立つコマンドラインツールです。ローカルで開発しながら、テーマへの変更をプレビュー、テスト、共有することができます。以下の指示に従って、Shopify CLI を macOS または Windows にインストールしてください。他のプラットフォームについては、Shopify CLI のインストールを参照してください。
macOS(Homebrew)
$ brew tap shopify/shopify
$ brew install shopify-cli
windows(RubyGems.org)
$ gem install shopify-cli
ステップ 3：Shopify CLI で認証する
shopify loginを使って、Shopify CLI と作業したいストアを接続します。
- ターミナルで
shopify login --store <DOMAIN>と入力し、<DOMAIN>はログインしたいストアです。
$ shopify login --store johns-apparel.myshopify.com
- ブラウザのウィンドウで、開発に使いたいストアに付随するアカウントにログインしてください。
ステップ 4：マーチャントのテーマコードをダウンロードする
マーチャントがテーマの GitHub リポジトリを持っていない場合は、ローカルで作業するためにテーマコードのコピーをダウンロードする必要があります。
$ shopify theme pull [ /path/to/your/theme ]
マーチャントのストアにあるテーマのリストにアクセスするには、このコマンドを使用します。オプションで、テーマを保存するローカルパスを指定することができます。
リストからテーマを選択すると、そのコンテンツが現在のフォルダまたは指定したフォルダにダウンロードされます。
ステップ 5：カスタマイズを行う
マーチャントテーマをダウンロードした後、テーマのコードに必要な変更を加えることができます。たとえば、ローカリゼーションのチュートリアルを使って、マーチャントテーマに複数の通貨や言語のサポートを追加したり、テーマの CSS を調整して外観を変更したりできます。
次のステップを参照して、その他の機能のチュートリアルをご覧ください。
ステップ 6：変更点のプレビュー
テーマに変更を加えた後、ブラウザでテーマと対話するために shopify theme serve を実行することができます。Shopify CLI は、接続しているストアの開発テーマとしてテーマをアップロードします。
このコマンドは、CSS やセクションのローカルな変更をホットリロードする URL を返すので、ストアのデータを使ってリアルタイムに変更をプレビューすることができます。このプレビューは、Google Chrome でのみ利用できます。
- ターミナルで、作業ディレクトリに移動します。
- 以下のコマンドでテーマをサーブします。
$ shopify theme serve
- Google Chrome で
http://127.0.0.1:9292に移動し、テーマのプレビューを開きます。
このコマンドを使用して、開発テーマのプレビューリンクとテーマエディタへのリンクを生成することもできます。
開発テーマは shopify logoutを実行すると破棄されます。マーチャントと進捗状況を共有する必要がある場合は、次のステップに進んでください。
ステップ 7：変更点の共有
マーチャントと変更内容を共有するには、未公開テーマとして開発しているテーマをマーチャントのストアにアップロードする必要があります。このコマンドは、テーマのオンラインストアエディタへのリンクとプレビューリンクリンクを返すので、マーチャントと共有できます。
$ shopify theme push
ステップ 8: 更新されたテーマの公開
マーチャントが変更を承認した後、テーマを公開してマーチャントのストアで実行できるようにします。まだストアに変更をプッシュしていない場合は、テーマを公開する前にプッシュする必要があります。
- 次のコマンドを入力します。
$ shopify theme publish
-
リストの中から公開したいテーマを選択します。
-
Yesを選択して、指定したテーマを公開することを確認します。
テーマが公開され、ストアのアクティブなテーマとなります。
次のステップ
-
Shopify のテーマを使ったビジネス構築について学ぶことができます。
-
テーマに機能を実装する方法を学ぶ。
Shopify の特定の機能を有効にしたり、テーマに機能を追加することができます。機能は以下のカテゴリに分類されます。 -
マーチャントのテーマにバージョン管理を導入することを検討します。
もしこのカスタマイズが同じクライアントのための最初の作業であるならば、Shopify GitHub インテグレーションを使用してマーチャントテーマにバージョンコントロールを導入し、継続的な作業を簡単に管理することを検討してください。 -
テーマの構築とカスタマイズに関するベストプラクティスを確認しましょう。
テーマをカスタマイズする際には、パフォーマンスやアクセシビリティを低下させていないことを確認する必要があります。また、デザインのベストプラクティスを念頭に置いて改良を加える必要があります。 -
テーマのコードをリンタリングする方法をご紹介します。
Liquid と JSON のリンターである Theme Checkを使用して、エラーを検出し、Shopify のテーマと Liquid のベスト プラクティスを実施します。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Author And Source
この問題について(【Shopify.dev和訳】Themes/Getting Started/Customize a theme), 我々は、より多くの情報をここで見つけました https://zenn.dev/unreact/articles/themes-getting-started-customize-a-theme著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol