ShopifyのカスタムLiquidとカスタムCSSの使い方｜条件分岐と適用範囲を解説

カスタムLiquidとカスタムCSSの違い

最初に、それぞれが担当する範囲を分けて考えます。LiquidはHTMLを出力する前の判断、CSSは出力されたHTMLの見た目の調整を担当します。

カスタムLiquidでできること

カスタムLiquidでは、HTMLの追加、商品やショップ情報の出力、ifによる条件分岐ができます。ページによって要素を「出力する・しない」を切り替えられることが大きな特徴です。

• トップページだけに案内を表示する
• 商品ページだけに共通メッセージを表示する
• 特定の固定ページだけにHTMLを追加する

カスタムCSSでできること

カスタムCSSは、色、余白、文字サイズ、配置などを変更する機能です。Liquidオブジェクトを参照したり、ページの種類によってサーバー側の出力を変えたりはできません。

display: none;で見えなくする方法はありますが、HTML自体は出力されています。条件に合わないページで要素そのものを出力したくない場合は、Liquidの条件分岐を使います。

役割を組み合わせて使う

実務では、Liquidで必要なHTMLだけを出力し、カスタムCSSでその見た目を整える組み合わせが基本です。片方ですべてを解決しようとせず、構造・条件とデザインを分担させます。

カスタムLiquidを追加できる場所

追加場所はテーマによって異なります。現在利用しているHorizonと、他テーマで確認するときの考え方を分けて整理します。

Horizonではヘッダー・フッターへ追加できる

現在利用しているHorizonでは、テーマエディターのヘッダー領域やフッター領域へカスタムLiquidを追加できます。ここは全テンプレートで共有される領域です。

Shopify公式ヘルプでも、ヘッダーへ追加したカスタムLiquidブロックはホーム、商品、その他のページに表示され、ヘッダーとフッターがストア全体で共有されることが説明されています。したがって、ページを限定したい場合はLiquid側で条件を付けます。

テンプレート本文にも追加できる

テーマエディター中央のテンプレート領域へ「カスタムLiquid」セクションを追加する方法もあります。この場合は、選択中のテンプレートに配置されます。同じテンプレートを使うページには共通して表示される点に注意してください。

他のテーマは追加メニューを確認する

Shopify Theme Store向けの現在の要件では、セクション対応テンプレートで使えるカスタムLiquidセクションが求められています。ただし、ヘッダーやフッターの中へ「ブロック」として追加できるかはテーマの実装次第です。

• 「オンラインストア → テーマ → カスタマイズ」を開く
• テンプレート領域の「セクションを追加」でカスタムLiquidを探す
• ヘッダーまたはフッターを開き、「ブロックを追加」にカスタムLiquidがあるか確認する

ヘッダー・フッターに追加候補がなければ、テンプレート本文へ置くか、テーマコード側へ専用ブロックを実装します。別テーマでもHorizonと同じ場所にあるとは限りません。

request.page_typeでページの種類を条件分岐する

request.page_typeは、現在表示しているページの種類を返すShopify Liquidの値です。トップページはindex、商品ページはproduct、固定ページはpageになります。

トップページまたは商品ページに表示する

質問にあった「トップページまたは商品ページ」の条件は、次のように書けます。条件に一致したときだけ、案内のHTMLが出力されます。

{% if request.page_type == 'index' or request.page_type == 'product' %}
  <p class="site-message">トップページと商品ページに表示する案内です。</p>
{% endif %}

商品ページだけに表示する

商品ページだけに配送案内などを表示する場合は、productだけを比較します。

{% if request.page_type == 'product' %}
  <p class="product-notice">商品ページ共通のお知らせです。</p>
{% endif %}

elseで表示内容を分ける

elseを使うと、条件に一致しないページの内容も指定できます。

{% if request.page_type == 'index' %}
  <p>トップページをご覧いただきありがとうございます。</p>
{% else %}
  <p>オンラインストアをご利用いただきありがとうございます。</p>
{% endif %}

固定ページaboutだけを判定する

固定ページはすべてrequest.page_type == 'page'です。aboutだけに絞るには、ページの種類に加えてpage.handleを確認します。

page.handleを組み合わせる

固定ページのURLが/pages/aboutなら、一般的なハンドルはaboutです。次の条件でaboutページだけに表示できます。

{% if request.page_type == 'page' and page.handle == 'about' %}
  <p class="about-message">aboutページだけに表示する内容です。</p>
{% endif %}

ハンドルは管理画面で確認する

ページ名が「About」でも、URLが/pages/about-usなら比較する値はabout-usです。「オンラインストア → ページ → 対象ページ → 検索結果」を開き、URLハンドルを確認します。

ページタイトルを変更しても、既存のハンドルは自動で変わらない場合があります。タイトルではなく、実際のURLを基準にしてください。

複数の固定ページを対象にする

aboutとcontactの両方に同じ内容を表示する場合は、固定ページであることを確認したうえで、ハンドルをorでまとめます。読み違いを防ぐため、丸括弧を付けると意図が明確です。

{% if request.page_type == 'page' %}
  {% if page.handle == 'about' or page.handle == 'contact' %}
    <p>aboutとcontactに共通する案内です。</p>
  {% endif %}
{% endif %}

共通ヘッダー・フッターで条件分岐を使う

Horizonの共通領域へカスタムLiquidを置くと、一つの設定を複数ページで管理できます。ページ別の表示ルールをLiquid内へまとめられるため、同じ案内を各テンプレートへ重複配置せずに済みます。

ヘッダーでは重要な共通案内に使う

送料無料、期間限定キャンペーン、特定商品ページへの補足など、ページ上部で伝えたい情報に向いています。ただし、長い本文やページ固有の主要コンテンツは、テンプレート領域へ置いた方が編集構造を把握しやすくなります。

フッターではページ固有の補足に使う

フッター直前に特定ページだけCTAや補足リンクを表示する用途にも使えます。ヘッダーと同様に全ページ共有なので、条件を付け忘れるとストア全体へ表示されます。

テーマエディターのプレビューだけで判断しない

保存前に、トップページ、商品ページ、aboutページ、条件に含めていないページを切り替えて確認します。条件に一致する場所で表示され、対象外ではHTML自体が出力されないことを確認してください。

セクション単位のカスタムCSSを使う

Shopifyではテーマ全体のカスタムCSSに加え、対応する各セクションの設定画面にもカスタムCSSを入力できます。用途が一つのセクションに限られるなら、セクション側へ書くと影響範囲を管理しやすくなります。

h2指定も対象セクションへスコープされる

セクション設定のカスタムCSSは、そのセクションへスコープされます。そのため、次のように単純なh2セレクターを書いても、基本的には入力したセクション内の見出しが対象です。

h2 {
  color: #0a5c36;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}

Shopify側がセクションを識別する仕組みを使って適用範囲を限定するため、別セクションのh2へ同じ指定が広がりにくい構成です。

テーマ全体のCSSとは影響範囲が異なる

「テーマ設定 → カスタムCSS」へ同じh2指定を書くと、テーマ全体が対象になります。複数の場所で共通利用するデザインはテーマ全体、特定セクションだけの微調整はセクション側、と分けると安全です。

使用できない記述と文字数に注意する

Shopify公式ヘルプでは、セクション単位のカスタムCSSに使えるat-ruleが@media、@container、@layer、@supportsへ限定されることや、セクションを包むshopify-sectionのID・クラスを直接対象にできないことが案内されています。

入力欄の制限内で収まらない大きなCSSや、複数セクションで共有する設計は、テーマのCSSファイルへまとめる方が保守しやすくなります。

カスタムLiquidとCSSを安全に使い分ける

便利な入力欄ですが、追加場所と役割を決めずに記述を増やすと、どこから出力されているか分かりにくくなります。次の基準で整理します。

表示条件はLiquidへ書く

ページ種類、商品、コレクション、固定ページのハンドルなど、HTMLを出すかどうかの判断はLiquidへ書きます。CSSで非表示にする方法を表示条件の代わりにしません。

局所的な見た目はセクションCSSへ書く

一つのセクションだけで完結する色や余白は、そのセクションのカスタムCSSへ置きます。ストア全体の共通ルールはテーマ設定またはCSSファイルへ分けます。

複製テーマで表示範囲を確認する

• 条件に一致するページで表示される
• 条件外のページでは表示されない
• デスクトップとモバイルで崩れない
• テーマエディターと実際のプレビューで結果が一致する

確認後に本番テーマへ同じ内容を反映すれば、共通領域を使いながら影響範囲を限定できます。

まとめ

ShopifyのカスタムLiquidとカスタムCSSを使うときのポイントをまとめます。

• LiquidはHTMLの出力と条件分岐、CSSは見た目を担当する
• Horizonのヘッダー・フッターは共通領域なので、ページ限定には条件分岐を使う
• request.page_typeでトップ・商品・固定ページなどを判定できる
• aboutページはrequest.page_type == 'page'とpage.handle == 'about'を組み合わせる
• 他テーマではテンプレートのセクションと、ヘッダー・フッターのブロックを分けて確認する
• セクション側のカスタムCSSは、そのセクションへスコープされる

共通ヘッダーやフッターへ一度記述し、Liquidで表示先を制御できる点は非常に便利です。条件分岐とCSSの適用範囲を理解し、複製テーマで確認しながら活用してください。

参考：Shopify Liquidのrequestオブジェクト、セクションのカスタマイズ、カスタムCSSの追加