サイトでは単一のコンパイル済みCSSファイルを使用していますか、それともセクションごとに個別のファイルがありますか？

注目のリンク

1. カスタムCSSをテーマに追加する方法に関するShopifyドキュメント
2. テーマコードの編集に関するShopifyドキュメント
3. テーマの更新に関するShopifyドキュメント

役立つ動画

Shopify Academy動画：ストアをカスタマイズする

Shopify Academy動画：ストアをカスタマイズする

Company XYZのテーマでは、グローバルCSSとセクション固有のスタイルを組み合わせて使用しています。

メインのグローバルスタイルシートは Theme root > assets > base.css にあります。一部のセクションには、同じ assets フォルダ内に独自のスタイルシートもあります。これらのファイル名には、セクション名の前に section- が付いています。たとえば、section-features-bar.css のようになります。

更新に関する注意事項については、テーマの更新に関するShopifyドキュメントを参照してください。

カスタムスタイルを設定する場合は、可能な限りテーマエディターのカスタムCSSオプションを使用してください。テーマへのカスタムCSSの追加に関するShopifyドキュメントも参照してください。別のスタイルシートが必要な場合は、テーマの既存のCSSファイルを編集するのではなく、カスタマイズ用の新しい独立したCSSファイルを追加してください。コード編集の手順については、テーマコードの編集に関するShopifyドキュメントを参照してください。

注意

既存のテーマCSSファイルに加えた変更は、テーマの更新時に上書きされる可能性があり、継続的なサポートが難しくなる場合があります。

使用上の注意

1. グローバルスタイルから始める。 サイト全体に適用するスタイルには base.css を使用します。
2. セクションスタイルを確認する。 特定のセクションを調整する場合は、対応する section- スタイルシートを探します。
3. カスタマイズを分離して管理する。 今後のテーマ更新を容易にするため、テーマエディターのカスタムCSSまたは独立したスタイルシートを使用してください。