【クリエイターモード】特定の商品詳細ページにのみ表示内容を切り替える方法を教えてください。 – makeshop よくある質問

クリエイターモードの商品詳細ページでは、変数タグ <{$page.id}> を使用することで、
「システム商品コードが一致する商品だけ」「一致しない商品だけ」「複数の商品」といった条件で、
表示するHTML・CSS・メタ情報などを切り替えることができます。

商品ごとのキャンペーン表記、特定商品のみの説明文、noindex設定、配送に関する注意書きなど、
商品単位で見せ方を変えたい場面で活用できます。

ご参考）
商品ごとに異なる情報は、商品説明などに記載して表示させることも可能です。下記もあわせてご参照ください。
商品詳細ページに、商品ごとに異なるサイズ表やバナーを表示させることはできますか。

はじめに：バックアップのお願い

※編集の際は、デザインセットのコピーボタンをクリックし、バックアップを保管したうえで作業してください。
【クリエイターモード】デザインセット（ソースコード）をバックアップする方法を教えてください。

「システム商品コード」とは

システム商品コードは、商品を登録した際にシステムが自動的に割り振る商品を特定するコードです。変更することはできません。

一方、「独自商品コード」はショップが任意に設定できるコードで、別物です。
<{$page.id}> で判定に使用するのはあくまで「システム商品コード」の方ですのでご注意ください。

システム商品コードの確認方法

商品管理 / 商品一覧 / 商品編集にて「システム商品コード」を確認できます。
数値（例：000000000010）がそれに該当します。

基本の分岐パターン

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細　「HTML」欄
切り替えたい要素を囲むように、以下の記述を追加してください。

1. 指定した商品ページにのみ表示する

<{if $page.id == "000000000010"}>
000000000010の商品ページにのみ表示する内容
<{/if}>

2. 指定した商品ページと、それ以外の商品ページで表示内容を分ける

<{if $page.id == "000000000010"}>
000000000010の商品ページにのみ表示する内容
<{else}>
それ以外の商品ページに表示する内容
<{/if}>

3. 指定した商品ページでは表示しない（以外に表示する）

<{if $page.id != "000000000010"}>
000000000010以外の商品ページに表示する内容
<{/if}>

4. 複数の商品ページにのみ表示する（OR：||）

<{if $page.id == "000000000010" || $page.id == "000000000011"}>
000000000010と000000000011の商品ページにのみ表示する内容
<{/if}>

5. 複数の商品ページと、それ以外で表示内容を分ける

<{if $page.id == "000000000010" || $page.id == "000000000011"}>
000000000010と000000000011の商品ページに表示する内容
<{else}>
それ以外の商品ページに表示する内容
<{/if}>

6. 指定した複数の商品ページを除外する（AND：&&）

<{if $page.id != "000000000010" && $page.id != "000000000011"}>
000000000010と000000000011以外の商品ページに表示する内容
<{/if}>

<{else}> ブロックは不要であれば省略できます。また、比較する商品を3つ以上に増やしたい場合は、同じ形式で || や && をつなげていただけます。

応用例

応用例1：特定の商品ページだけCSSを切り替える

条件分岐の中に <style> を記述することで、その商品ページにだけ適用されるスタイルを定義できます。既存のCSSを上書きする必要があるときは、!important を併用してください。

<{if $page.id == "000000000010"}>
<style type="text/css">
  body { background-image: url("背景画像URL") !important; }
  .item-name { color: #c00 !important; }
</style>
<{/if}>

応用例2：特定の商品ページだけ noindex を設定する

検索エンジンにインデックスさせたくない商品ページがある場合、head内に <meta name="robots" content="noindex"> を条件付きで出力します。

<{if $page.id == "000000000010"}>
<meta name="robots" content="noindex">
<{/if}>

metaタグは「商品詳細」＞「HTML」欄の、<{$makeshop.head}> より後の位置に追記してください。

応用例3：特定の商品ページでは「カートに入れる」ボタンを非表示にする

プレゼント専用商品やお知らせ用ダミー商品など、購入導線を出したくない商品がある場合は、カート周辺のブロックを条件分岐で囲みます。

<{if $page.id != "000000000010"}>
  <!-- 通常の「カートに入れる」エリア -->
<{else}>
  <p>この商品はお問い合わせフォームよりご連絡ください。</p>
<{/if}>

応用例4：会員グループとの組み合わせ（AND）

「特定の商品ページ」かつ「特定の会員グループでログインしている」ときだけ表示したい、といった条件も記述できます。

<{if $page.id == "000000000010" && $member.group_id == "1"}>
会員グループ1のお客様にのみ、この商品ページで表示される案内
<{/if}>

makeshopサポート：クリエイターモードで"会員グループ別"に異なる情報を表示させたい

応用例5：ログイン有無との組み合わせ

<{if $page.id == "000000000010" && $member.is_logged_in}>
ログイン中のお客様にのみ、この商品ページで表示される案内
<{/if}>

makeshopサポート：クリエイターモード「ログイン／ログアウト時の表示」を切り替えて設定したい

記述時のポイント

システム商品コードは必ずダブルクォート（"）で囲んでください。
比較演算子は、完全一致が ==、不一致が != です。代入の = ではありません。
複数条件をつなぐときは、OR：|| / AND：&& を使用します。半角全角の混在に注意してください。

うまく表示されないときのチェックポイント

「独自商品コード」を入れていないか（使用するのは12桁の「システム商品コード」です）
ダブルクォートが半角になっているか（全角の " では動作しません）
閉じタグ <{/if}> が漏れていないか
条件分岐をネストしている場合、内側と外側の <{if}> <{/if}> の対応が合っているか
条件分岐の外でスペルミス・HTMLのタグ閉じ忘れなどのエラーがないか

運用上の注意

システム商品コードは商品を削除・再登録すると新しい値に置き換わります。商品を削除された際は、<{$page.id}> で指定していた箇所のシステム商品コードも合わせて見直してください。キャンペーン用などで一時的に非表示にしたい商品は、削除ではなく「ショップに表示しない」設定のご利用をおすすめします。

参考（変数タグリファレンス）

全ページ共通タグ一覧（$page.id／$member.is_logged_in／$member.group_id）
商品詳細ページタグ一覧

【クリエイターモード】商品詳細ページをカテゴリー別にデザインできますか。