テーマを拡張する
Shopifyテーマでは、多くの設定とカスタマイズオプションが提供されています。それでも、テーマをさらにカスタマイズしたいことがあるでしょう。たとえば、ストアで商品レビューを表示したい場合、アプリをインストールして表示することができます。テーマの機能を拡張する場合は、カスタムコードやアプリを使用して拡張できます。
カスタマイズされたHTMLまたはLiquidを追加する
一部のテーマでは、設定を含むテンプレート、セクション、ブロックにレンダリングされるHTMLのスニペットまたはLiquidコードを追加できる設定を提供しています。これらの設定により、カスタムコードをオンラインストアに安全に追加することができます。テーマコードを直接編集する必要がないので、利用しているテーマがアップグレードの対象外となってしまうリスクを回避できます。
これらの設定を使用して、以下のタスクを実行できます。
- カスタムLiquidセクションを使用して、あなたのビジネスにとって合理的な場所にLiquid変数を挿入します。たとえば、商品ページに配送ポリシーを掲載することができます。
- カスタムLiquidセクションを使用して、アプリとテーマを統合するために必要なコードを追加します。
利用しているテーマでカスタマイズされたHTMLやLiquidオプションがあるかどうかについては、テーマのドキュメントを参照してください。
Liquid設定では、制限付きのLiquidオブジェクトとタグにのみアクセスできます。Liquid設定で使用できるオブジェクトとタグについては、Shopify.devでLiquid設定のドキュメントを参照してください。
カスタムCSSを追加する
カスケーディングスタイルシート (CSS) は、テーマ内の要素の表示方法を変更し、一度に複数のページの外観を管理することができます。カスタムCSS機能を使用することで、テーマに組み込まれている設定以外のカスタマイズが可能です。カスタムCSSは、テーマ全体、またはテーマ内のテンプレートの特定のセクションに追加することができます。
CSSをカスタマイズするには、CSSとHTMLの両方に精通している必要があります。テーマをカスタマイズする前に、利用できるサポートのレベルを必ずご確認ください。
アプリをインストールする
アプリをインストールして、テーマに機能を追加して拡張できます。アプリはShopify App Storeで見つけることができます。
オンラインストアアプリは、以下の方法でテーマと統合できます。
アプリブロックとして: アプリブロックを使用して、テーマ内の使用したい場所にアプリ機能を追加することができます。テーマエディタを使用して、アプリブロックの追加、削除、およびカスタマイズを行うことができます。
埋め込みアプリとして: 埋め込みアプリは、アプリが提供する要素で、テーマ上にオーバーレイとしてフロート表示されます。お客様に非表示のままオンラインストアにコードを追加することもできます。テーマエディタを使用して、埋め込みアプリを有効化、無効化、およびカスタマイズできます。
テーマコードを変更する: 一部のアプリでは、テーマコードに直接コードを入力し、テーマに機能を追加します。アプリ設定を使用して、またはテーマエディタを使用してアプリをカスタマイズすることができます。
テーマコードの編集
テーマコードを編集して、オンラインストアに細かい変更を加えることができます。テーマファイルには、Shopifyのテンプレート言語であるLiquid、HTML、CSS、JSON、JavaScriptが含まれています。HTMLとCSSを理解していて、Liquidについての基本的な知識がある場合のみ、テーマコードを編集してください。
Shopifyの無料テーマを使用している場合、Shopify サポートは、テーマコードへの特定のカスタマイズを行うお手伝いをします。可能なカスタマイズのリストについては、テーマのドキュメントを参照してください。テーマのサポートについて詳しくはこちらをご覧ください。
以下の方法でテーマコードを編集できます。
- 管理画面で直接コードを編集します。
- Shopify CLIやShopify GitHub統合のような開発ツールを使用して、テーマのローカル編集を行います。