Shopifyテーマカスタマイズでページタイプごとに処理を分ける方法｜Liquidのrequest.page_typeで条件分岐を実装

requestオブジェクトとは？基本概念を理解しよう

ShopifyのLiquidテンプレート言語で使用できるrequestオブジェクトは、現在のHTTPリクエストに関する情報を提供する重要なLiquid変数です。
このオブジェクトを使用することで、現在のリクエストに基づいて動的にコンテンツを変更したり、特定の条件下でのみコードを実行したりできます。テーマのカスタマイズや条件付きコンテンツの表示に非常に有用です。

request.page_type は、現在表示しているページが「ホーム」「商品」「コレクション」「ブログ」「カート」などのどれに該当するのかを判別できます。
このようなページタイプを取得できることで、無駄なJavaScriptやCSSの読み込みを避けたり、特定のHTML構造を出し分けたりと、ページごとの最適な表示を実現するための土台ができます。

request.page_type 以外のプロパティも解説！

以下の記事で request.page_type 以外のプロパティについての解説もしています。合わせて一読ください！

request.page_typeで判別できるページタイプ一覧とその活用

ページ（パス）	値
トップページ（/）	index
コレクション一覧（/collections）	list-collections
コレクション（/collections/コレクションハンドル）	collection
商品（/products/商品ハンドル）	product
カート（/cart）	cart
ブログ（/blogs/ブログハンドル）	blog
ブログ記事（/blogs/ブログハンドル／記事ハンドル）	article
独自ページ（/pages/ページハンドル）	page
メタオブジェクトのエントリーをページ化（/pages/定義ハンドル/エントリーハンドル）	metaobject
アカウント（/account）	customers/account
会員登録（/account/register）	customers/register
ログイン（/account/login）	customers/login
住所を変更する（/account/addresses）	customers/addresses
注文履歴（/account/order）	customers/order
アカウントを有効にする（メール文から確認するページ）	customers/activate_account
パスワードをリセットする（メール文から確認するページ）	customers/reset_password
検索（/search）	search
法務関連	policy
エラー	404
ギフトカード	gift_card
パスワード（ストア公開前のみ表示されるページ）	password

これらの情報をもとに、たとえば以下のような処理を記述できます。

• トップページのみにカルーセルスライダーを表示
• 商品ページだけに関連商品セクションを表示
• カートページでは余計なバナーやスクリプトを読み込まないようにする
• 検索結果ページではフィルターUIを追加する

これにより、不要な読み込みを抑えて表示速度を向上させたり、ページ固有のUX向上を実現できるようになります。

ページごとに処理を切り替えるLiquidコードの考え方

request.page_typeは、基本的にif文やcase文で使うことが多いです。
Liquidでは単純な条件分岐での記述がしやすく、複雑なテンプレート構造をわかりやすく保つのに役立ちます。

たとえば「トップページだけに特定のセクションを表示したい」場合は、if request.page_type == 'index'といった記述を行います。
このように、ページタイプを条件に処理を制御することで、テンプレートの再利用性を高め、ロジックをすっきり保てます。

また、Liquidは変数のスコープや評価順が比較的直感的なので、他のオブジェクトと組み合わせても使いやすいのが特徴です。
特に、templateやsection.settingsと併用すれば、より高度な出し分けも可能です。

実装例：ページタイプごとに条件分岐をして処理を行う

Liquid

{%- case request.page_type -%}
    {%- when 'list-collections' -%}
        {%- comment -%} コレクション一覧 {%- endcomment -%}

    {%- when 'collection' -%}
        {%- comment -%} コレクション {%- endcomment -%}
    
    {%- when 'product' -%}
        {%- comment -%} 商品 {%- endcomment -%}
    
    {%- when 'cart' -%}
        {%- comment -%} カート {%- endcomment -%}
    
    {%- when 'blog' -%}
        {%- comment -%} ブログ {%- endcomment -%}
    
    {%- when 'article' -%}
        {%- comment -%} ブログ記事 {%- endcomment -%}
    
    {%- when 'page' -%}
        {%- comment -%} 独自ページ {%- endcomment -%}
    
    {%- when 'metaobject' -%}
        {%- comment -%} メタオブジェクトのエントリーをページ化 {%- endcomment -%}
    
    {%- when 'customers/account' -%}
        {%- comment -%} アカウント {%- endcomment -%}
    
    {%- when 'customers/register' -%}
        {%- comment -%} 会員登録 {%- endcomment -%}
    
    {%- when 'customers/login' -%}
        {%- comment -%} ログイン {%- endcomment -%}
    
    {%- when 'customers/addresses' -%}
        {%- comment -%} 住所を変更する {%- endcomment -%}
    
    {%- when 'customers/order' -%}
        {%- comment -%} 注文履歴 {%- endcomment -%}
    
    {%- when 'customers/activate_account' -%}
        {%- comment -%} アカウントを有効にする {%- endcomment -%}
    
    {%- when 'customers/reset_password' -%}
        {%- comment -%} パスワードをリセットする {%- endcomment -%}
    
    {%- when 'search' -%}
        {%- comment -%} 検索 {%- endcomment -%}
    
    {%- when 'policy' -%}
        {%- comment -%} 法務関連 {%- endcomment -%}
    
    {%- when '404' -%}
        {%- comment -%} エラー {%- endcomment -%}
    
    {%- when 'gift_card' -%}
        {%- comment -%} ギフトカード {%- endcomment -%}
    
    {%- when 'password' -%}
        {%- comment -%} パスワード {%- endcomment -%}
    
    {%- else -%}
        {%- comment -%} TOPページ {%- endcomment -%}

{%- endcase -%}

上記のコードはcase文で記述してます。

他の方法と比較したメリット・注意点

ページタイプによる条件分岐には、他にも以下のような方法があります。

• URLパスを解析して判別
• 特定のセクションID・ハンドルによる分岐

これらと比べて、request.page_type は「Shopify側で定義された論理的なページ分類」をそのまま使えるという点で、より信頼性が高く、テーマ更新にも柔軟に対応できます。

request.page_type の注意点

ただし注意点として、以下のような点があります。

• request.page_type は動的セクションやヘッドレス環境では正常に動作しない場合があ
• カスタムテンプレート名での詳細な識別には対応していな
• request.page_type だけで細かな制御をするのは難しい場合もあ

そのため、他のLiquidオブジェクトや条件文と組み合わせて使用するのがベストです。設計初期の段階でページタイプ別のロジックを想定し、柔軟な構造で組んでおくことが重要です。

実務での応用と設計のベストプラクティス

実務では、テーマをできるだけ再利用可能な構造にしておくことが求められます。
特に開発現場では「変更が容易」「保守しやすい」コードが重視されるため、処理の分岐がテンプレート内で複雑にならないように整理することが大切です。
ベストプラクティスとしては、以下のようなポイントが挙げられます。

• request.page_typeで最上位のページ分類を判別し、共通処理を整理する
• テンプレート全体ではなく、セクション単位で出し分けを意識する
• 条件分岐が複雑になる場合は、Snippetsを使ってコードを分割する
• スタイルやスクリプトの読み込みも含めて、可能な限りページごとに最適化する

こうした設計を意識することで、コードの見通しが良くなり、運用フェーズでの改修やABテストの導入もスムーズになります。

まとめ

いかでしたでしょうか？
今回の記事では、ShopifyテーマのLiquidカスタマイズにおける request.page_type を使ったページタイプごとの処理分岐について詳しく解説しました。

今回のポイントをまとめますと、次のとおりです。

他にもShopifyに関する技術や実用テクニックを随時発信しています。
「役に立った」と思っていただけた方は、ぜひブックマークやSNSでのシェアをお願いいたします！

最後までお読みいただきありがとうございました！