はじめに
アパレルや雑貨のストアでは、サイズ・カラーの欠品は毎日のように起こります。ところが Shopify の公式テーマ（Horizon・Dawn など）では、売り切れたサイズも取り消し線付きのボタンとして残ります。
- 欲しいカラーを選んだのに、並んでいるサイズの半分が押せない
- 押せるサイズを探して、ボタンを 1 つずつ試す
- 「在庫が無いならそもそも出さないでほしい」とお問い合わせが来る
お客様は「選べそうで選べない」ボタンに何度もつまずき、そのまま離脱してしまうこともあります。
いま選んでいる組み合わせで買えないサイズ・カラーだけを、商品ページから自動で消す。これができれば、お客様は買える商品だけを迷わず選べます。
この記事では、Shopify で売り切れのバリエーションを非表示にするアプリとして、当社（UnReact）が開発した シンプル売り切れバリエーション非表示 を中心に、海外の非表示アプリ 4 本を実際に開発ストアへインストールして比べた結果を紹介します。
売り切れバリエーションの非表示とは？
Shopify の商品は、サイズ・カラーなどのオプションの組み合わせごとに「バリエーション」を持ちます。売り切れバリエーションの非表示は、在庫が無くて買えない組み合わせを、商品ページの選択肢（バリエーションピッカー）から消す、または押せなくすることです。
| 業種 | 非表示が役立つ場面 |
|---|---|
| アパレル・シューズ | サイズ × カラーの組み合わせが多く、特定のサイズだけ欠品しやすい |
| スポーツ用品 | スノーボードやウェアなど、長さ・サイズ別の在庫が細かく分かれている |
| 雑貨・インテリア | カラー展開が多く、人気色から先に売り切れる |
| 限定品・一点物 | 売り切れたバリエーションを早く見えなくしたい |
ポイントは、売り切れかどうかがほかのオプションとの組み合わせで決まることです。「Mint の 152cm」は売り切れでも「Sunset の 152cm」は買える、ということがよくあります。
売り切れを非表示にするメリット・デメリット
メリット
- 買えないボタンを押させずに済む … 選択肢に並ぶのは買えるものだけになり、選ぶ手間とストレスが減ります。
- 商品ページがすっきりする … サイズ・カラー展開が多い商品ほど、取り消し線の並ぶ見た目を避けられます。
- 欠品が目立ちにくい … 「品切ればかり」という印象を与えにくくなります。
デメリット
- 品ぞろえが見えにくくなる … 消してしまうと、そのサイズが存在すること自体が伝わりません。再入荷を待ちたいお客様には不親切な場合があり、「薄く表示して押せなくする」見せ方を選べるかが大事です。
- 予約販売の商品まで消えるおそれがある … 在庫数だけで判定する仕組みだと、在庫 0 でも販売を続けている予約商品まで消えてしまいます。
- テーマによっては効かない … ピッカーの作りはテーマごとに違うため、対応テーマかどうかの確認が必要です。
Shopifyの標準機能で売り切れを非表示にできない理由
Shopify 公式テーマのバリエーションピッカーは、売り切れの組み合わせを取り消し線付きで表示し、選択肢として残します。テーマの設定に「売り切れのオプションを隠す」項目はありません。
| やりたいこと | 標準機能でできるか |
|---|---|
| 売り切れのバリエーションを取り消し線で示す | ✅ 公式テーマの標準の表示 |
| 選んでいるカラーで売り切れのサイズを消す | ❌ できない |
| 売り切れを薄く表示して押せなくする | ❌ できない（押せるが「売り切れ」と出る） |
| 売り切れのバリエーションを一覧・検索から外す | △ 商品ごとに手動で非公開にすれば可能。在庫が戻っても自動では戻らない |
テーマのコードを書き換えれば消すこともできますが、テーマを更新するたびに直し直しになり、予約販売の扱いなども自分で考える必要があります。こうした理由から、売り切れの非表示はアプリで行うのが一般的です。
シンプル売り切れバリエーション非表示｜自動在庫切れ非表示
どんなアプリか
シンプル売り切れバリエーション非表示は、商品ページのバリエーションピッカーから、いま選んでいる組み合わせで買えないサイズ・カラーを自動で消すアプリです。設定は管理画面のチェック 1 つとテーマエディタのスイッチ 1 つで、テーマのコードは書き換えません。
- 料金: $3.49/月（年払い $34.90/年）。7 日間の無料体験あり
- 向いているストア: サイズ・カラー展開が多く、欠品が日常的に出るアパレル・スポーツ用品・雑貨のストア
- 管理画面の言語: 日本語を含む 20 言語
できること
選んでいるカラーに合わせて、買えないサイズだけが消える
売り切れかどうかは、いま選ばれているほかのオプションとの組み合わせで判定します。上の画像は「Mint」を選んだ状態で、売り切れの 152cm が消えています。「Sunset」に切り替えると 152cm が戻り、代わりに売り切れの 156cm と 160cm が消えます。
アプリを使っていない状態では、同じ商品でも売り切れのサイズが取り消し線付きで残ります。
消さずに「薄く表示して選べなくする」こともできる
品ぞろえは見せたいストア向けに、売り切れの選択肢を薄く表示して押せなくする見せ方も選べます。
予約販売の商品は消さない
在庫切れでも販売を続ける設定（継続販売）のバリエーションは、在庫数が 0 でも消しません。Shopify の「購入できるか」の判定に合わせているので、予約販売・受注生産の商品が誤って消えることはありません。
コレクション・検索からも売り切れを隠せる
売り切れのバリエーションをオンラインストアの公開対象から外して、コレクションページ・検索結果・絞り込みからも隠せます（初期状態はオフ）。在庫が戻ると自動で公開に戻ります。
アプリのインストール
Shopify App Store からインストールします。
- Shopify 管理画面の左下にある「設定」を開きます。
- 「アプリと販売チャネル」を開き、「Shopify App Store」に進みます。
- App Store で「シンプル売り切れバリエーション非表示」を検索し、アプリのページで「インストール」を押します。
- 権限の確認画面と料金プランの画面で、内容を確認して承認します。
アプリ設定
最初にやることは 2 つだけです。アプリを開いて「テーマに機能を追加」の「テーマに追加」を押し、開いたテーマエディタで「保存」を押します。「売り切れの選択肢を消す」は最初からオンなので、これで商品ページから売り切れが消えます。
管理画面は「設定」の 1 画面だけで、上から順にカードが並びます。
テーマに機能を追加
- テーマを選択 … 追加先のテーマを選びます。初期値は公開中のテーマです。
- テーマに追加 … テーマエディタが開き、埋め込みアプリ「売り切れバリエーション非表示」がオンの状態になります。右上の「保存」で確定します。
- テーマをプレビュー … 選んだテーマの商品ページをテーマエディタで開きます。
表示設定
| 設定 | 内容 | 初期値 |
|---|---|---|
| 売り切れの選択肢を消す | オンで機能が動く。オフにすると商品ページはテーマ本来の表示に戻る | オン |
| 見せ方 | 「選択肢を消す」か「グレーアウトして選択不可にする」 | 選択肢を消す |
変えたら「保存する」を押します。次のような動きも、実装で決めてあります。
- すべて売り切れた商品では何も消しません。 選択肢が空になって何も選べなくなるのを防ぐためです。あるオプションの値が全部売り切れになる組み合わせでも、そのオプションは消しません。
- 選んでいた値が売り切れのとき（
?variant=付きのリンクから来たときなど）は、先に在庫のある値へ選択を移してから消します。 - お使いのテーマのピッカーを見つけられないときは、何もしません（テーマの表示を壊さないためです）。
コレクション・検索からも隠す
| 設定・操作 | 内容 |
|---|---|
| 売り切れのバリエーションをオンラインストアから非公開にする | チェックを入れて保存すると、売り切れのバリエーションの非公開が始まる（初期値はオフ） |
| このアプリが非公開にしているバリエーション | いまこのアプリが非公開にしている数 |
| 今すぐ適用する | 対象が多くて処理が途中で止まったときに、続きを実行する |
| 全部公開に戻す | このアプリが非公開にしたバリエーションを公開に戻す |
公開に戻すのはこのアプリが非公開にしたものだけで、ストア側で自分で非公開にしていたバリエーションには触れません。公開中のバリエーションが 1 つも無くなる商品では、最後の 1 つを残します。
言語設定
「言語を選択」で管理画面の言語を 20 言語から選び、「変更する」を押します。
テーマエディタの設定
このアプリは「埋め込みアプリ」として動くので、商品ページにブロックを置く必要はありません。埋め込みアプリの行を開くと、設定が 1 つだけあります。
| 設定 | 内容 | 範囲・初期値 |
|---|---|---|
| グレーアウトの濃さ（%） | 見せ方を「グレーアウトして選択不可にする」にしたときの濃さ | 10〜100%（5% 刻み）、初期値 40% |
注意点
- アプリを削除する前に「全部公開に戻す」を実行してください。 削除すると、このアプリが非公開にしたバリエーションを公開に戻せなくなります。
- 「表示設定」は商品ページだけに効きます。コレクション・検索から隠すには「コレクション・検索からも隠す」を使います。
- ピッカーを別の表示に置き換えるアプリと併用すると、このアプリは元のピッカーを見つけられず、何もしません。
- 料金プランが有効でないストアでは、売り切れの選択肢は消えません。
おわりに
シンプル売り切れバリエーション非表示を使うと、商品ページから、いま選んでいる組み合わせで買えないサイズ・カラーが自動で消えます。消すか薄く表示するかを選べ、予約販売の商品は消さず、必要ならコレクション・検索からも売り切れを隠せます。管理画面は日本語で、設定はほぼ「テーマに追加して保存」だけです。
ここからは、海外の売り切れ非表示アプリ 4 本を、実際に開発ストアへインストールして比べた結果です。
Camouflage: Hide Sold Variants
アプリ概要
| 項目 | 内容 |
|---|---|
| アプリ名 | Camouflage: Hide Sold Variants |
| 開発者 | CodeCrux Dev |
| 価格設定 | $7/月 / $15/月 / $29/月（年払い $67.20/年 / $144/年 / $278.40/年）・14 日間の無料体験 |
| 対応言語 | 管理画面は英語のみ（実際に確認） |
実際にインストールして触ってみた
- 管理画面は英語のみ。管理画面のアプリ名は Shopify の自動翻訳で「迷彩柄の皮のバリエーション」と表示された
- インストール直後は Theme app embed が「Not active」。テーマエディタで埋め込みアプリを有効にする必要がある
- Setup 画面で、売り切れ時の動作を Unpublish / Hide / Strike-through / Append soldout text / Strike-through + Disabled / None から選ぶ（初期値は None）
- Publishing（販売チャネルから非公開にする）・Hide specific variants（在庫に関係なく個別に隠す）のメニューもあり、機能は今回の中で最も多い
- 無料のまま管理画面に入れた
ワンポイント解説
売り切れの扱い方の選択肢がいちばん多く、販売チャネルからの非公開まで1本でこなせる多機能型です。レビュー件数も今回の中で突出しています。設定項目が多いぶん、英語の画面で最初に方式を選ぶ必要があります。
HiVar : Hide Sold Out Variants
アプリ概要
| 項目 | 内容 |
|---|---|
| アプリ名 | HiVar : Hide Sold Out Variants |
| 開発者 | StoreBuilder |
| 価格設定 | $4.99/月 / $7.99/月・14 日間の無料体験 |
| 対応言語 | 管理画面は英語のみ（実際に確認） |
実際にインストールして触ってみた
- 管理画面は英語のみ。開くと「Complete setup in just 5 minutes」の 3 ステップの案内が出る
- 売り切れ時の動作（Hide sold out variants / Disable sold out variants）は、アプリの画面ではなくテーマエディタの埋め込みアプリ側で選ぶ作り
- メニューは Billing Plan / Advanced Setup / Skip by product tags の 3 つ。商品タグで対象外にできる
- 無料のまま管理画面に入れた
ワンポイント解説
「消す」か「選べなくする」かを選ぶだけの、シンプルな作りのアプリです。設定の中心がテーマエディタにあるので、管理画面で迷う場面は少なめです。商品タグで対象から外せるのは、一部の商品だけ動作を変えたいときに便利です。
Veil ‑ Hide Sold Variants
アプリ概要
| 項目 | 内容 |
|---|---|
| アプリ名 | Veil ‑ Hide Sold Variants |
| 開発者 | Huskiapps |
| 価格設定 | $4.99/月・7 日間の無料体験 |
| 対応言語 | 管理画面は未確認（課金の承認前で入れなかった。アプリストアの表記は英語のみ） |
実際にインストールして触ってみた
- インストールするとすぐに Basic（$4.99/月・7 日間の無料体験）の承認画面になり、管理画面には入れなかった
- 開発ストアでもテスト請求にならず、決済手段の登録を求められて承認できなかったため、設定画面は確認できていない
- アプリストアの説明では、在庫に関係なく特定のバリエーションを削除せずに隠せる
ワンポイント解説
アプリストアの説明では、在庫切れに加えて、在庫に関係なく特定のバリエーションを隠せる点が特徴です。月額 $4.99 の 1 プランだけの分かりやすい料金です。今回は課金の承認まで進めなかったため、設定画面は確認できていません。
Scala ‑ Hide Sold Variants
アプリ概要
| 項目 | 内容 |
|---|---|
| アプリ名 | Scala ‑ Hide Sold Variants |
| 開発者 | SCALA |
| 価格設定 | 無料 |
| 対応言語 | 管理画面は英語のみ（実際に確認） |
実際にインストールして触ってみた
- アプリストアの価格は「無料」だが、管理画面を開くと Preview mode（テーマエディタとストアのプレビューでだけ動く）で、実際のお客様に見せるには有料プランへの切り替えが必要と表示された
- 管理画面の右上に言語の切り替え（English）がある。アプリストアの対応言語は英語・ポルトガル語・スペイン語・イタリア語・フランス語で、日本語は無い
- Hide variants manually（在庫に関係なく手動で隠す）と Hide variants based on region（国・マーケットごとに隠す）のオプションがある
ワンポイント解説
国やマーケットごとにバリエーションを隠せるのが特徴で、海外向けに売り分けているストアに向いています。無料で試せますが、無料のままではプレビューでしか動かない点に注意が必要です。
売り切れバリエーション非表示アプリ 5 つを比較
| アプリ | 日本語 | 薄く表示して選べなくする | 一覧・検索からも隠す | 継続販売の商品を残す | 月額 |
|---|---|---|---|---|---|
| シンプル売り切れバリエーション非表示 | ✅ | ✅ | ✅ | ✅ | $3.49 |
| Camouflage: Hide Sold Variants | ❌ | ✅ | ✅ | — | $7/月 |
| HiVar : Hide Sold Out Variants | ❌ | ✅ | — | — | $4.99/月 |
| Veil ‑ Hide Sold Variants | △ | — | — | — | $4.99/月 |
| Scala ‑ Hide Sold Variants | ❌ | — | — | — | 無料 |
※ 「日本語」は管理画面を実際に開いて確認した結果です（Veil は課金の承認前で管理画面に入れなかったため △）。機能の ✅ は、実機で確認できた範囲とアプリストアの説明に基づきます。「—」は確認できなかった項目です。Scala の「無料」はアプリストアの表記で、無料のままではプレビューでしか動きません。
まとめ｜どの売り切れ非表示アプリを選ぶべきか
どのアプリも「売り切れのバリエーションを商品ページで見えなくする」点は共通しています。違いが出るのは、管理画面の言語、消し方の選択肢、一覧・検索まで隠せるか、料金です。
- 売り切れの扱い方を細かく選びたい・販売チャネルからも外したい … Camouflage: Hide Sold Variants。選択肢がいちばん多く、レビュー件数も最多ですが、管理画面は英語です。
- 「消す」か「選べなくする」かだけで十分 … HiVar : Hide Sold Out Variants。設定の中心はテーマエディタで、商品タグで対象外にもできます。
- 在庫に関係なく、特定のバリエーションも隠したい … Veil ‑ Hide Sold Variants。月額 $4.99 の 1 プランです（今回は課金の承認前で管理画面を確認できていません）。
- 国やマーケットごとに出し分けたい … Scala ‑ Hide Sold Variants。無料で試せますが、お客様に見せるには有料プランが必要です。
日本のストアで、サイズ・カラーの売り切れを手軽に消したいなら、シンプル売り切れバリエーション非表示がいちばん手軽です。管理画面は日本語で、月額 $3.49 と今回比べた有料のアプリの中で最も安く、予約販売の商品を消さない判定や、コレクション・検索から隠す機能まで揃っています。