makeshopの数量欄に最小注文数を表示させる方法|クリエイターモードのカスタマイズ

makeshopで最小注文限度を設定しても、商品ページの数量欄には「1」が表示されたままになります。これを最小注文数に変えるには、クリエイターモードで数量欄のHTMLを編集し、変数タグ <{$item.order_quantity_min}> を初期値に指定します。この記事では、具体的な手順を画面ごとに分けて説明したうえで、テンプレートの形が違う場合の対応と、反映されないときのチェック方法までまとめます。

目次

最小注文数は「設定」と「表示」が別物

a toy shopping cart
Photo by Shutter Speed on Unsplash

結論から言うと、商品登録画面で最小注文限度を設定するのは「注文を受け付ける条件」の設定であり、商品ページの見た目は自動では変わりません。10個からしか買えない商品でも、数量欄には初期値として1が入っています。

何が起きるか|購入手続きの途中でエラーになる

この状態で起きるのが、お客様が数量1のままカートに入れ、購入手続きの途中でエラーに遭うという流れです。商品を選び、カートに入れ、住所や支払い方法を入力し終えたあとで「この商品は10個からです」と止められる。買う気になっていた人が最後で弾かれるため、離脱に直結します。

さらに厄介なのが、離脱した人は何も言わずに去るという点です。「最小注文数が分かりにくかった」というクレームは届きません。届かないから問題として認識されず、対策もされないまま放置されがちです。

解決の方向|最初から正しい数字を入れておく

やることはシンプルで、最小注文数を数量欄の初期値として表示させます。お客様は「この商品は10個単位なんだな」と画面上で理解できますし、そのまま何も変更せずカートへ進めます。エラーに遭う機会そのものがなくなる、というのがこの対応の本質です。

手順1|商品側で最小注文限度を設定する

まずは商品側の設定です。ここが空のままだと、後の工程で変数タグを入れても値が入りません。

設定する場所

商品登録・編集画面の詳細設定に「最小注文限度」という項目があります。ここに必要な数量を入力して保存します。同じ画面には「最大注文限度」もあり、1回の注文で購入できる上限を「無制限」または具体的な数量(1以上6桁以内)で指定できます。

この設定だけで何ができるか

最小数量に満たない注文は、この設定だけでエラーとして弾かれます。つまり「規定より少ない注文を成立させない」という機能としては、ここで完結しています。次に説明するクリエイターモードの作業は、あくまで「お客様に分かるように見せる」ための工程です。

先に対象商品を洗い出しておく

商品数が多いショップでは、どの商品に最小注文限度が設定されているかを先に一覧化しておくと、あとの動作確認が楽になります。設定済みの商品と未設定の商品を1つずつ用意して、両方でテストするためです。

手順2|クリエイターモードで数量欄に反映させる

a computer screen with a bunch of code on it
Photo by Chris Ried on Unsplash

ステップ1|編集前にコードを控える

クリエイターモードはHTMLを直接書き換える機能です。作業前に、これから触る商品詳細ページのコードを全選択してテキストファイルに保存してください。日付を入れて「detail_20260902_before.txt」のように残しておくと、戻したいときに迷いません。

ステップ2|商品詳細ページのHTMLを開く

ショップデザインからテンプレートの編集に進み、クリエイターモードを開きます。編集対象は商品詳細ページのHTML欄です。

ステップ3|数量入力欄を探す

コードの中から数量入力欄を記述している部分を探します。手がかりになるのは quantity という文字列です。エディタの検索機能で「quantity」を検索すると、該当箇所にたどり着けます。$item.quantity_id が指定されている input タグが目印です。

ステップ4|valueに変数タグを指定する

見つけた input タグの value に、最小注文限度の変数タグを指定します。

<input type="text" data-id="<{$item.quantity_id}>" value="<{$item.order_quantity_min}>">

ポイントは value の中身です。ここを固定値の「1」ではなく <{$item.order_quantity_min}> にすることで、商品ごとに設定した最小注文限度が自動で入ります。商品Aは10個、商品Bは3個といった具合に、テンプレート1つで商品ごとの値が反映される仕組みです。

ステップ5|保存して2種類の商品で確認する

保存したら、最小注文限度を設定した商品と、設定していない商品の両方をプレビューで開いてください。前者は設定した数字、後者は通常の初期値が入っていれば成功です。片方しか見ないと、未設定商品で数量が空になる不具合を見逃します。

テンプレートの形が違う場合の対応

watercolor wireframe sketches of website layouts
Photo by Hal Gatewood on Unsplash

ここまでの説明は、数量欄がテキスト入力欄(input type="text")で組まれている前提です。実際には、使っているデザインテンプレートによって形が違います。自店のコードに合わせて読み替えてください。

セレクトボックス(プルダウン)で組まれている場合

数量が「1・2・3…」の選択式になっているテンプレートでは、value を書き換えるだけでは初期選択が変わりません。この場合は、初期状態で選択される項目に selected を付ける必要があります。ただしプルダウンの選択肢自体が1から始まっている以上、最小注文数が10なら「1〜9を選べてしまう」状態は残ります。根本的に直すなら、テキスト入力欄へ変更するか、選択肢の生成部分から見直すことになります。

プラス・マイナスボタンが付いている場合

数量の増減ボタンをJavaScriptで制御しているテンプレートでは、初期値を変えても、マイナスボタンで1まで下げられてしまうことがあります。ボタン側の下限値も最小注文数に合わせて調整するか、下限に達したらボタンを無効にする処理を加えてください。

スマートフォン用テンプレートが分かれている場合

PCとスマートフォンでテンプレートが別になっている場合、片方を直しただけでは、もう片方は1のままです。ネットショップはスマートフォンからの購入が多数を占めるため、ここを見落とすと対策の効果がほとんど出ません。必ず両方に同じ変更を入れ、実機で確認してください。

反映されないときのチェックリスト

思ったとおりに動かないときは、原因を切り分けます。よくある症状ごとに、確認すべき順序をまとめました。

症状1|数量欄が「1」のまま変わらない

まず商品側に最小注文限度が入っているかを確認します。次に、編集した箇所が本当に表示中の数量欄かを疑ってください。テンプレートによっては数量欄の記述が複数箇所(PC用・スマホ用・カート内など)にあり、別の場所を直していることがあります。ブラウザの検証機能で該当のinput要素を確認すると確実です。

症状2|数量欄が空欄になる

最小注文限度が未設定の商品で起きやすい症状です。値が空のまま出力されているため、数量欄も空になります。未設定の商品が多いショップでは、条件分岐で「設定があるときだけ変数タグ、なければ1」とする組み方も検討してください。

症状3|カートに進むとエラーになる

表示は正しいのにカートで弾かれる場合は、data-id の指定が壊れていないかを確認します。<{$item.quantity_id}> を消してしまうと、入力した数量がカートへ正しく渡りません。編集前に控えたコードと見比べるのが早道です。

症状4|変更が画面に出ない

保存の押し忘れ、プレビューではなく公開ページを見ている、ブラウザキャッシュが残っている、のいずれかが大半です。スーパーリロード(Ctrl+F5)や別ブラウザで確認してみてください。

最大注文限度とあわせて設計する

最小注文限度とセットで用意されているのが $item.order_quantity_max(最大注文限度)です。在庫の都合や転売対策で1人あたりの購入上限を設けている場合、これも画面に出しておくと親切です。

変数タグ内容主な使い道
$item.order_quantity_min最小注文限度数量欄の初期値にする
$item.order_quantity_max最大注文限度「お一人様◯個まで」の表示に使う
$item.quantity_id数量入力欄のデータIDカートへ数量を渡すために必須
$item.stock_quantity在庫数「残りわずか」の表示に使う

数量欄の近くに「10個からご注文いただけます」「お一人様20個まで」といったテキストを添えると、より伝わります。数字が入っているだけでは、それが最小数量なのか単なる初期値なのか判断できないためです。商品詳細ページで使えるタグの全体像は商品詳細ページで使える変数タグまとめに整理しています。

制作会社の視点|このひと手間が効くショップ

yellow and white plastic box lot
Photo by Adrian Sulyok on Unsplash

このカスタマイズが特に効くのは、業務用・卸売・ノベルティなど、まとめ買いが前提の商材を扱うショップです。BtoBのショップでは1件あたりの単価が高く、購入手続きの途中で止まったお客様が戻ってこない損失は小さくありません。

サイト制作の観点で言えば、これは「エラーで教える」設計から「最初から間違えようがない」設計への変更です。フォームでもカートでも、後から怒られるより、入力前に条件が見えている画面のほうが確実に成果につながります。エラーメッセージを丁寧にする改善より、そもそもエラーを起こさせない改善のほうが効果は大きい、というのが実感です。

同じ考え方は、送料や納期の表示にも当てはまります。「注文してみないと分からない」情報が多いほど、お客様は不安になって手が止まります。カートに入れる前に判断材料をそろえておくことが、結果的にいちばん効くカート改善になります。

クリエイターモードそのものの全体像や移行の進め方は、makeshopのクリエイターモード移行ガイドで解説しています。

よくある質問(FAQ)

最小注文限度を設定するだけでは数量欄は変わりませんか?

変わりません。設定は注文の可否を判定するためのもので、商品ページの初期表示は1のままです。表示を変えるにはクリエイターモードでテンプレートを編集する必要があります。

商品ごとに違う最小注文数でも対応できますか?

できます。変数タグを使うため、テンプレートは1つのままで、商品ごとに設定した最小注文限度がそれぞれ反映されます。商品が増えても追加の作業は不要です。

最小注文限度を設定していない商品はどうなりますか?

通常どおりの初期値が表示されます。ただしテンプレートの組み方によっては空欄になることがあるため、実装後は設定済みの商品と未設定の商品の両方でプレビューを確認してください。

数量の増減ボタンで1まで下げられてしまいます。

増減ボタンはJavaScriptで制御されているため、初期値とは別に下限値の指定が必要です。ボタン側の処理で下限を最小注文数に合わせるか、下限に達したらボタンを押せなくする対応を入れてください。

スマホとPCの両方で対応が必要ですか?

テンプレートが分かれている場合は両方必要です。スマートフォンからの購入が大半を占めるショップでは、むしろスマホ側の対応のほうが重要になります。

クリエイターモードを使うと元のデザインに戻せなくなりますか?

編集前のコードを保存しておけば戻せます。ただしモード自体の切り替えには制約があるため、移行の判断は慎重に行ってください。バックアップを取ってから作業するのが鉄則です。

まとめ

makeshopで最小注文数を数量欄に表示させる手順は、商品側で最小注文限度を設定し、クリエイターモードの数量入力欄の value<{$item.order_quantity_min}> を指定する、の2段階です。作業自体は数分ですが、テンプレートの形(テキスト入力・プルダウン・増減ボタン)とスマホ側の対応漏れだけは必ず確認してください。

スリーディープラスでは、makeshopをはじめとしたネットショップのカスタマイズや、カート周りの改善のご相談を承っています。「注文の途中で離脱されている気がする」という場合は、お気軽にお問い合わせください。

最新情報をチェックしよう!

LET’S CONTACT

お問い合わせ

デザインと発信の力で、お客様の強みや想いを形にし、
成果につながるコンテンツを制作します。
「うちの場合はどうなる?」という段階からでも、どうぞお気軽にご相談ください。