カラーを選び直すたびに、押せないサイズのボタンが半分並んでいる。アパレルやスポーツ用品のネットショップを Shopify で運営していると、この光景は珍しくありません。Shopify の公式テーマは、在庫が無くなったバリエーションも選択肢として描き続け、取り消し線を引いて「買えません」と示すだけだからです。
この記事では、当社 UnReact が開発した Shopify アプリ「シンプル売り切れバリエーション非表示|自動在庫切れ非表示」を取り上げ、管理画面のカードを上から順に 1 枚ずつ開きながら、設定項目が何を決めるのかを解説します。商品ページで何が起きるのか、どんな条件のときにアプリがあえて何もしないのか、オンラインストアの公開状態に触れる機能を使う前に何を知っておくべきか、といった運用で効いてくる部分まで書いています。
これから導入を考えている方は「メリット」「デメリット」「料金プラン」から、すでにお使いの方は「各画面の説明」から読み進めてください。
ひとことで言えば、バリエーションの選択欄を「いま買えるものだけの一覧」に変えるアプリです。在庫の数字を直接見張るのではなく、Shopify が商品ページに渡している「この組み合わせは購入できるか」という判定を読み取り、買えない選択肢をブラウザ上で隠します。
アプリを入れていない状態の商品ページを先に見ておきます。下の画像では Sunset を選んだときに、在庫の無い 156cm と 160cm が取り消し線付きで並んだままです。お客様は押してみるまで、その長さが手に入らないことに確信が持てません。

このアプリの判定は、ほかのオプションとの「組み合わせ」で決まります。仕組みを順に追うと次のとおりです。
この順序のおかげで、「Mint では 152cm が品切れだが、Sunset の 152cm は残っている」といった細かな欠品の出方にもそのまま追随します。

向いているのは、オプションを 2 つ以上組み合わせて売る商品です。たとえば次のような売り方が当てはまります。
逆に、バリエーションを持たない商品や、オプションが 1 つしかない商品では、ほとんど出番がありません。後者では、すべての値が売り切れたときの安全装置のほうが先に働くため、見た目の変化が小さくなります。
最大の効き目は、お客様の手間がひとつ消えることです。サイズを 1 つずつ押して在庫を探す必要がなくなり、並んでいるものはどれを選んでもカートに入れられる状態になります。スマートフォンの小さな画面ほど、この差は大きく感じられます。
在庫の数ではなく Shopify の「購入できるか」を根拠にしているので、在庫が 0 でも販売を続ける設定(継続販売)にしたバリエーションは消えません。受注生産や予約販売を混ぜているストアでも、注文を受けたい選択肢が誤って隠れることはありません。
アプリを入れたのに何も起きない、というのは売り切れ非表示のアプリでよく聞く不満です。このアプリは、埋め込みがテーマでオフになっているときと、公開中のテーマに標準の選択欄が見つからないときに、管理画面の上部へ警告を出します。黙って効かない状態を放っておかない作りです。
商品ページの外、つまりコレクションの一覧・ストア内検索・絞り込みについても、売り切れたバリエーションをオンラインストアの公開対象から外す機能を別に持っています。こちらは既定でオフで、必要なストアだけが自分で有効にします。
正直に書いておくべき制約もあります。導入前に確認してください。
料金は 1 プランだけで、月払いなら $3.49、年払いなら $34.90 です。年払いは月払いの約 2 か月分がお得になる計算です。インストールしてから 7 日間は無料で試せるので、自分のテーマで選択欄が消えるかどうかを確かめてから契約できます。

料金はアプリストアの課金で管理されていて、Shopify の請求にまとめて載ります。無料期間が終わってプランが有効でなくなると、売り切れの選択肢は消えなくなり、商品ページはテーマ本来の表示に戻ります。通信に失敗したときは止めずに動かし続ける作りなので、アプリ側の一時的な障害で急に売り切れが表示され始めることはありません。
インストールの流れは、ほかの Shopify アプリと変わりません。




求められる権限は、テーマの読み取り・商品と在庫の読み取り・公開状態の読み書きの 5 つです。顧客や注文のデータには触れません。公開状態の書き込みは、後述のコレクション・検索から隠す機能だけが使います。
管理画面は「設定」の 1 画面だけで、縦にカードが積み重なっています。上から順に並べると次のとおりです。

日本語で表示しているときは、左のメニューに「よくある質問」が加わることがあります。よくある質問の中身は当社側で登録しているもので、登録が無いあいだはメニュー自体が出ません。
ここからは、カードを 1 枚ずつ開いていきます。設定項目は全部で 9 つ、ボタンは 6 つです。
画面のいちばん上には、2 種類の警告が出ることがあります。どちらも、条件に当てはまらないストアでは何も表示されません。
警告が出ていない状態が、正常に動く前提条件と考えてください。インストール直後にこのカードが見えたら、まずはここを解消します。

埋め込みブロックをテーマで有効にするためのカードです。
テーマのバージョンによっては、選択欄が空のまま表示されたり、埋め込みが自動でオンにならなかったりします。その場合は、後述の「テーマへの追加」の手順で手動でオンにしてください。


設定項目は無く、説明だけのカードです。表示設定が効く範囲が商品ページの選択欄に限られること、一覧ページや検索結果まで隠したいときは下のカードを使うことが書かれています。
このカードが表示設定より上に置かれているのには理由があります。文中で「下の」カードを指しているので、順番が入れ替わると案内が成り立たなくなるためです。

このアプリの中心になるカードです。項目は 2 つです。
変更したら「保存する」を押します。保存した直後から、次に開いた商品ページに新しい設定が反映されます。設定はストアのメタフィールドに保存され、商品ページの Liquid から直接読まれるので、反映に待ち時間はありません。


画面には出てこない動きも、知っておくと運用で迷いません。
?variant= 付きの URL で来たお客様が、いきなり品切れの組み合わせを選んだ状態で着地することがあるためです。在庫のある値へ選択を移してから隠すので、買えないものがカートボタンの上に表示され続けることはありません。選択の移動は最大 5 回で打ち切り、それでも決まらないときは選ばれている値を隠しません。
表示設定とは仕組みがまったく違う機能です。ブラウザで見た目を変えるのではなく、Shopify 側で売り切れたバリエーションをオンラインストアの販売チャネルから外します。そのため、コレクションの一覧・ストア内検索・絞り込みの結果にも効きます。既定ではオフで、ストアの公開状態を書き換える機能であることを理解したうえで有効にします。

この機能には、壊さないための決まりがいくつも入っています。画面からは見えない部分なので、使う前に目を通してください。
最も大事な注意は、アプリを削除する前の手順です。削除した瞬間にストアへの権限が失われるので、非公開にしたバリエーションをアプリから戻すことはできなくなります。在庫が戻っても表示されないまま残ってしまうため、削除する前には必ず「全部公開に戻す」を実行してください。削除後に取り残されたものは、Shopify 管理画面の商品ページから手動で公開し直すことになります。
また、この機能を有効にしても、商品ページの見た目は基本的に変わりません。たとえば「Sunset の 156cm だけが売り切れ」のように同じ値を持つバリエーションがほかに残っている場合、選択欄に出るのは通常の売り切れと同じ表示です。商品ページを整えるのは表示設定の役目、一覧や検索を整えるのはこのカードの役目、と分けて考えてください。
コレクション一覧には、売り切れたバリエーションを含む商品も普通に並びます。下の画像の The Aurora Snowboard は、一部のサイズが品切れでもほかの組み合わせが買えるため、売り切れのバッジは付いていません。

ストア内検索の結果も同じ考え方で並びます。

絞り込みの「在庫あり」「在庫切れ」は、Shopify がバリエーション単位で判定しています。公開対象から外したバリエーションは、こうした絞り込みの計算からも外れます。


この設定が変えるのは管理画面の文言だけです。商品ページのオプション名や値はストアに登録したものがそのまま表示され、このアプリが文言を足すことはありません。そのため、ストアフロントの多言語対応について、このアプリ側で翻訳を用意する必要はありません。
画面のいちばん下には、当社のほかのアプリを紹介する欄があります。設定項目はなく、アプリの動作にも関係しません。
このアプリは、テーマに置くブロックではなく「埋め込みアプリ」として動きます。商品ページのテンプレートにブロックを並べる必要はなく、テーマ全体で 1 つのスイッチをオンにするだけです。
管理画面の「テーマに追加」が使えないときは、次の手順で手動でオンにします。

埋め込みブロックは、商品ページ以外のページでは何も出力しません。トップページやコレクションページの読み込みが重くなることはありません。商品ページでも、表示設定でオフにしているあいだは出力が空になります。
テーマエディタで埋め込みアプリの行を開くと、設定が 1 つだけ現れます。

見せ方が「選択肢を消す」のあいだは、この数値は使われません。機能のオンオフと見せ方をテーマエディタに置いていないのは、管理画面と二重に設定できると、どちらが正しいのか分からなくなるためです。
実際の商品ページで、カラーを切り替えたときの並びを見ていきます。Mint を選ぶと、Mint で品切れの 152cm が選択欄から消え、3 つの長さだけが残ります。

Sunset に切り替えると、Mint では消えていた 152cm が戻り、代わりに Sunset で品切れの 156cm と 160cm が消えます。

全サイズに在庫がある Midnight を選ぶと、4 つの長さがすべて並びます。隠すのはあくまで、その組み合わせで買えない値だけです。

スマートフォンでも、同じ判定がそのまま働きます。


ここで、管理画面側の在庫も確認しておきます。デモストアの The Aurora Snowboard では、Sunset のうち 156cm と 160cm の販売可能数が 0 になっています。商品ページで消えていたのは、まさにこの 2 つでした。

バリエーションを 1 つ開くと、在庫の欄の下に「在庫切れでも販売する」という項目があります。ここがオンのバリエーションは、在庫が 0 でも購入できるので、このアプリは選択欄から消しません。予約販売や受注生産のサイズを残したいときは、このスイッチで区別します。

アプリを使わずに、テーマのコードで売り切れの選択肢を隠すこともできます。ここでは、商品ページで組み合わせごとに判定する方法と、一覧や検索から外す方法を、それぞれ最小限のコードで紹介します。どちらも考え方を示すための例で、そのまま本番のテーマに入れることは想定していません。
まず Liquid で、商品の全バリエーションについて購入できるかどうかを JSON にして書き出します。product.variants をループし、available とオプションの値を並べるだけです。値は必ず json フィルターを通して、引用符や記号で HTML が壊れないようにします。
{%- comment -%} 商品テンプレートのどこか(セクションの外)に置く {%- endcomment -%}
<script type="application/json" id="variant-availability">
[
{%- for v in product.variants -%}
{ "available": {{ v.available | json }}, "options": {{ v.options | json }} }
{%- unless forloop.last -%},{%- endunless -%}
{%- endfor -%}
]
</script>
次に JavaScript で、いま選ばれている値を読み、ほかのオプションと組み合わせたときに買えるバリエーションが無い値を隠します。下の例はラジオボタン型の選択欄を前提にしていて、オプションの並び順と fieldset の並び順が一致していることを仮定しています。
const variants = JSON.parse(document.getElementById('variant-availability').textContent);
const fieldsets = [...document.querySelectorAll('variant-picker fieldset')];
const refresh = () => {
const selected = fieldsets.map((fs) => fs.querySelector('input:checked')?.value);
fieldsets.forEach((fs, index) => {
fs.querySelectorAll('input[type="radio"]').forEach((input) => {
// この値に差し替えたとき、購入できる組み合わせが 1 つでも残るか
const ok = variants.some((v) =>
v.available && v.options.every((value, i) => (i === index ? value === input.value : value === selected[i])),
);
const wrapper = input.closest('label') || input.parentElement;
wrapper.hidden = !ok;
input.disabled = !ok;
});
});
};
document.addEventListener('change', refresh);
refresh();
これで最低限の動きは作れますが、実際のストアで使うには足りない部分がたくさん残ります。
hidden を付けた要素ごと入れ替わり、2 回目以降の選択で元に戻ってしまう。描き直しを監視して当て直す処理が要る<input> と <label> が親子ではなく横並びのテーマでは、ラベルだけが画面に残るコレクションや検索から売り切れたバリエーションを外すのは、テーマのコードではできません。Shopify の Admin API で、バリエーションをオンラインストアの公開対象から外す必要があります。2026-07 以降の API では、バリエーションに対して publicationUpdate を使えます。
mutation UnpublishSoldOutVariants($id: ID!, $variantIds: [ID!]!) {
publicationUpdate(id: $id, input: { publishablesToRemove: $variantIds }) {
publication {
id
}
userErrors {
field
message
}
}
}
$id にはオンラインストアの publication の ID、$variantIds には外したいバリエーションの ID を入れます。1 回に渡せるのは 50 件までです。成功してもエラーが userErrors に入って返ることがあるので、必ず中身を確かめます。
ただし、このミューテーションを 1 回呼べば済むわけではありません。在庫が戻ったときに公開へ戻す仕組み、最後の 1 つを外さない判定、自分が外したものだけを覚えておく記録、数千件の商品を時間内に処理する分割、アプリを外す前に戻す導線まで、運用に耐えるには全部を作り込む必要があります。どれか 1 つでも欠けると、商品ページが開けなくなったり、在庫が戻っても表示されない商品が残ったりします。しかもエラーは何も出ません。
こうした作り込みと、テーマを更新するたびの手直しを考えると、月 $3.49 で任せてしまうほうが割に合うストアが多いはずです。
アプリストアには、売り切れのバリエーションを隠すアプリがほかにもあります。Camouflage: Hide Sold Variants、HiVar : Hide Sold Out Variants、Veil ‑ Hide Sold Variants、Scala ‑ Hide Sold Variants などです。機能の並べ比べではなく、ここではこの記事で解説した設定を前提に、組み合わせ方と乗り換え方を書きます。
同じ選択欄を 2 つのアプリが同時に書き換えると、片方が隠した値をもう片方が戻す、といった食い違いが起きます。どちらのアプリにも不具合が無くても、組み合わせとして正しく動かなくなります。
ほかの売り切れ非表示アプリから乗り換えるときは、次の順で進めると、売り切れが見える時間も二重に効く時間も作らずに済みます。
以前のアプリが、テーマのファイルに直接コードを書き込むタイプだった場合は、削除してもコードが残っていることがあります。そのアプリの案内に従って、残ったコードも取り除いてください。
カラーを画像のスウォッチで見せるアプリや、バリエーションごとに画像を切り替えるアプリの中には、テーマ標準の選択欄を自前の部品に置き換えるものがあります。その場合、このアプリは標準の選択欄を見つけられないので、何もしません。管理画面には「お使いのテーマでは動作しない可能性があります」の警告が出ます。
こうした組み合わせでは、売り切れの扱いは置き換え側のアプリの設定に任せ、このアプリは「コレクション・検索からも隠す」だけを使う、という分担が現実的です。こちらの機能はテーマの選択欄に依存しないので、選択欄の作りに関係なく働きます。
どのアプリを選ぶ場合でも、最初に決めておくとよいのは、品切れの値を「消す」のか「薄く残す」のかです。消すほうがすっきりしますが、再入荷を待つお客様には、そのサイズが存在すること自体が伝わらなくなります。このアプリなら表示設定の見せ方 1 つで切り替えられるので、7 日間の無料期間のうちに両方を試し、問い合わせの数や離脱の様子を見て決める進め方ができます。
シンプル売り切れバリエーション非表示は、商品ページの選択欄から、いま選んでいる組み合わせでは買えない値だけを取り除くアプリです。
サイズやカラーの欠品が日常的に出るストアほど、選択欄に並ぶ取り消し線は、お客様の迷いと問い合わせを増やします。買えるものだけが並ぶ商品ページは、その手間をまとめて取り除いてくれます。
料金は月額 $3.49(年額 $34.90)で、7 日間の無料体験があります。詳しくは Shopify App Store の掲載ページをご覧ください。
UnReact が開発している、在庫や商品ページの表示に関わるアプリも紹介します。