{% stylesheet %} の CSS が2026年4月20日から、Shopify は各ページで実際に描画される section / block / snippet に関連する CSS だけを配信。全ページで全 CSS を読ませる従来方式をやめる。自己完結したテーマは変更不要だが、ファイルをまたいでクラスを参照しているとスタイルが欠落する。
{% stylesheet %} で書いた CSS は、どのページでも全部まとめて配信されていた。全 {% stylesheet %} の CSS を、内容に関係なく毎回のページ読み込みで配信。使われていない CSS も一緒に運ばれる。
そのページに描画される section / block / snippet に関連する CSS だけを配信。不要な CSS が減り、ページが軽くなる。
{% render %} で呼ぶ直接の子は、親と一緒に描画されるので、その子の CSS も一緒に配信される。問題になるのは「描画されていないファイルの CSS」を当てにしているケース。各ファイルの {% stylesheet %} が、同じファイル内の HTML 要素か、{% render %} で呼ぶ直接の子だけをスタイリングしている。→ すでに互換。何もしなくてよい。
あるファイルの {% stylesheet %} が定義したクラスを、無関係な別ファイルの HTML 要素が使っている。→ 定義元が描画されないページでスタイルが当たらない。これが探して直すべきパターン。
| CSS クラスの使われ方 | 4/20 以降の挙動 | 対応 |
|---|---|---|
| 同じファイル内の要素だけに適用 | そのまま動く | 不要 |
{% render %} で呼ぶ直接の子に適用 |
そのまま動く（親と一緒に配信） | 不要 |
| 無関係な別ファイルの要素に適用 | スタイル欠落の恐れ（定義元が未描画のページ） | 要修正 |
記事の説明を、典型的な構造に落とすと以下のようなイメージ（コードは理解のための模式例）。
section-promo が描画されないページ（例 ： product-card だけ出るページ）では .badge-sale の CSS が配信されず、赤字・太字が当たらない。これが記事の言う「他の無関係なファイルで使われるクラス」の問題。{% render %} で呼ぶ子」の中だけで使っていれば、そのファイルが描画される＝CSS も必ず一緒に配信されるので欠落しない。{% stylesheet %} で定義したクラス名が、定義元と違うファイルの HTML で使われていないかを全テーマファイルで確認。
該当クラスを利用元ファイルの {% stylesheet %} に移すか、{% render %} で親子関係に閉じる形へ作り替える。
商品・コレクション・カート等、定義元が描画されないページでスタイル崩れがないかをプレビューで点検。
2026年4月20日から Shopify 側で順次有効化。オプトインではなく挙動側が変わるので、それまでに棚卸し・修正を済ませておく。
配信対象は、そのページに描画される section / block / snippet に関連する CSS。描画されないファイルの {% stylesheet %} は積まれない。
{% render %} で呼ぶ直接の子は親と同時に描画されるため、その子の CSS も同梱される。親子に閉じた設計なら安全。
定義元と無関係なファイルでクラスを使い回している箇所が唯一の障害点。定義元が未描画のページで CSS が欠ける。
影響は「定義元が描画されないページ」に出るので、商品 / コレクション / カート / 検索など複数テンプレを実機プレビューで確認する。修正の具体手順は記事が案内する stylesheet subsetting のドキュメント参照（記事本文に手順の詳細・URL の記載なし）。
{% stylesheet %} のクラス定義と、HTML 側のクラス利用箇所を突き合わせ、定義元と利用元が別ファイルになっている箇所をリスト化する。{% render %} の直接の子で完結しているか」。完結していれば対応不要。{% render %} の子に閉じる」を設計ルール化。レビュー時にクロスファイル参照を弾く。{% stylesheet %} の CSS はページに描画される要素の分だけ配信される。{% render %} の子に閉じていれば変更不要。