Shopify テーマの特定の部分に CSS を読み込むにはどうすればよいですか?

Question

別のセクションを作成し、assets フォルダーから CSS を適用しようとしています。しかし、CSS を適用したいページに {{ 'style-section-block.css' |asset url | stylesheet_tag }} を置くと、他のセクションにも影響します。変更したい部分だけを入れていますが。

ページの一部を編集できるようにしたい

Answer 1

CSS の特定のセクションを適用する場合は、まずスタイルを設定するセクションに一意のクラスまたは ID を追加します。 CSS ファイルでこの一意のクラスまたは ID を使用した後、セクションのスタイルを設定できます。例は

です リーリー

"my-section" はセクションの一意のクラス名です。クラス名を使用してセクションにスタイルを追加できます。

リーリー

Shopify テーマに基づいています。現在のページ ハンドルまたはページ テンプレートに基づいて CSS ファイルを条件付きで使用できます。私の考えでは、テーマの「レイアウト」ファイルでこの「テンプレート」または「page.handle」変数を実行できます。 「theme.liquid」ファイルのことです。次のコードを「レイアウト」ファイルの「ヘッド」セクションに追加できます。

リーリー

「特定のテンプレート」をテンプレート名に置き換えるか、「特定のページ ハンドル」をページ ハンドル名に置き換えます。また、他のセクションから CSS リンクを削除します。