【徹底解説】Shopify アプリ「シンプル量り売り｜入力寸法・重量での価格自動計算・追加料金」でできること

【徹底解説】Shopify アプリ「シンプル量り売り｜入力寸法・重量での価格自動計算・追加料金」でできること

生地を 10cm 刻みで売りたい、床材を必要な面積ぶんだけ売りたい、コーヒー豆をグラムで売りたい。実店舗では当たり前の「量り売り」も、Shopify のネットショップでやろうとすると、とたんに難しくなります。Shopify の商品は、バリエーション 1 つにつき価格を 1 つしか持てないからです。

この記事では、当社 UnReact が開発した Shopify アプリ「シンプル量り売り｜入力寸法・重量での価格自動計算・追加料金」を、管理画面の画面・タブ・設定項目を 1 つずつたどりながら解説します。インストールの手順だけでなく、設定を変えると商品ページの何が変わるのか、画面には出てこない制約は何か、といった運用で効いてくる部分まで書いています。

導入を検討している方は「メリット」「デメリット」「料金プラン」を、すでに使っている方は「各画面の説明」から読み進めてください。

シンプル量り売りとは

シンプル量り売りを一言でいえば、「量を入力する欄」と「その量から決まる請求額」を商品ページとチェックアウトの両方に用意するアプリです。サイズ違いのバリエーションを並べる代わりに、計算のルールを 1 本持たせます。

動き方を、マーチャント側とお客様側に分けて見ると分かりやすくなります。

1. マーチャントは管理画面で「計算ルール」を作り、それを商品に割り当てる
2. ルールの付いた商品のページでは、アプリのブロックが入力欄と金額を出す
3. お客様がチェックアウトへ進むと、Shopify Functions（Cart Transform）が明細のサイズを読んで価格を出し直し、その額で請求する

肝心なのは 3 つ目です。商品ページの金額は、お客様に見せるための試算にすぎません。請求に使う額は、ブラウザから届いた数字を信じず、Shopify の側で毎回作り直しています。お客様が動かせるのはサイズの値だけなので、金額だけを書き換えて安く買う、ということはできない作りです。

相性がよいのは、長さや面積に比例して値段が決まる商品です。たとえば次のような売り方が当てはまります。

• 手芸店の生地 … 10cm 刻みで切り売りし、値段は 1m あたりで決める
• オーダーのカーテンやブラインド … 幅と丈の組み合わせごとに、サイズ表で値段が決まっている
• フローリング材やタイル … 施工する面積を入れてもらい、ケースの数に切り上げて出荷する
• 材木・ロープ・ホース・チェーン … 必要な長さでカットして届ける
• 茶葉・ナッツ・コーヒー豆 … グラム単位で量って売る
• 看板やバナーの製作 … 縦横の面積で見積もる

シンプル量り売りのメリット

バリエーションを 1 つも増やさずに済む

サイズごとの価格をバリエーションで表すと、「1m」「1.1m」「1.2m」…と組み合わせが膨らみ、価格改定のたびに全部を書き換えることになります。シンプル量り売りでは、商品にはルールを 1 本割り当てるだけです。単価を変えたいときはルールを 1 か所直せば、割り当てた全商品に反映されます。

3 通りの価格の決め方から選べる

「単価 × 量」の単純な計算だけでなく、たくさん買うほど単価が下がる「数量帯別の単価」、幅と丈の組み合わせで値段が決まっている「価格表」も選べます。オーダーカーテンのように、すでに紙のサイズ表で値段を決めているストアは、その表を貼り付けるだけで移行できます。

改ざんされない価格で請求できる

前の章で書いたとおり、請求額はチェックアウトの時点で Shopify 上で計算し直されます。テーマの JavaScript だけで価格を作る方法では、この保証は得られません。量り売りの価格を自作しようとしてつまずくのは、たいていここです（後半の「コードで自作する場合」で詳しく説明します）。

管理画面と商品ページが日本語で使える

管理画面は日本語を含む 20 言語に対応しています。商品ページに出る案内文（合計、カートに追加、入力範囲の表示など）も、お客様が見ている言語に合わせて 20 言語で表示されます。坪や匁のような日本の単位も選べます。

シンプル量り売りのデメリット

導入前に知っておいてほしい制約も、正直に書いておきます。どれも Shopify 側の仕様に由来するもので、アプリの設定では回避できません。

• 在庫は量ではなく行数で減ります。 2.5m の注文でも、Shopify の在庫は 1 しか減りません。本数を 3 にした場合は 3 減ります。生地をロール単位で在庫管理しているなら、受注後に残量を調整する運用が必要です。
• 定期購入の商品には使えません。 販売プラン（selling plan）が付いた行には、Shopify が価格の変更を許していません。
• 注文編集では金額が計算し直されません。 管理画面の注文編集で数量やサイズを変えても、価格は元のままです。
• 送料はサイズに連動しません。 送料は商品に設定した重量と配送設定で決まります。10m の注文でも 1m の注文でも、同じ重量として扱われます。
• カートの価格を変える別のアプリとは、先に入れた方が優先されます。 バンドル・セット販売のアプリなど、同じ仕組み（Cart Transform）を使うアプリが同じ行を変えようとすると、Shopify は先に登録されたアプリの結果だけを採用します。
• 1 つのカートで扱える量り売りの行は、12 行ほどが目安です。 Shopify Functions には 1 回の実行で使える計算量の上限があり、行が増えるとそこに近づくためです。

料金プラン

料金は 1 プランだけです。

• 月額: $5.99
• 年額: $59.90（月額で払うより 2 か月分ほど安くなります）
• 無料体験: インストールから 7 日間

計算ルールの数や、割り当てられる商品の数による追加料金はありません。プランは Shopify App Store の掲載ページから確認できます。

インストール

インストールは、ほかの Shopify アプリと同じ流れです。

1. Shopify 管理画面の左下にある「設定」を開きます。

2. 「アプリと販売チャネル」を開き、右上のボタンからアプリストアに進みます。

3. 「シンプル量り売り」で検索し、掲載ページの「インストール」を押します。権限の確認画面が出たら内容を確かめて、インストールを完了します。

インストールが終わると、価格を計算し直すための Shopify Functions がストアに自動で登録されます。マーチャントが操作する必要はありません。

アプリ管理画面の構成

アプリの管理画面は、大きく 2 つに分かれています。

• 計算ルール … ルールの一覧と、1 本ずつの編集画面。編集画面はさらに 4 つのタブに分かれます
• 設定 … テーマへの追加と、管理画面の表示言語

商品ページに入力欄を出すまでの流れは、「計算ルールを作る → 適用する商品を選ぶ → テーマに入力欄を置く」の 3 手順です。インストールしただけでは、ストアの見た目は何も変わりません。

各画面の説明

ここからが本題です。管理画面の画面とタブを、1 つずつ説明します。

計算ルールの一覧

アプリを開くと最初に出る画面です。作ったルールが 1 行ずつ並び、次の列で中身を見比べられます。

• 計算ルール … ルールの名前。行のどこを押しても編集画面に移ります
• 種類 … 長さ・面積・体積・重量のどれを測るルールか
• 価格の決め方 … 単価 × 量・数量帯別の単価・価格表のどれか
• 単位 … 単価を決めている単位（m、m² など）
• 商品数 … そのルールが今いくつの商品に割り当てられているか

右上の「計算ルールを作る」から、新しいルールの作成画面に進みます。

一覧の上には、状況に応じて案内のバナーが出ます。これは見落とすと売上に響くものばかりなので、出ていたら必ず目を通してください。

• 価格の自動計算が有効になっていません … 価格を計算し直す仕組みが止まっている状態です。このままでは、サイズを指定した注文が通常の価格のまま確定してしまいます。「有効にする」を押せば戻ります。Shopify の「設定 → チェックアウト」でチェックアウトルールを無効にしたときにも出ます
• カートの価格を変更する別のアプリが入っています … バンドルやギフト包装のアプリなど、同じ仕組みを使うアプリを検出したときに出ます。同じ商品に両方を効かせないでください
• 公開中のテーマにサイズ入力欄が設置されていません … テーマを差し替えた直後にも出ます。「テーマを編集する」から入力欄を置き直します
• テーマ標準の価格・購入ボタンと重なって表示されないよう… … 商品を割り当てたルールがあるあいだ、常に出る注意書きです
• 在庫は注文された行の数だけ減ります … デメリットの章で書いた在庫の扱いについての注意です
• コレクションの追加・削除は自動では反映されません … コレクション単位で割り当てているときに出ます

行末のメニュー（編集・商品に反映し直す・削除）

一覧の各行の右端にある「…」を押すと、3 つの操作が出ます。

• 編集 … 編集画面を開きます。行を押したときと同じです
• 商品に反映し直す … 割り当てたコレクションの中身を読み直し、割り当て中のすべての商品にルールを書き込み直します。コレクションに後から追加した商品への反映、書き込みに失敗した商品のやり直し、コレクションから外れた商品からの取り外しを、この 1 回でまとめて済ませます
• 削除 … 確認を挟んで削除します。割り当てていた商品からも設定が外れ、元には戻せません

「商品に反映し直す」があるのは、ルールの中身が商品 1 つずつに書き込まれる作りだからです。チェックアウトで価格を計算する Shopify Functions は、計算に使うルールを商品から直接読みます。そのため、コレクションに商品を足しただけでは、その商品にはまだルールが届いていません。

計算ルールの編集画面（共通の部分）

ルールの編集画面は「基本設定」「価格の決め方」「入力できる範囲」「適用する商品」の 4 タブ構成です。どのタブにいても、画面の右側にはプレビューが出ています。

プレビューには、いま入力している設定のまま、お客様に見える入力欄と金額が出ます。保存する前に金額を確かめられるので、数量帯の境目や最低金額の効き方は、ここで数字を変えて試すのがいちばん早い方法です。

• 入力欄には最初から値が入っています。最小値を決めていればその値、決めていなければ 100 です
• テーマエディタで決めた色や、テーマ側のデザインはプレビューには反映されません
• プレビューの「カートに追加」は押しても動きません

新しく作る画面には、生地を想定した初期値（長さ・cm で入力・m 単価）が最初から入っています。ルール名と単価を直せば、そのまま生地用のルールとして使えます。

基本設定タブ

何を、どの単位で、どう測るかを決めるタブです。

• ルール名 … 管理画面で見分けるための名前です。お客様には表示されません。空欄では保存できないので、「生地（10cm 単位）」のように中身の分かる名前を付けておくと、一覧で迷いません
• 量の種類 … 長さ・面積・体積・重量から選びます。変えると、単位と価格の決め方は選び直しになります
• 入力のさせ方 … 「量をそのまま入力してもらう」か「寸法を入力して掛け合わせる」かを選びます。後者は量の種類が面積・体積のときだけ選べ、面積なら 2 つ、体積なら 3 つの欄が出ます
• 買い手が入力する単位 … お客様が入力欄に入れる単位です。使える単位は、長さが m・cm・mm・ft・in・yd、面積が m²・cm²・ft²・in²・坪、体積が m³・L・mL・ft³・in³、重量が kg・g・lb・oz・匁 です
• 価格を決める単位 … 単価の単位です。入力が cm、価格が m なら、250cm の入力は 2.5m として計算されます
• 入力欄の見出し … 入力欄の上に出る見出しです（例: 幅、丈）。後ろには単位が自動で付き、「幅 (cm)」のように表示されます。ここに入れた文字は翻訳されないので、多言語のストアでは、どの言語のお客様にも通じる書き方にしておきます

本数の入力欄を表示するをオンにすると、同じサイズをまとめて買うための「本数」の欄が出ます。初期状態はオフです。

• 本数の見出し … 本数の欄の見出しです。「反」「枚」「個」のように、商品に合った呼び方にできます。空欄ならお客様の言語で「本数」と表示されます。20 文字まで入ります
• 「1本あたり」の見出し … 本数が 2 以上のとき、合計の横に 1 本あたりの金額が出ます。その見出しです。空欄なら「1本あたり」です。こちらも 20 文字まで

本数の欄を出さない場合、カートでは数量ボタンが隠れるので、お客様は同じサイズを買い足すときにもう一度カートに入れることになります。本数は購入数を制限する機能ではありません。

価格の決め方タブ（単価 × 量 ＋ 基本料金）

いくらで売るかを決めるタブです。「計算方式」で 3 つから選び、選んだ方式によって画面が変わります。最初は、いちばん基本の「単価 × 量 ＋ 基本料金」です。

「単価」の出どころを 2 つから選べます。

• 決まった額を使う … ルールに入れた単価を、割り当てたすべての商品に使います
• 商品の価格を使う … お客様が選んだバリエーションの価格を、そのまま 1 単位あたりの単価として使います

「商品の価格を使う」は、柄や色ごとに単価が違う商品を大量に扱うストアのための選択肢です。生地を 200 柄扱っていても、各商品の価格に 1m あたりの単価を入れておけば、ルールは 1 本で済みます。

この方式を選ぶと、単価の欄が消えて「プレビュー用の商品価格」の欄が出ます。試算のための金額で、ルールには保存されません。

ひとつ注意があります。この方式では、テーマが商品ページに表示する価格は「1m あたり」の額になります。お客様が合計と取り違えないよう、後で説明する「テーマ標準の価格・購入ボタンを隠す」設定を必ず入れてください。また、価格が 0 のバリエーションがある商品に割り当てると、0 円で買えてしまいます。アプリは割り当てたときと保存したときに、該当する商品を名指しで知らせます。

価格の決め方タブ（数量帯別の単価）

量が多いほど単価が下がる売り方です。「この量まで」と「単価」の組を、量の小さい順に並べます。

• 行は「区間を追加」で増やし、ゴミ箱のボタンで消します。最後の 1 行は消せません
• 「この量まで」は価格を決める単位で入れます。最後の区間は空欄にして「上限なし」にします
• 当てはまった区間の単価が、入力された量の全体に掛かります。「10 まで 950、25 まで 900」なら、15 の注文は 15 × 900 です。10 までの分を 950 で計算する、という積み上げ式ではありません。積み上げ式のつもりで単価を決めると、想定より安く売れてしまうので注意してください
• 本数を入れた場合も、区間は 1 本あたりの量で決まります。3 本まとめて買っても単価は下がりません
• 2 つ目以降の区間の単価が最初の区間より安いときだけ、商品ページに「11% お得」のような割引率が出ます

保存できない並びのときは、表の下に赤字で理由が出ます。「上限なしの区間は 1 つだけにしてください」「区間の上限は昇順にしてください」のように、何を直せばよいかがそのまま書かれています。

価格の決め方タブ（価格表から引く）

幅と丈の組み合わせごとに価格が決まっている商品向けの方式です。基本設定タブで、量の種類を面積、入力のさせ方を「寸法を入力して掛け合わせる」にしたルールでだけ選べます。

• 「価格表」の欄に、表計算ソフトの表をそのまま貼り付けます。1 行目が高さの見出し、1 列目が幅の見出しで、単位は買い手が入力する単位です
• 見出しは「その値まで」の意味です。幅の見出しが 100・150 なら、幅 120cm は「150 まで」の行の価格になります
• 表の範囲を超えるサイズは購入できません。お客様には「このサイズの価格が設定されていません」と表示されます
• 欄の下に「設定の大きさ: 708 / 9500 バイト」のように、表の大きさが出ます。9,500 バイトを超えると保存できません

9,500 バイトという上限は、画面からは理由が見えにくい制約です。ルールは商品に書き込まれ、チェックアウトの計算はそれを読みます。Shopify Functions が読める商品のデータは 1 件 10,000 バイト未満と決まっているため、そこから逆算した上限になっています。行と列が多すぎるときは、刻みを粗くするか、商品を分けてください。

価格の決め方タブ（基本料金・最低金額・金額の丸め方）

3 つのどの方式を選んでも、タブの下に次の 3 項目が並びます。

• 基本料金 … カット代・加工賃など、量に関わらず足す金額です。空欄なら 0 です
• 最低金額 … 計算結果がこの金額を下回ったら、この金額にします。判定は割引の前の金額で行います
• 金額の丸め方 … 金額の端数を、切り上げ・切り捨て・四捨五入のどれにするかを選びます

計算は「量を販売単位に合わせる → 単価を掛ける → 基本料金を足す → 最低金額と比べる → 通貨の最小単位に丸める」の順に進みます。Shopify のディスカウントコードや自動割引は、こうして決まった金額に対して普段どおり効きます。

入力できる範囲タブ

お客様が入力できる値を絞るタブです。単位はすべて「買い手が入力する単位」です。

• 最小・最大 … 入力できる値の下限と上限です。範囲の外の値を入れると、商品ページに案内が出て、カートには入りません
• 販売単位 … 何単位で売るかです（例: 10cm 単位）。空欄なら、入力された量のまま売ります
• 販売単位に合わないときの丸め方 … 割り切れない値が入ったとき、切り上げ・切り捨て・四捨五入のどれで合わせるかを選びます

お客様が入力欄から離れた時点（Enter やカートに追加を押したときも含みます）で、入力欄の値は丸めた後の値に書き換わります。注文に残るのも丸めた後の値なので、「123cm と入れたのに 130cm で届いた」という食い違いは起きません。商品ページの入力欄の下には「50 cm〜3000 cm / 10 cm 単位」のように、範囲と販売単位が自動で表示されます。

販売単位を入数として、個数で販売するは、床材やタイルを箱で売るための設定です。

• オンにすると、販売単位の量を 1 箱の入数として扱い、お客様には箱数が表示されます。単価には 1 箱の値段を入れます
• 1個の呼び名 … 「箱」「ロール」「枚」など、お客様に見せる言葉です。翻訳されずにそのまま出ます。20 文字までで、オンのときは必須です
• オンのあいだ、丸め方は切り上げに固定されます。切り捨てると、お客様が必要な量に足りない箱数で注文できてしまうからです
• 注文の明細には、サイズと一緒に箱数も残ります（例: 「boxes: 5」）。出荷のときに何箱出せばよいかが、明細を見るだけで分かります
• オフに戻すと、同じ数字のまま単価の意味が「1 箱あたり」から「1m² あたり」に変わります。戻したときは画面に警告が出るので、単価を必ず見直してください

この設定は、「量をそのまま入力してもらう」・販売単位の設定・「単価 × 量 ＋ 基本料金」の 3 つがそろったときだけ表示されます。

適用する商品タブ

どの商品にルールを効かせるかを決めるタブです。

• 商品を選ぶ … Shopify の商品選択画面が開きます。チェックを入れて「選択」を押すと一覧に並びます
• コレクションを選ぶ … コレクション単位で割り当てます。一覧にはコレクションごとの商品数も出ます
• すべて外す … 選んだものをまとめて外します。各行の ✕ で 1 件ずつ外すこともできます

一覧は最初の 10 件だけが表示され、残りは「すべて表示」で開きます。削除された商品は「見つからない商品」として残るので、✕ で外しておきます。外す操作も、追加と同じく「保存する」を押すまで反映されません。

コレクションで割り当てたときは、保存した時点でそのコレクションに入っている商品にだけ設定が書き込まれます。あとからコレクションに足した商品には自動で届かないので、編集画面に「設定が反映されていない商品が ◯件あります」と出たら、一覧の「商品に反映し直す」を押してください。反映されていない商品には入力欄が出ず、通常の価格で買われてしまいます。

このタブでは、価格が 0 の商品（商品の価格を使うルールのとき）と、定期購入が設定された商品にも警告が出ます。

保存できないとき

入力に不備があると、保存を押しても「入力内容を確認してください」と出て保存されません。このとき、不備のある最初のタブに画面が自動で切り替わり、不備のあるタブの名前には件数が付きます。

4 つのタブのうちどこに問題があるかが件数で分かるので、タブを 1 つずつ開いて探す必要はありません。

設定画面

テーマへの追加と、管理画面の表示言語を決める画面です。

• テーマを選択 … 入力欄を追加するテーマを選びます。初期値は公開中のテーマです
• テーマに追加 … テーマエディタが新しいタブで開き、「デフォルトの商品」テンプレートにブロックが追加された状態になります。テーマエディタの「保存」を押すと確定します
• テーマをプレビュー … 選んだテーマの商品ページを、テーマエディタで開きます
• 言語を選択 … 管理画面の言語を 20 言語から選び、「変更する」で切り替えます。変わるのは管理画面だけで、商品ページの文言はお客様の言語で出ます

画面の下には、アプリを削除するときの注意も書かれています。アプリを削除すると価格の計算が止まり、お客様のカートに残っている商品は通常の価格に戻ります。削除するなら、注文の少ない時間帯を選んでください。テーマに置いた入力欄はテーマ側に残るので、テーマエディタから外します。

テーマへの追加

テーマエディタで設定するものは 3 つあります。

• シンプル量り売り｜サイズ入力（商品ページ） … 商品ページに置くブロック。入力欄・金額・カートに追加ボタンを表示します
• シンプル量り売り｜サイズ変更（カートページ） … カートページに置くブロック。カートに入れた商品のサイズを変えられます
• シンプル量り売り｜共通スクリプト … 埋め込みアプリ。カートドロワーに「サイズを変更」リンクを出します

設定画面の「テーマに追加」が置くのは、商品ページのブロックだけです。「デフォルトの商品」テンプレートに、新しいアプリのセクションとして追加されます。購入ボタンのすぐ近くに置きたい場合や、商品によって別のテンプレートを使っている場合は、テーマエディタで手動で置きます。

1. テーマエディタの上部で、使っている商品テンプレートを選びます
2. 左のツリーで「商品情報」セクションの「ブロックを追加」を押します
3. 「アプリ」から「シンプル量り売り｜サイズ入力（商品ページ）」を選びます
4. ブロックをドラッグして購入ボタンの近くへ動かし、右上の「保存」を押します

このブロックは、ルールを割り当てていない商品では何も表示しません。テンプレートに 1 つ置いておけば、ルールを割り当てた商品にだけ入力欄が出ます。

カートページのブロックは、カートテンプレートで「ブロックを追加」から置きます。

カートドロワー（カートアイコンを押すと横から開くカート）にはブロックを置けません。そこで埋め込みアプリの「共通スクリプト」をオンにしておくと、ドロワーの量り売りの行では数量ボタンの代わりに「サイズを変更」リンクが出て、カートページの入力欄へ案内します。

カートページにブロックが置かれていないストアでは、共通スクリプトはドロワーに何も足さず、数量ボタンもそのまま残します。リンクを出しても、飛んだ先でサイズを変えられないからです。

ストアフロントの見た目を変える

商品ページのブロックを選ぶと、テーマエディタの左側に設定が並びます。

表示に関わる設定は次のとおりです。

• 価格表（サイズ別・数量帯別）を表示する（初期値: オン）… 数量帯別のルールでは区間の表を、価格表のルールではサイズ別の表を折りたたみで出します。オフにすると金額だけが出ます。カートページのブロックでは初期値がオフです
• ボタンの文言（初期値: 空欄）… 「カートに追加」の文言を変えます。「この長さでカートに入れる」のように、商品に合わせた言い方にできます。入れた文言はどの言語でも同じものが出ます
• テーマ標準の価格・購入ボタンを隠す CSS セレクタ（初期値: 空欄）… ルールを割り当てた商品のページでだけ、テーマの価格と購入ボタンを隠します。カンマ区切りで複数指定できます

最後の項目は、量り売りでは必ず入れてほしい設定です。テーマの購入ボタンが残っていると、お客様がサイズを入れずにカートへ入れてしまうことがあります（その場合はチェックアウトで止まり、商品ページで入れ直すよう案内が出ます）。Horizon テーマなら、価格・購入ボタン・追従する購入ボタンをまとめて隠すセレクタは次のとおりです。

main product-price, main .buy-buttons-block, sticky-add-to-cart

テーマによってクラス名は違うので、ほかのテーマではブラウザの検証機能で価格と購入ボタンの要素を確かめて書き換えてください。隠れるのはルールを割り当てた商品だけで、ほかの商品ページはそのままです。

デザイン設定は次のとおりです。

• 背景色（初期値: 透明）… ブロックの背景です。空欄ならテーマの背景がそのまま見えます
• 文字色（初期値: テーマの文字色）… 見出しや案内の文字の色です
• 金額の文字色（初期値: #202223）… 合計金額の色です
• 金額の文字サイズ（80〜200%、5% 刻み、初期値 115%）… 本文の文字に対する合計金額の大きさです
• 強調色（初期値: #2C6ECB）… 選ばれている数量帯、価格表のセル、割引率の色です
• 枠線の色（初期値: 文字色と同じ）… 入力欄や表の枠線です
• 角の丸み（0〜24px、初期値 4px）… 入力欄とボタンの角です
• 内側の余白（0〜32px、初期値 0px）… ブロックの内側の余白です
• 上下の余白（0〜48px、初期値 16px）… ブロックの上と下に空ける余白です
• ボタンの背景色・ボタンの文字色 … カートに追加ボタンの色です

テーマに合わせたいなら、背景色と文字色は空欄のまま試し、ボタンの色と強調色だけをブランドカラーに寄せるのが手早い方法です。

追加のCSS には、デザイン設定で足りない部分を CSS で書けます。書いた CSS はこのブロックの中だけに効くので、テーマのほかの部分は崩れません。

設定を終えた商品ページは、次のように見えます。幅と丈を入力するカーテンでは、「価格表を見る」を開くと、入力したサイズのセルが強調されます。

アプリストアの掲載画像でも、設定ごとの見え方を確認できます。

コードで自作する場合

アプリを使わずに量り売りを作ることもできます。ただし、どこまでをテーマのコードで書けて、どこからが書けないのかを知っておくと、判断を誤りません。

商品ページで金額を表示するところまでは、テーマで書ける

まずは、長さを入力すると金額が出て、そのサイズを注文の明細に残す部分です。商品テンプレートに次のような Liquid を足すと、入力欄と金額の表示ができます。単価は商品のメタフィールド（ここでは custom.price_per_meter）に入れておく想定です。

{% assign unit_price = product.metafields.custom.price_per_meter.value | default: 0 %}
<div class="measure-box" data-unit-price="{{ unit_price }}">
  <label for="measure-length">長さ (cm)</label>
  <input id="measure-length" type="number" min="50" step="10" value="100">
  <p>合計: <span class="measure-total"></span></p>
  <input type="hidden" form="{{ 'product-form-' | append: section.id }}"
         name="properties[長さ (cm)]" class="measure-property">
</div>

ここでは、入力欄のほかに、フォームと結び付けた hidden の入力を置いています。properties[...] という名前の値は、カートに入れたときに明細の項目として残るので、注文管理の画面で「長さ (cm): 250」と確認できます。

次の JavaScript は、入力のたびに金額を計算し、hidden の入力にも同じ値を写します。

document.querySelectorAll('.measure-box').forEach((box) => {
  const unitPrice = Number(box.dataset.unitPrice);
  const input = box.querySelector('#measure-length');
  const total = box.querySelector('.measure-total');
  const property = box.querySelector('.measure-property');
  const update = () => {
    const meters = Number(input.value) / 100;
    total.textContent = (unitPrice * meters).toFixed(2);
    property.value = input.value;
  };
  input.addEventListener('input', update);
  update();
});

cm で入れてもらった値を 100 で割って m に直し、単価を掛けています。ここまでで、見た目は量り売りの商品ページになります。

請求額を変えるには、Shopify Functions が要る

問題はここからです。上のコードは金額を表示しているだけで、カートに入る価格は商品の元の価格のままです。JavaScript からカートの価格を書き換える方法はなく、表示と請求が食い違います。

請求額を変えるには、Shopify Functions の Cart Transform を書いて、アプリとしてストアに登録する必要があります。考え方を最小限のコードにすると、次のようになります。カートの行ごとに明細の長さを読み、1 行をその価格の行として置き換えます。

export function cartTransformRun(input) {
  const operations = [];
  for (const line of input.cart.lines) {
    const length = Number(line.lengthCm?.value);
    const unitPrice = Number(line.merchandise.product?.pricePerMeter?.value);
    if (!length || !unitPrice) continue;
    operations.push({
      lineExpand: {
        cartLineId: line.id,
        expandedCartItems: [{
          merchandiseId: line.merchandise.id,
          quantity: 1,
          price: { adjustment: { fixedPricePerUnit: { amount: (unitPrice * length / 100).toFixed(2) } } },
        }],
      },
    });
  }
  return { operations };
}

Function は、カートの中身を読むための問い合わせ（入力の定義）と組み合わせて動きます。上のコードでは、明細の「長さ」と、商品の単価のメタフィールドを入力として受け取り、lineExpand でその行を計算した価格に置き換えています。

ただし、これは考え方を示すための骨組みです。実際に運用するには、少なくとも次のことが必要になります。

• 最小・最大・刻みを Function の側でも検査し、範囲外のサイズを通さない（ブラウザ側の検査は書き換えられます）
• サイズの入っていない行をチェックアウトで止める（テーマの購入ボタンや再注文から入った行が、元の価格で通らないように）
• 区間や価格表をメタフィールドに持たせ、10,000 バイト未満に収まっているかを保存時に確かめる
• 1 回の実行の計算量の上限に収まるかを、カートの行数を増やして測る
• 同じ仕組みを使う別のアプリとの順番を確かめる
• カートページで、カートに入れた後にサイズを変えられるようにする

テーマのコードは数十行で書けますが、請求額を正しくするところから先は、アプリの開発そのものです。シンプル量り売りは、ここに挙げた検査と制約への対応をすべて組み込んだうえで、管理画面から設定できるようにしています。量り売りを始めたいだけなら、自作の保守を抱えるより、アプリを入れるほうが早くて安全です。

カスタム商品アプリ・バンドルアプリとの使い分け

量り売りのアプリを探していると、Ex Custom Price Calculator、EC Price Calculator by Measure、Apippa‑Custom Price Calculator、M Custom Size Price Calculator といった、サイズ入力付きの価格計算アプリも候補に挙がります。ここでは、それらを含む「カートの価格を変えるアプリ」とシンプル量り売りを同じストアで使うときの考え方を書きます。

1 つの商品に効かせる価格アプリは 1 つにする

カートの価格を変えるアプリの多くは、シンプル量り売りと同じ Cart Transform を使います。Shopify は、同じカートの行を複数のアプリが変えようとすると、先に登録したアプリの結果だけを採用し、残りは捨てます。どちらが先かはインストールした順で決まり、後から入れたアプリは負け続けます。

そのため、併用するなら「商品ごとに担当のアプリを分ける」のが基本です。

• 生地・床材のように量で売る商品 … シンプル量り売りのルールを割り当てる
• 色や素材の追加料金、刻印の文字入れなど、オプションで値段が変わる商品 … オプション系のアプリに任せる
• セット販売・バンドルの商品 … バンドルのアプリに任せる

同じ商品に 2 つのアプリを効かせないかぎり、両方を入れていても問題は起きません。

併用していることは、一覧の案内で分かる

シンプル量り売りは、同じ仕組みを使う別のアプリがストアに入っていると、計算ルールの一覧に「カートの価格を変更する別のアプリが入っています」と表示します。この案内が出ていたら、ルールを割り当てている商品が、もう一方のアプリでも設定されていないかを確かめてください。

乗り換えるときの順番

ほかの価格計算アプリからシンプル量り売りに乗り換えるときは、次の順で進めると、価格が付かない時間を作らずに済みます。

1. シンプル量り売りをインストールし、計算ルールを作ってプレビューで金額を確かめる（まだ商品には割り当てない）
2. テーマに商品ページのブロックを置き、テーマ標準の価格・購入ボタンを隠す設定を入れる
3. 旧アプリ側で、対象の商品から設定を外す
4. シンプル量り売りの「適用する商品」でその商品を割り当てて保存する
5. 商品ページで実際にカートに入れ、チェックアウトの金額が合っているかを確かめる
6. すべての商品を移し終えたら、旧アプリをアンインストールし、テーマに残ったブロックを外す

旧アプリを先にアンインストールすると、Cart Transform の登録順が繰り上がり、シンプル量り売りが優先されるようになります。逆に、旧アプリを残したまま同じ商品に両方を割り当てると、旧アプリの価格が使われ続けます。

「量で売る」か「オプションで売る」かで選ぶ

迷ったら、商品の価格が何で決まるかで選びます。値段が長さ・面積・重さにほぼ比例するなら、量り売りに絞ったシンプル量り売りのほうが、ルールの数も設定の手間も少なく済みます。選択肢やチェックボックスを組み合わせて値段が決まる「カスタム商品」が中心なら、オプション型の計算アプリのほうが向いています。

まとめ

シンプル量り売りは、お客様が入力した長さ・面積・体積・重さから、その場で価格を出してカートに入れられるようにするアプリです。

• 価格の決め方は、単価 × 量 ＋ 基本料金・数量帯別の単価・価格表（幅 × 高さ）の 3 通り
• 最小・最大・販売単位・丸め方で、入力できる値を絞れる
• 床材やタイルを箱単位で売り、明細に箱数を残せる
• カートに入れた後でも、カートページやドロワーからサイズを変えられる
• 請求額はチェックアウトの時点で Shopify 上で計算し直されるので、金額を書き換えられない

在庫が量で減らない点や、定期購入・注文編集に使えない点は、Shopify の仕様による制約です。そこを理解したうえで運用すれば、サイズの数だけバリエーションを作る手間も、注文後に金額を訂正する手間もなくなります。料金は月額 $5.99 で、7 日間は無料で試せます。

Shopify App Storeから、まずは手元の商品でプレビューの金額を確かめてみてください。

おすすめ Shopify アプリ

UnReact が開発している、在庫や価格表示に関わるアプリも紹介します。

• シンプル在庫切れ並び替え｜売り切れ商品を末尾へ自動ソート … 売り切れた商品をコレクションの末尾へ自動で移し、再入荷すると元の位置に戻します。生地の柄ごとに在庫切れが出やすいストアで、売れる商品から先に見てもらえます
• シンプル売り切れバリエーション非表示｜自動在庫切れ非表示 … バリエーションの選択欄から、売り切れたサイズやカラーを消します。お客様には買える選択肢だけが並びます
• UR: Dual Price Tax Display … 税込価格と税抜価格を並べて表示します。商品ごとに標準税率と軽減税率を設定できるので、食品の量り売りと雑貨を一緒に扱うストアにも向いています
• UR: Country of Origin Label … 商品ページに製造国を表示します。国はリストから選ぶので、入力のゆれが起きません