Shopify(ショッピファイ)卸売価格設定アプリ B2B Wholesale Club を解説

2022-02-21 00:32（更新：2024-04-09 05:24）トランスコスモスShopifyエンジニアShopify

オンラインストアに特定顧客向けの卸売（ホールセール）の機能を追加することができるShopifyアプリ「B2B Wholesale Club」(ホールセールクラブ)をご紹介します。B2B Wholesale Clubでは卸売顧客ごとに割引率を設定することができたり、業者向け販売に特化した多くの機能が提供されています。他の類似アプリと大きく違うのは顧客ごとの割引率の設定だけでなく、商品ごとの割引価格を設定することもできるところです。

目次[非表示]

1.機能紹介
2.インストール方法
3.割引の設定
4.対象顧客を設定
5.値引された商品の表示
6.発注条件の設定
7.カートのメッセージの見栄えを調整
8.利用料金

機能紹介

B2B Wholesale Clubの基本機能

Add discount （割引の追加）	特定のコレクションまたはすべてのコレクションに対して、顧客タグごとに割引率を設定することができます。
Order minimums （注文の最低条件）	顧客タグごとに最低注文数量、最低注文金額を設定することができます。条件を満たしていない場合、カートに注文を調整する必要がある旨の通知が表示されます。

B2B Wholesale Clubのオプション機能

Advanced Minimums（高度な最低条件）	顧客タグごとに商品バリエーション、商品、コレクションのレベルで最低注文数量を設定することができます。条件を満たしていない場合、カートに注文を調整する必要がある旨の通知が表示されます。
Custom Prices （カスタム価格）	商品バリエーションごとに個別の価格を設定することができます。価格はCSVファイルで一括登録することも可能です。
Volume Discounts（ボリュームディスカウント）	カート内の合計金額、商品総数、各商品の数量に応じて割引を適用することができます。この割引は顧客が利用できる卸売割引に加えて適用され、カートにアップセル通知が表示されます。
Net Terms （支払条件）	顧客がShopifyのチェックアウトをバイパスして注文し、後払いを行えるようにできます。
Quick Order Form （クイックオーダーフォーム）	１ページで複数商品を簡単にカートに追加できるオーダーフォームを作成することができます。すべての卸売商品を表示するか、一部の商品を選択して表示するかを選べます。

インストール方法

B2B Wholesale Clubのインストール

Shopifyアプリストアの B2B Wholesale Clubを検索してアプリを追加します。

（出典）https://apps.shopify.com/wholesale-club?locale=ja

B2B Wholesale Clubをテーマに反映

Shopifyのアプリ管理メニューから Wholesale Clubを選択し、「Welcome to Wholesale Club」が表示されたら「Set up theme to show discounts」をクリックします。

「STEP 1: CHOOSE THEME」のプルダウンで Wholesale Clubを適用させるテーマを選択して、「Run setup」ボタンをクリックします。セットアップが完了すると Pixel Unionからメールが届くのでそれを待ちます。

B2B Wholesale Clubが反映されたテーマを公開

Shopifyのメニュー「オンラインストア」のサブメニュー「テーマ」をクリックすると現在適用されているテーマなどを確認することができますが、その中の「テーマライブラリー」に Wholesale Clubが適用されたテーマを確認することができます。この新しいテーマをオンラインストアに反映するには、「アクション」のプルダウンメニューで「公開」を進めます。

割引の設定

B2B Wholesale Clubのメイン画面の右上方向にある「Add discount」ボタンをクリックします。

「Discount details」の「Customer tag」に対象とする顧客のタグ名を記述し、「Discount」には適用する値引率を設定します。この例では業者Aならば30%割引になります。

「Collections」の「Select collections」または「Select all collections」をクリックしてコレクションを設定します。

「Select all collections」をクリックするとすべてのコレクションが値引対象となり、「Select collections」ボタンをクリックすると値引対象とするコレクションを選択することができます。

「Discount details」と「Collections」の設定が終わったら「Save」ボタンをクリックします。

対象顧客を設定

チェックアウトの顧客アカウントの設定を確認

B2B Wholesale Clubの「Discount details」の「Customer tag」で値引対象の顧客かどうかを判別する設定を行いましたが、お客様がログインしないことには顧客を特定できませんので、Shopifyの「設定」メニューから「チェックアウト」を選択して、「顧客アカウント」が「アカウントを任意にする」または「アカウント作成を必須にする」であることを確認します。

対象顧客を設定

Shopifyの「顧客管理」で対象の顧客に B2B Wholesale Clubの「Discount details」の「Customer tag」で設定したタグの値を設定します。

未登録の顧客を追加する場合は、Shopifyの「顧客管理」の「顧客を追加する」ボタンをクリックして個別に追加するか、「顧客情報をインポートする」の機能を使って一括登録することもできます。

また、お客様のアカウントを有効にしていただくために「アカウントの招待を送信する」でメールを送信します。

お客様は受け取ったメールからオンラインストアにアクセスすることができます。

値引された商品の表示

値引価格の表示

値引対象のお客様がオンラインストアにログインしたとき、値引価格は下図のように表示されます。値引設定されていないコレクションの商品は元の価格のまま表示されます。※商品Dを拡大表示しています。

発注条件の設定

注文最小条件の設定

B2B Wholesale Clubのメニューで「Order minimums」を選択します。

「Minimum eligibility for discounts」のプルダウンをクリックして指定する条件を選びます。

Total quantity	注文に含まれる商品の合計数量
Total value after discount	卸売割引が適用された後の注文金額合計
Total value before discount	卸売割引が適用される前の注文金額合計

選択した条件に応じて数値を設定します。

「Cart message」に、条件を満たしていないときに表示されるメッセージを設定します。

このメッセージの設定はお客様のカートで下図のように表示されます。

注文最小条件の設定が終わったら「Save」ボタンで保存します。

詳細な最小条件の設定

もっと詳細な注文条件を設定するには、B2B Wholesale Clubのメニューから「Order minimums」を選択し、「Advanced minimums」の「Enable」ボタンをクリックして、機能を有効にします。

※この機能を利用するには$99（一括）を支払う必要があります。

条件設定の単位を「Collection」、「Product」、「Variant」のいずれかで指定することができます。それぞれコレクションごと、商品ごと、あるいは商品バリエーションごとの最小注文数量（MOQ）を指定することができます。また、「Require multiples」のチェックをオンにすると、最小注文数量の数値が発注単位数量（SPQ）として扱われるようです。※「MOQ/SPQ: 120/6」（最小注文数量120個以上、120個以上の発注単位は6個ずつ）といった設定はできないようです。

MOQ (Minimum Order Quantity) 最小注文数量	設定値が「12」の場合、12個以上ならばいくつでも購入が可能。
SPQ (Standard Packing Quantity) 発注単位数量	設定値が「12」の場合、12の倍数での注文が可能。

残念ながら高度な最小注文数量のほうはオリジナルのメッセージを設定する機能が無いため、下図のような英語でのメッセージ表示になってしまいますが、このメッセージのカスタマイズ方法については後述します。

特別価格（カスタムプライス）の設定

B2B Wholesale Clubのメニューで「Custom prices」を選択します。

商品一覧の中から対象の商品の特別価格を設定して、「Save」ボタンをクリック。

対象顧客の商品ページに特別価格が反映されます。※商品Cを拡大表示しています。※設定画面では商品Cのブラック/Sに特別価格を設定していますが、商品画像がネイビーしかなくてスミマセン。

ボリュームディスカウントの設定

B2B Wholesale Clubのメニューで「Volume discounts」を選択します。

ボリュームディスカウントの種類を選択して「Add volume discount」ボタンをクリック。

Discount cart total	カートの商品の合計金額
Cart total quantity	カートの商品の合計数量
Single product quantity	単一商品の数量

条件を設定します。下図はカートの商品の合計金額が30,000円以上のときに10%の割引を行う設定です。「Add volume discount」ボタンを繰り返しクリックすることで、60,000円で15%割引、100,000円で20%割引と段階的な割引設定も可能です。

続いて、カートに表示するアップセルのメッセージを設定して「Save」ボタンをクリック。

First volume discount	最初のボリュームに達していないときに表示されます
Qualifying orders	最初のボリュームに達したときに表示されます
Next volume discounts	次のボリュームが設定されているときに表示されます

下図はメッセージの表示例です。

カートのメッセージの見栄えを調整

カートに表示されるメッセージは元のテーマによるところもありますが、あまり見栄えが良いとは言えません。また、B2B WholeSale Clubの一部の機能は日本語のメッセージを設定できないものもあるので、ソースコードを編集して、フロントエンドでなんとかするしかありません。なお、ソースコードの編集は自己責任でお願いします。

※ 以下の説明は Dawnを基にしております。

メッセージの位置を変更する

Shopifyのコード編集画面で main-cart-footer.liquid の 23行目付近にある小計のブロックを編集します。

変更前	<div class="totals"> <h3 class="totals__subtotal">{{ 'sections.cart.subtotal' \| t }}</h3> <span style="display: block; text-align: right;" class="saw-extra-note"></span> <span class="saw-cart-original-total"> <p class="totals__subtotal-value">{{ cart.total_price \| money_with_currency }}</p> </span><br> <span class="saw-cart-total"></span> </div>
変更後	<div class="totals"> <h3 class="totals__subtotal">{{ 'sections.cart.subtotal' \| t }}</h3> <span class="saw-cart-original-total"> <p class="totals__subtotal-value">{{ cart.total_price \| money_with_currency }}</p> </span><br> <span class="saw-cart-total"></span> </div> <span style="display: block; text-align: right;" class="saw-extra-note"></span>

メッセージのスタイルを変更する

Shopifyのコード編集画面で wc_cart.liquid の440～460行目付近を編集します。Wholesale Clubの Order minimums または Advanced minimums の場合は saw-highlight、Volume discountsの場合は saw-extra-noteのスタイルを編集します。

変更前	.saw-highlight { background-color: #ffd400; } .saw-extra-note { font-weight: bold; margin: 10px 0px 10px 0px; background-color: #ffd400; color: #000000; }
変更後	.saw-highlight { background-color: #f2f2f2; } .saw-extra-note { font-weight: bold; margin: 10px 0px 10px 0px; background-color: #f2f2f2; color: #000000; }

（もっとオシャレにすればよかった・・・）

メッセージを強制的に日本語に書き換える

Shopifyのコード編集画面で wc_cart.liquid の140行目付近のスクリプトを編集します。

変更前

if (res.warning_note != "") {

sawExtraNote.innerHTML = res.warning_note;

sawExtraNote.className += " saw-highlight";

return;

}

変更後

if (res.warning_note != "") {

// メッセージが「Minimum total quantity of」で始まる場合
if (res.warning_note.startsWith("Minimum total quantity of")) {

// 「コレクション："コレクション名"の商品は合計"数量"個以上から購入可能です。」に置換
let collectionName = res.warning_note.split('collection')[1];
let minTotalQuantity = res.warning_note.split('of')[1].split('is')[0];
sawExtraNote.innerHTML = "コレクション：" + collectionName + "の商品は合計" + minTotalQuantity + "個以上から購入可能です。";

// メッセージが「Minimum quantity of」で始まる場合
} else if (res.warning_note.startsWith("Minimum quantity of")) {

// 「"商品名orバリデーション名"は"数量"個以上から購入可能です。」に置換
let productName = res.warning_note.split('for')[1];
let minTotalQuantity = res.warning_note.split('of')[1].split('is')[0];
sawExtraNote.innerHTML = productName + "は" + minTotalQuantity + "個以上から購入可能です。";

// 上記の条件に該当しない場合は、元のメッセージのままとする
} else {
sawExtraNote.innerHTML = res.warning_note;
}

sawExtraNote.className += " saw-highlight";
return;
}

利用料金

B2B Wholesale Clubの利用料金

料金プランは月額$24のベーシックプランと月額$49のプロフェッショナルプランがあり、ベーシックプランは月間の注文数が300件までとなっています。また、オプションごとに$99等の別途料金がかかるようです。詳しくはこちらをご覧ください。

（出典）https://apps.shopify.com/wholesale-club?locale=ja

B2B Wholesale Clubは Shopify Plusでなくても卸売りを実現することができるアプリです。顧客ごとの値引設定だけでなく、コレクションや商品ごとに値引設定ができたり、卸売・箱売には絶対に必要な MOQ（最小注文数量）やSPQ（注文単位数）の設定ができるところがポイントですね。一部の日本語メッセージが設定できなかったり、MOQ/SPQの両方を設定できなかったり、「あと一歩！」と思うところもありますが、その辺は今後に期待しましょう！デフォルトだと見栄えが貧弱なのも、リアルのディスカウントストアを思い出してください。問題ないですよね！？（言い過ぎ）

時間の都合で Net Termsや Quick Order Formの説明ができませんでした。B2Bストアとしては、こっちのほうが重要かもしれませんね。機会があればまた紹介できればと思います。ではまた！

トランスコスモスShopifyエンジニア

トランスコスモスは日本で7社しかない最上位の「Shopifyプラスパートナー」です。最上位認定を堅持しShopifyでのECサイト制作・Shopifyアプリ開発を担うのが、トランスコスモスShopifyエンジニアチームです。Shopifyアプリの解説・紹介、Shopifyの基本的な使い方など制作や開発の過程で得られた知見をご紹介します。