Shopifyプラットフォームの最大の強みの一つは、無料・有料を問わず豊富なストアテーマが揃っていることです。しかし、レイアウトの微調整や色の変更が必要になる場合もあります。特に高度な変更を行うには、テーマのCSSファイルを編集する必要があります。また、カスタムCSSを使用して、ストアにインストールされているサードパーティ製アプリのデザインを編集することも可能です。最適な方法は何でしょうか？
オプション1：テーマエディターからカスタムCSSを追加する（推奨）
2023年2月、ShopifyはカスタムCSSを管理する新しい方法を導入しました。現在、これはShopifyが構築したテーマ（Dawnなど）の標準機能となっており、ストアのCSSを管理する上で推奨される方法です。
主なメリットは、シンプルなCSS管理、変更のライブプレビュー、テーマアップデートへの対応、そして組み込みのバリデーターと提案機能です。
テーマエディターからカスタムCSSを追加するには、以下の手順に従ってください：
- ストア管理画面 > 販売チャネル > オンラインストア > カスタマイズ
- の順に進みます。テーマ設定（左メニューの筆アイコン） > カスタムCSS
- を選択し、必要に応じてカスタムCSSを追加してライブプレビューを確認します。問題なければ保存をクリックしてください。
主なデメリットは文字数制限があることです。特定のセクションでは500文字、テーマ全体では1,500文字までとなっています。
オプション2：テーマデザイン（色、フォント、CSSなど）を編集する
実際にはCSSを編集する必要がなく、組み込みのテーマカスタマイザーを使用するだけで十分な場合もあります。使用するテーマによってオプションは異なりますが、主に色、フォントの種類、一部のレイアウトといった標準的な項目を変更できます。
一部のテーマには「カスタムCSS」というセクションがあり、そこにCSSを追加できます。これはテーマファイルのCSSを直接編集する（下記参照）のと実質的に同じで、テーマをアップデートすると内容が失われます。高度なテーマアップデーターを使用している場合を除き、注意が必要です。
オプション3：テーマ内のカスタムCSSを追加・編集する
CSSを編集する一般的な方法は、テーマコード内にある既存のCSSファイルを編集することです。通常、theme.scss.liquid、または新しいShopify 2.0テーマ（Dawnなど）ではbase.cssと呼ばれます。ストア管理画面 > オンラインストア > テーマ > アクション > コードを編集 > Assetsフォルダーから見つけることができます。
ファイルを開くと、任意のCSSを編集または追加できます。デメリットは、テーマを変更またはアップデートするとCSSが失われることです。カスタマイズ内容は「Custom CSS」などのセクションにまとめておき、新しいテーマが必要になった際にコピー＆ペーストできるようにしておくのが良い習慣です。
オプション4：カスタムCSSファイルを作成する
これはオプション2と非常に似ていますが、既存のCSSファイルを編集する代わりに、新しいファイルを作成する方法です。主な利点は、テーマを更新または変更しても、作成したCSSファイルを簡単に再接続できることです。
独自のCSSファイルを作成するには、ストア管理画面の オンラインストア > テーマ > アクション > コードを編集 > Assets フォルダに移動し、新しいアセットを追加をクリックします。ポップアップで空のファイルを作成を選択し、任意の名前（例：custom.css）を付けて保存します。
新しいCSSファイルを作成したら、カスタムCSSを追加できます。重要なのは、テーマからそのファイルを「呼び出し」、実際に適用させることです。そのためには、Layoutフォルダを開き、theme.liquidというファイルを開きます。以下のLiquidコードを<head>セクションに追加してください。「custom.css」の部分は、作成したカスタムCSSファイル名に置き換えてください。
テーマを更新または変更した場合は、このコードを再度 theme.liquidに追加する必要があります。ただし、カスタムCSSファイル自体はAssetsフォルダ内に保持されます。
オプション5：サードパーティ製アプリを使用してカスタムCSSを追加・編集する
最後の方法はサードパーティ製アプリのインストールが必要ですが、大きな利点があります。アプリに入力されたすべてのカスタムCSSは現在のテーマから独立しているため、テーマを自由に変更・更新してもCSSは維持されます。また、以下の例のように、インストールされている各テーマに対して個別にCSSを適用することも可能です。
これを行うアプリはいくつか存在し、中には無料のものもあります。欠点は、どのアプリもストアのパフォーマンスに多少の影響を与えることです。特にCSSが別のファイル経由で読み込まれる場合は注意が必要です。そのため、ストアにとってどの方法が最適か慎重に検討してください。
ストアのCSSカスタマイズやテーマ変更についてサポートが必要な場合は、お気軽にお問い合わせください。弊社のエージェンシーチームが喜んでお手伝いいたします。
