makeshopのクリエイターモードで商品詳細ページを組むときは、公式のタグリファレンスに載っている変数タグを組み合わせます。数が多くて最初は戸惑いますが、「商品情報」「価格」「在庫」「購入」「販促」の5系統で捉えると一気に見通しがよくなります。この記事では、系統ごとにタグを一覧化し、そのまま使える実装レシピと、動かないときの切り分け手順までまとめます。

商品詳細ページのタグは5系統で覚える

結論から言うと、商品詳細ページで使うタグはほぼすべて $item. で始まります。あとは末尾が何かで役割が決まるだけです。まずは全体像を押さえてください。

5つの系統

• 商品情報：商品名・説明文・商品コード・カテゴリなど、ページの土台
• 価格：販売価格・通常価格・定価・税抜価格・ポイント
• 在庫：在庫数・売り切れ判定・在庫僅少判定
• 購入：数量欄・注文限度・バリエーション・カートURL
• 販促：セール判定・割引率・まとめ買い判定

値には3つのタイプがある

タグを使う前に、返ってくる値の型を理解しておく必要があります。ここを取り違えると、表示が崩れたり条件分岐が動かなかったりします。

「表示は _html、判定は数値、is_ は必ず条件分岐の中」。この3原則を覚えておけば、大半のつまずきは避けられます。

商品情報のタグ

商品名や説明文など、ページの土台になる情報です。

2つの商品コードの違い

system_code はmakeshopが自動で割り振るコード、original_code はショップ側で自由に設定できるコードです。お客様に伝える品番として使うなら、自社の管理番号に合わせられる original_code のほうが実務向きです。ただし未入力の商品では空になるため、表示する場合は条件分岐で切り替えておくと安全です。

商品説明が4つある理由

表示位置を分けるためです。たとえば1つ目を商品名のすぐ下のキャッチコピー、2つ目を画像の下の詳細説明、3つ目をスペック表の後の注意事項、4つ目を配送に関する案内、といった具合に役割を決めて運用します。テンプレート側で位置を固定しておけば、商品登録の担当者が迷いません。使わない項目は空のままで構いません。

カテゴリ情報を商品ページで使う

実務で重宝するのが base_category の3つです。商品詳細ページの中でカテゴリ名やIDを取得できるので、パンくずリストを作ったり、「この商品が属するカテゴリだけ表示を変える」処理を商品ページ側で書いたりできます。カテゴリページ側での出し分けはカテゴリページをカテゴリ別にデザインする方法で解説しています。

価格・ポイントのタグ

販売価格・通常価格・定価の違い

実際に購入できる金額が販売価格、割引前の自店価格が通常価格、メーカー希望小売価格にあたるのが定価です。二重価格表示は景品表示法に関わるため、「定価◯円のところ△円」と見せる場合は、その定価が実際に存在する価格かどうかを必ず確認してください。根拠のない比較対照価格は表示しない、が原則です。

税抜表示を併記する

総額表示が義務づけられているため、税込価格を主として表示したうえで、必要に応じて price_excluded_tax_html で税抜価格を併記します。BtoB向けのショップでは税抜を大きく見せたくなりますが、その場合も税込がすぐ分かる形にしておく必要があります。

金額で条件分岐する

「1万円以上なら送料無料の案内を出す」といった条件を書きたいときは、数値のみのタグを使います。_html は文字列として整形済みのため、大小の比較が正しく動きません。

<{if $item.price >= 10000}>
<p class="free-shipping">この商品は送料無料です</p>
<{/if}>

在庫のタグ

在庫表示のオン・オフを尊重する

商品ごとに「在庫数を表示するかどうか」を設定できます。テンプレートで無条件に在庫数を出すと、非表示にしたい商品でも数字が出てしまうため、is_stock_display で囲っておくのが正しい実装です。

売り切れと在庫僅少を出し分ける

<{if $item.is_soldout}>
<p class="soldout">申し訳ございません。完売しました</p>
<{else}>
  <{if $item.is_small_stock}>
  <p class="few">残りわずか（在庫 <{$item.stock_quantity}> 点）</p>
  <{/if}>
<{/if}>

売り切れ判定を先に書き、そうでない場合に在庫僅少を出す入れ子にしています。順番を逆にすると、売り切れの商品にも「残りわずか」が出てしまうことがあるため、判定の順序には注意してください。

在庫数をそのまま出すか迷ったら

在庫数の実数表示は諸刃です。「残り2点」は購入を後押ししますが、「残り387点」は売れていない印象を与えます。実数ではなく「残りわずか」というラベルだけを出す設計にしておくと、どの商品でも破綻しません。

購入・数量のタグ

quantity_idは消さない

数量欄の data-id に指定する quantity_id は、入力された数量をカートへ渡すための識別子です。デザイン調整のつもりで消すと、数量が正しく反映されなくなります。数量欄を触るときは、この属性だけは必ず残してください。

最小注文数を初期値にする

数量欄の初期値に $item.order_quantity_min を指定すると、まとめ買い前提の商品でも最初から必要な個数が入った状態になります。具体的な手順は数量欄に最小注文数を表示させる方法にまとめました。

バリエーションのある商品とない商品を分ける

<{if $item.has_option}>
<div class="option-area"><{$item.option_html}></div>
<{/if}>

has_option で分岐させておけば、単品商品のページに空の選択欄や見出しだけが残る事故を防げます。

セール・まとめ買いのタグ

セールバッジを出す

<{if $item.is_sale}>
<span class="badge-sale">SALE <{$item.sale_rate}>%OFF</span>
<{/if}>

バッジのデザインはCSS側で作り込み、テンプレートには判定と数字だけを書きます。この分担にしておくと、セールのたびにHTMLを触る必要がなくなります。

まとめ買い対象を目立たせる

is_bulk でまとめ買い割引の対象商品を判別できます。対象商品にだけ「まとめ買いでお得」の案内を出せば、単価の低い商品の客単価を上げる導線になります。

そのまま使える実装レシピ

実際の案件でよく作るパターンを4つ挙げます。自店のテンプレートに合わせてclass名を調整して使ってください。

レシピ1｜セール時だけ価格を二重表示にする

<{if $item.is_sale}>
<p class="price-old">通常価格 <{$item.original_price}>円</p>
<p class="price-now"><{$item.price_html}></p>
<{else}>
<p class="price-now"><{$item.price_html}></p>
<{/if}>

レシピ2｜在庫状況をラベルで見せる

<{if $item.is_stock_display}>
  <{if $item.is_soldout}>
  <span class="label-out">売り切れ</span>
  <{else}>
    <{if $item.is_small_stock}>
    <span class="label-few">残りわずか</span>
    <{else}>
    <span class="label-in">在庫あり</span>
    <{/if}>
  <{/if}>
<{/if}>

レシピ3｜売り切れ時に問い合わせへ誘導する

<{if $item.is_soldout}>
<a class="btn-contact" href="<{$item.contact_url}>">入荷のお問い合わせ</a>
<{/if}>

売り切れページをそのまま閉じさせるのはもったいないので、次の行動を用意します。入荷予定の問い合わせにつながれば、機会損失を回収できます。

レシピ4｜購入条件をまとめて表示する

<ul class="buy-condition">
<li>最小注文数：<{$item.order_quantity_min}>個</li>
<li>お一人様：<{$item.order_quantity_max}>個まで</li>
</ul>

カートに入れる前に条件が見えていれば、購入手続きの途中でエラーに遭う人が減ります。

動かないときの切り分け手順

タグが期待どおりに動かないときは、次の順序で確認すると原因にたどり着けます。

手順1｜条件分岐を外して素の値を出す

まず条件分岐なしで、変数タグだけを本文に置いてみます。値が表示されればタグは有効で、原因は条件式側にあります。何も出なければ、そのページで使えないタグを指定している可能性が高いです。

手順2｜真偽値タグを直接置いていないか確認する

is_ で始まるタグをそのまま書いても、意図した文字列は出ません。条件分岐の中で使う前提のタグです。

手順3｜ページの種類を確認する

商品詳細ページで使えるタグが、カテゴリページや検索結果ページでも使えるとは限りません。公式のタグリファレンスで、そのタグの対象ページを確認してください。

手順4｜商品側のデータが空でないか確認する

タグは正しくても、商品登録側で該当項目が未入力なら何も表示されません。製造元・原産国・独自商品コードなどは未入力の商品が多いため、表示する場合は条件分岐で囲っておくのが安全です。

手順5｜閉じタグとキャッシュを確認する

レイアウトが崩れたときは <{/if}> の閉じ忘れ、変更が反映されないときはブラウザキャッシュを疑います。スーパーリロードで確認してください。

制作会社の視点｜組む前に決めておくこと

タグの一覧を眺めると全部使いたくなりますが、商品ページに情報を詰め込むほど、肝心の「買う」導線が埋もれます。実務では、載せる項目を先に決めてからテンプレートを組みます。

判断の軸は「その情報がないと購入をためらうか」です。価格・在庫・送料・納期・注文条件はためらいに直結するので上部に置きます。製造元や原産国は、その商材で重視される場合だけ出せば十分です。

もうひとつ、未入力の商品を想定した作りにしておくことも重要です。運用が始まると、登録担当者が全項目を埋めるとは限りません。空欄でもレイアウトが崩れないよう、条件分岐で囲っておく。これを最初にやっておくと、後から「この商品だけ表示がおかしい」と呼ばれる回数が確実に減ります。

よくある質問（FAQ）

タグを書いたのに何も表示されません。

そのページで使えないタグを指定しているか、真偽値のタグを直接表示しようとしているか、商品側のデータが未入力かのいずれかです。条件分岐を外して素の値を出すところから切り分けてください。

価格に「円」やカンマが付きません。

数値のみを返すタグを使っているためです。表示用には _html が付くタグを使ってください。逆に、金額で条件分岐したい場合は数値のみのタグが必要です。

商品説明が4つもあるのはなぜですか？

表示位置を分けるためです。キャッチコピー、詳細説明、注意事項、配送案内のように役割を決めておくと、商品登録の運用が安定します。使わない項目は空のままで問題ありません。

在庫数を非表示にしたい商品がある場合はどうしますか？

$item.is_stock_display で在庫表示の設定を判定し、表示する設定の商品にだけ在庫数を出すようにしておけば、商品ごとの設定がそのまま画面に反映されます。

定価との二重価格表示をしても問題ありませんか？

実際に存在する価格を比較対照にする限り問題ありませんが、根拠のない価格を並べると景品表示法上の問題になります。定価や通常価格を出す場合は、その金額の裏付けを確認してから表示してください。

スマートフォン用テンプレートでも同じタグが使えますか？

使えます。ただしテンプレートが分かれている場合は、同じ実装を両方に入れる必要があります。片方だけ直して満足しないよう注意してください。

まとめ

makeshopの商品詳細ページのタグは、商品情報・価格・在庫・購入・販促の5系統で捉えると整理しやすくなります。押さえるべきは、表示用の _html と判定用の数値の使い分け、そして is_ で始まる真偽値のタグは条件分岐とセットで使うという2点です。ここさえ理解できれば、リファレンスを見ながら必要な表示を自力で組み立てられます。

スリーディープラスでは、makeshopのクリエイターモードを使った商品ページの改善や、テンプレートのカスタマイズのご相談を承っています。「タグの意味は分かったが、自店のテンプレートのどこを触ればいいか分からない」という場合は、お気軽にお問い合わせください。