2026/10/26

【徹底解説】Shopify アプリ「シンプル売り切れバリエーション非表示|自動在庫切れ非表示」でできること

@ 信条刃

Shopify

【徹底解説】Shopify アプリ「シンプル売り切れバリエーション非表示|自動在庫切れ非表示」でできること

シンプル売り切れバリエーション非表示のメイン画像。商品ページの売り切れバリエーションを簡単に非表示にできる

カラーを選び直すたびに、押せないサイズのボタンが半分並んでいる。アパレルやスポーツ用品のネットショップを Shopify で運営していると、この光景は珍しくありません。Shopify の公式テーマは、在庫が無くなったバリエーションも選択肢として描き続け、取り消し線を引いて「買えません」と示すだけだからです。

この記事では、当社 UnReact が開発した Shopify アプリ「シンプル売り切れバリエーション非表示|自動在庫切れ非表示」を取り上げ、管理画面のカードを上から順に 1 枚ずつ開きながら、設定項目が何を決めるのかを解説します。商品ページで何が起きるのか、どんな条件のときにアプリがあえて何もしないのか、オンラインストアの公開状態に触れる機能を使う前に何を知っておくべきか、といった運用で効いてくる部分まで書いています。

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

シンプル売り切れバリエーション非表示とは

ひとことで言えば、バリエーションの選択欄を「いま買えるものだけの一覧」に変えるアプリです。在庫の数字を直接見張るのではなく、Shopify が商品ページに渡している「この組み合わせは購入できるか」という判定を読み取り、買えない選択肢をブラウザ上で隠します。

アプリを入れていない状態の商品ページを先に見ておきます。下の画像では Sunset を選んだときに、在庫の無い 156cm と 160cm が取り消し線付きで並んだままです。お客様は押してみるまで、その長さが手に入らないことに確信が持てません。

アプリを入れていない商品ページ。Sunset を選ぶと在庫切れの 156cm と 160cm が取り消し線付きで残っている

このアプリの判定は、ほかのオプションとの「組み合わせ」で決まります。仕組みを順に追うと次のとおりです。

  1. 商品ページが開くと、アプリの埋め込みブロックが、その商品の全バリエーションについて「購入できるか」を一覧にして書き出す
  2. ブラウザ側のスクリプトが、いま選ばれているカラーやサイズを読み取る
  3. 選ばれている値と組み合わせたときに、購入できるバリエーションが 1 つも残らない値だけを、選択欄から隠す
  4. お客様が別のカラーに切り替えると、隠した値をいったん全部戻してから計算し直す

この順序のおかげで、「Mint では 152cm が品切れだが、Sunset の 152cm は残っている」といった細かな欠品の出方にもそのまま追随します。

別のカラーを選ぶとサイズの並びが切り替わることを、Mint と Sunset の 2 つの商品ページを並べて示した掲載画像

向いているのは、オプションを 2 つ以上組み合わせて売る商品です。たとえば次のような売り方が当てはまります。

  • アパレルとシューズ … 1 着の服が 4 色 × 5 サイズで 20 通りになり、人気の色の M だけが先に消える
  • スノーボードやスキー … 長さ違いのモデルを複数のグラフィックで展開している
  • 雑貨やインテリア小物 … カラー展開が広く、売れ筋の色から順に品切れが出る
  • 数量限定のコラボ商品 … 一部の組み合わせだけが早く完売する

逆に、バリエーションを持たない商品や、オプションが 1 つしかない商品では、ほとんど出番がありません。後者では、すべての値が売り切れたときの安全装置のほうが先に働くため、見た目の変化が小さくなります。

シンプル売り切れバリエーション非表示のメリット

選べないボタンを押させずに済む

最大の効き目は、お客様の手間がひとつ消えることです。サイズを 1 つずつ押して在庫を探す必要がなくなり、並んでいるものはどれを選んでもカートに入れられる状態になります。スマートフォンの小さな画面ほど、この差は大きく感じられます。

予約販売の商品を巻き込まない

在庫の数ではなく Shopify の「購入できるか」を根拠にしているので、在庫が 0 でも販売を続ける設定(継続販売)にしたバリエーションは消えません。受注生産や予約販売を混ぜているストアでも、注文を受けたい選択肢が誤って隠れることはありません。

効いていないことに気づける

アプリを入れたのに何も起きない、というのは売り切れ非表示のアプリでよく聞く不満です。このアプリは、埋め込みがテーマでオフになっているときと、公開中のテーマに標準の選択欄が見つからないときに、管理画面の上部へ警告を出します。黙って効かない状態を放っておかない作りです。

コレクションや検索まで手を伸ばせる

商品ページの外、つまりコレクションの一覧・ストア内検索・絞り込みについても、売り切れたバリエーションをオンラインストアの公開対象から外す機能を別に持っています。こちらは既定でオフで、必要なストアだけが自分で有効にします。

シンプル売り切れバリエーション非表示のデメリット

正直に書いておくべき制約もあります。導入前に確認してください。

  • 動くのは商品ページの選択欄だけです。 コレクションページの商品カードや検索結果に出る「売り切れ」の表示は、表示設定を変えても変わりません。そちらまで隠したいときは、後述の公開対象から外す機能を使います。
  • テーマによっては効きません。 Shopify 公式の無料テーマ(Horizon・Dawn など)で動作を確認していますが、選択欄を独自に作り直した有料テーマや、ピッカーを置き換える別アプリと組み合わせた場合は、アプリが選択欄を見つけられず何もしません。
  • 品ぞろえの広さは伝わりにくくなります。 消してしまうと、そのサイズが存在すること自体が見えません。再入荷を待つお客様を大切にしたい場合は、薄く表示して押せなくする見せ方を選ぶのが無難です。
  • 公開対象から外す機能は、アプリを削除すると元に戻せません。 削除と同時にストアへの権限が失われるため、非公開にしたバリエーションを戻す手段がなくなります。使う場合は、削除の前に戻す操作が必須です。
  • 管理画面の作りはシンプルです。 商品ごと・コレクションごとに対象を絞る設定はありません。全商品に一律でかかります。

料金プラン

料金は 1 プランだけで、月払いなら $3.49、年払いなら $34.90 です。年払いは月払いの約 2 か月分がお得になる計算です。インストールしてから 7 日間は無料で試せるので、自分のテーマで選択欄が消えるかどうかを確かめてから契約できます。

アプリストアの価格設定の欄。Basic Plan が月額 $3.49、年額 $34.90 で、7 日間の無料体験が付いている

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

インストール

インストールの流れは、ほかの Shopify アプリと変わりません。

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

Shopify 管理画面の左下に並ぶ設定のメニュー

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

アプリと販売チャネルの画面。右上にアプリストアへ進むボタンがある

  1. Shopify App Store で「シンプル売り切れバリエーション非表示」を探して、掲載ページを開きます。

アプリストアのシンプル売り切れバリエーション非表示の掲載ページ。月額 $3.49 と無料体験の案内、機能の箇条書きが並んでいる

  1. 「インストール」を押します。すでに入れてあるストアでは、ボタンが「開く」に変わります。

インストール済みのストアで開いた掲載ページ。インストールの代わりに開くボタンが表示されている

  1. 権限の確認と料金プランの画面が続くので、内容を確かめて承認します。

求められる権限は、テーマの読み取り・商品と在庫の読み取り・公開状態の読み書きの 5 つです。顧客や注文のデータには触れません。公開状態の書き込みは、後述のコレクション・検索から隠す機能だけが使います。

アプリ管理画面の構成

管理画面は「設定」の 1 画面だけで、縦にカードが積み重なっています。上から順に並べると次のとおりです。

  1. 埋め込みが無効なときの警告(条件を満たすときだけ)
  2. テーマが対応していないときの警告(条件を満たすときだけ)
  3. テーマに機能を追加
  4. このアプリが動作する場所
  5. 表示設定
  6. コレクション・検索からも隠す
  7. 言語設定
  8. おすすめアプリ

アプリの設定画面の全体。テーマに機能を追加、このアプリが動作する場所、表示設定、コレクション・検索からも隠すのカードが縦に並ぶ

日本語で表示しているときは、左のメニューに「よくある質問」が加わることがあります。よくある質問の中身は当社側で登録しているもので、登録が無いあいだはメニュー自体が出ません。

各画面の説明

ここからは、カードを 1 枚ずつ開いていきます。設定項目は全部で 9 つ、ボタンは 6 つです。

警告の帯(埋め込みが無効・テーマが対応していない)

画面のいちばん上には、2 種類の警告が出ることがあります。どちらも、条件に当てはまらないストアでは何も表示されません。

  • アプリがテーマで有効になっていません … 公開中のテーマの設定に、このアプリの埋め込みブロックが見つからないときに赤い帯で出ます。この状態では、表示設定をどう変えても商品ページは変わりません。下の「テーマに追加」から有効にすると消えます。
  • お使いのテーマでは動作しない可能性があります … 公開中のテーマのファイルを読み、標準のバリエーション選択欄の目印が見つからなかったときに出ます。テーマを大きく作り替えている場合や、選択欄を別の部品に置き換えるアプリを入れている場合が当てはまります。アプリはテーマを壊さないことを優先して、目印が無いページでは手を出しません。

警告が出ていない状態が、正常に動く前提条件と考えてください。インストール直後にこのカードが見えたら、まずはここを解消します。

テーマに機能を追加

テーマに機能を追加のカード。テーマを選択の欄に Horizon(公開中のテーマ)が入り、テーマに追加とテーマをプレビューのボタンが並ぶ

埋め込みブロックをテーマで有効にするためのカードです。

  • テーマを選択(既定: 公開中のテーマ)… 追加先のテーマを選びます。ストアに複数のテーマがある場合は、ここで下書きのテーマを選んで先に試すこともできます。
  • テーマに追加 … テーマエディタが新しいタブで開き、このアプリの埋め込みがオンになった状態で表示されます。商品ページのテンプレートで開くので、その場で選択欄を切り替えて動きを見られます。右上の「保存」を押すまでストアには反映されません。
  • テーマをプレビュー … 選んだテーマの商品ページを、変更を加えずにテーマエディタで開きます。

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

テーマに追加のカードを使って 1 クリックでテーマに機能を追加できることを示した掲載画像

このアプリが動作する場所

このアプリが動作する場所の案内。商品ページのバリエーションの選択欄で動作すると書かれている

設定項目は無く、説明だけのカードです。表示設定が効く範囲が商品ページの選択欄に限られること、一覧ページや検索結果まで隠したいときは下のカードを使うことが書かれています。

このカードが表示設定より上に置かれているのには理由があります。文中で「下の」カードを指しているので、順番が入れ替わると案内が成り立たなくなるためです。

表示設定

表示設定のカード。売り切れの選択肢を消すにチェックが入り、見せ方は選択肢を消すが選ばれている

このアプリの中心になるカードです。項目は 2 つです。

  • 売り切れの選択肢を消す(既定: オン)… 機能全体のスイッチです。オフにして保存すると、埋め込みブロックは在庫の一覧もスクリプトも出力しなくなり、商品ページはテーマ本来の表示に戻ります。ストアフロントに余計な読み込みを残さない作りです。
  • 見せ方(既定: 選択肢を消す)… 売り切れの値をどう扱うかを 2 つから選びます。
    • 選択肢を消す … 売り切れの値を選択欄から見えなくします。ボタン型でもドロップダウン型でも、押せる選択肢だけが残ります。
    • グレーアウトして選択不可にする … 値は残したまま薄く表示し、押せないようにします。見た目だけでなく、選択できない状態であることを読み上げソフトにも伝えます。

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

見せ方をグレーアウトにした商品ページ。売り切れの 156cm と 160cm が薄い色で残り、押せなくなっている

売り切れの選択肢を削除するか薄く表示するかを選べることを、表示設定のカードで示した掲載画像

画面には出てこない動きも、知っておくと運用で迷いません。

  • 全部が売り切れた商品では何も隠しません。 選択欄が空になって何も選べなくなるのを防ぐためです。同じ理由で、あるオプションの値が全部隠れてしまう組み合わせでは、そのオプションには手を付けません。
  • 選ばれている値そのものが売り切れのときは、先に選択を移します。 広告や共有リンクから ?variant= 付きの URL で来たお客様が、いきなり品切れの組み合わせを選んだ状態で着地することがあるためです。在庫のある値へ選択を移してから隠すので、買えないものがカートボタンの上に表示され続けることはありません。選択の移動は最大 5 回で打ち切り、それでも決まらないときは選ばれている値を隠しません。
  • おすすめ商品のクイック追加には触れません。 隠す範囲を、そのページの主役の商品のフォームの中だけに絞っています。下に並ぶ別の商品のサイズ欄を誤って消さないためです。
  • テーマが選択欄を描き直しても追随します。 選択を変えるたびに部分的に描き直すテーマでも、描き直しのたびに全部戻してから計算し直します。

コレクション・検索からも隠す

コレクション・検索からも隠すのカード。アンインストールすると元に戻せない旨の警告、非公開にするチェックボックス、件数 0、保存する・今すぐ適用する・全部公開に戻すのボタンが並ぶ

表示設定とは仕組みがまったく違う機能です。ブラウザで見た目を変えるのではなく、Shopify 側で売り切れたバリエーションをオンラインストアの販売チャネルから外します。そのため、コレクションの一覧・ストア内検索・絞り込みの結果にも効きます。既定ではオフで、ストアの公開状態を書き換える機能であることを理解したうえで有効にします。

  • 売り切れのバリエーションをオンラインストアから非公開にする(既定: オフ)… チェックを入れて「保存する」を押すと有効になり、その場で売り切れたバリエーションを探して非公開にし始めます。チェックを外して保存すると、このアプリが非公開にしたものを公開に戻す処理が始まります。
  • このアプリが非公開にしているバリエーション … いまアプリの記録に残っている件数です。ストア側で自分で非公開にしたものは数えません。
  • 保存する … チェックの状態を保存します。オンに切り替えたときは、続けて 1 回分の適用も走ります。
  • 今すぐ適用する … 売り切れたバリエーションを探して非公開にする処理の続きを実行します。機能が有効なときだけ押せます。
  • 全部公開に戻す … アプリが非公開にしたバリエーションを、記録に基づいて公開へ戻します。非公開にしたものがあるときだけ押せます。

コレクションや検索からも売り切れを非表示にできることを、このカードを使って示した掲載画像

この機能には、壊さないための決まりがいくつも入っています。画面からは見えない部分なので、使う前に目を通してください。

  • 商品で最後に残った公開中のバリエーションは外しません。 公開中のバリエーションが 1 つも無くなると、商品ページそのものが開けなくなり、広告や検索からの流入が行き止まりになります。そのため、全部売り切れた商品では何もしません。
  • 公開に戻すのは、アプリが非公開にしたものだけです。 マーチャントが意図して隠していたバリエーションを、在庫が戻ったからといって勝手に表に出すことはありません。
  • 在庫が戻れば自動で公開に戻ります。 在庫が動いたという通知を受け取るたびに、その商品について判定をやり直します。判定に使うのは在庫の数ではなく購入できるかどうかなので、継続販売の設定をしたバリエーションは外れません。
  • 対象が多いストアでは途中で止まります。 1 回の処理には時間の上限があり、超えると「対象が多いため、適用が途中で止まっています」と表示されます。そのときは「今すぐ適用する」を押すと、止まったところから続きを進めます。
  • 反映されるのはオンラインストアだけです。 ほかの販売チャネルでの公開状態は変わりません。

最も大事な注意は、アプリを削除する前の手順です。削除した瞬間にストアへの権限が失われるので、非公開にしたバリエーションをアプリから戻すことはできなくなります。在庫が戻っても表示されないまま残ってしまうため、削除する前には必ず「全部公開に戻す」を実行してください。削除後に取り残されたものは、Shopify 管理画面の商品ページから手動で公開し直すことになります。

また、この機能を有効にしても、商品ページの見た目は基本的に変わりません。たとえば「Sunset の 156cm だけが売り切れ」のように同じ値を持つバリエーションがほかに残っている場合、選択欄に出るのは通常の売り切れと同じ表示です。商品ページを整えるのは表示設定の役目、一覧や検索を整えるのはこのカードの役目、と分けて考えてください。

コレクション一覧には、売り切れたバリエーションを含む商品も普通に並びます。下の画像の The Aurora Snowboard は、一部のサイズが品切れでもほかの組み合わせが買えるため、売り切れのバッジは付いていません。

デモストアのコレクション一覧。一部のサイズが品切れの The Aurora Snowboard にも売り切れのバッジは付かず、通常どおり並んでいる

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

デモストアで snowboard と検索した結果の一覧。売り切れた商品にだけ売り切れのバッジが付いている

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

コレクション一覧の出品状況の絞り込みを開いた状態。在庫ありと在庫切れのチェックボックスが並んでいる

言語設定

言語設定のカード。言語を選択の欄に日本語が入り、変更するボタンがある

  • 言語を選択(既定: いま表示している言語)… 管理画面の表示言語を選び、「変更する」で切り替えます。日本語・英語を含む 20 言語から選べます。

この設定が変えるのは管理画面の文言だけです。商品ページのオプション名や値はストアに登録したものがそのまま表示され、このアプリが文言を足すことはありません。そのため、ストアフロントの多言語対応について、このアプリ側で翻訳を用意する必要はありません。

おすすめアプリ

画面のいちばん下には、当社のほかのアプリを紹介する欄があります。設定項目はなく、アプリの動作にも関係しません。

テーマへの追加

このアプリは、テーマに置くブロックではなく「埋め込みアプリ」として動きます。商品ページのテンプレートにブロックを並べる必要はなく、テーマ全体で 1 つのスイッチをオンにするだけです。

管理画面の「テーマに追加」が使えないときは、次の手順で手動でオンにします。

  1. Shopify 管理画面の「オンラインストア」→「テーマ」で、公開中のテーマの「カスタマイズ」を開きます。
  2. 左上の埋め込みアプリのアイコンを押します。
  3. 「売り切れバリエーション非表示」のスイッチをオンにします。
  4. 右上の「保存」を押します。

テーマエディタの埋め込みアプリの一覧。売り切れバリエーション非表示のスイッチがオンになっている

埋め込みブロックは、商品ページ以外のページでは何も出力しません。トップページやコレクションページの読み込みが重くなることはありません。商品ページでも、表示設定でオフにしているあいだは出力が空になります。

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

テーマエディタで埋め込みアプリの行を開くと、設定が 1 つだけ現れます。

売り切れバリエーション非表示の行を開いた状態。表示設定の見出しの下にグレーアウトの濃さ(%)のスライダーがあり、40 になっている

  • グレーアウトの濃さ(%)(範囲: 10〜100、5 刻み、既定: 40)… 見せ方を「グレーアウトして選択不可にする」にしたとき、売り切れの選択肢をどのくらいの濃さで描くかを決めます。小さくするほど薄く、大きくするほどはっきり見えます。背景が濃いテーマでは、40 だと文字が沈んで読みにくくなることがあるので、50〜60 に上げると判別しやすくなります。

見せ方が「選択肢を消す」のあいだは、この数値は使われません。機能のオンオフと見せ方をテーマエディタに置いていないのは、管理画面と二重に設定できると、どちらが正しいのか分からなくなるためです。

実際の商品ページで、カラーを切り替えたときの並びを見ていきます。Mint を選ぶと、Mint で品切れの 152cm が選択欄から消え、3 つの長さだけが残ります。

Mint を選んだ商品ページ。148cm・156cm・160cm の 3 つだけが並び、品切れの 152cm は表示されない

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

Sunset を選んだ商品ページ。148cm と 152cm だけが残り、品切れの 156cm と 160cm は表示されない

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

Midnight を選んだ商品ページ。全サイズに在庫があるため 148cm から 160cm までの 4 つが並んでいる

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

スマートフォンで Mint を選んだ商品ページ。品切れの 152cm が選択欄に出ていない

スマートフォンで Sunset を選んだ商品ページ。サイズは 148cm と 152cm の 2 つだけになっている

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

Shopify 管理画面の商品ページのバリエーション一覧。Sunset を開くと 156cm と 160cm の販売可能数が 0 になっている

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

Sunset / 156cm のバリエーション詳細の在庫欄。販売可能が 0 で、在庫切れでも販売するがオフになっている

コードで自作する場合

アプリを使わずに、テーマのコードで売り切れの選択肢を隠すこともできます。ここでは、商品ページで組み合わせごとに判定する方法と、一覧や検索から外す方法を、それぞれ最小限のコードで紹介します。どちらも考え方を示すための例で、そのまま本番のテーマに入れることは想定していません。

商品ページの選択欄は、Liquid と JavaScript で隠せる

まず 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> が親子ではなく横並びのテーマでは、ラベルだけが画面に残る
  • ドロップダウン型の選択欄、おすすめ商品のクイック追加など、テーマごとに違う形への対応が要る
  • テーマを更新するたびに、書き足したコードを移し直す必要がある

一覧や検索から外すには、Admin API で公開状態を変える

コレクションや検索から売り切れたバリエーションを外すのは、テーマのコードではできません。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 などです。機能の並べ比べではなく、ここではこの記事で解説した設定を前提に、組み合わせ方と乗り換え方を書きます。

売り切れ非表示のアプリは、1 つだけ有効にする

同じ選択欄を 2 つのアプリが同時に書き換えると、片方が隠した値をもう片方が戻す、といった食い違いが起きます。どちらのアプリにも不具合が無くても、組み合わせとして正しく動かなくなります。

ほかの売り切れ非表示アプリから乗り換えるときは、次の順で進めると、売り切れが見える時間も二重に効く時間も作らずに済みます。

  1. このアプリをインストールし、表示設定はそのままにしておく
  2. テーマエディタの埋め込みアプリで、以前のアプリのスイッチをオフにする
  3. 同じ画面で「売り切れバリエーション非表示」をオンにして保存する
  4. 商品ページでカラーを 2 回以上切り替え、品切れの値が消えることを確かめる
  5. 問題がなければ、以前のアプリを削除する

以前のアプリが、テーマのファイルに直接コードを書き込むタイプだった場合は、削除してもコードが残っていることがあります。そのアプリの案内に従って、残ったコードも取り除いてください。

選択欄を置き換えるアプリとは、役割を分ける

カラーを画像のスウォッチで見せるアプリや、バリエーションごとに画像を切り替えるアプリの中には、テーマ標準の選択欄を自前の部品に置き換えるものがあります。その場合、このアプリは標準の選択欄を見つけられないので、何もしません。管理画面には「お使いのテーマでは動作しない可能性があります」の警告が出ます。

こうした組み合わせでは、売り切れの扱いは置き換え側のアプリの設定に任せ、このアプリは「コレクション・検索からも隠す」だけを使う、という分担が現実的です。こちらの機能はテーマの選択欄に依存しないので、選択欄の作りに関係なく働きます。

先に決めるのは、隠すか見せるか

どのアプリを選ぶ場合でも、最初に決めておくとよいのは、品切れの値を「消す」のか「薄く残す」のかです。消すほうがすっきりしますが、再入荷を待つお客様には、そのサイズが存在すること自体が伝わらなくなります。このアプリなら表示設定の見せ方 1 つで切り替えられるので、7 日間の無料期間のうちに両方を試し、問い合わせの数や離脱の様子を見て決める進め方ができます。

まとめ

シンプル売り切れバリエーション非表示は、商品ページの選択欄から、いま選んでいる組み合わせでは買えない値だけを取り除くアプリです。

  • 判定は Shopify の「購入できるか」に従うので、継続販売のバリエーションは消えない
  • 消すか、薄く表示して押せなくするかを、管理画面の 1 項目で選べる
  • 全部売り切れた商品や、選択欄を見つけられないテーマでは、壊さないことを優先して何もしない
  • コレクション・検索・絞り込みまで整えたいときは、公開対象から外す機能を別に有効にできる
  • その機能を使ったら、アプリを削除する前に必ず「全部公開に戻す」を実行する

サイズやカラーの欠品が日常的に出るストアほど、選択欄に並ぶ取り消し線は、お客様の迷いと問い合わせを増やします。買えるものだけが並ぶ商品ページは、その手間をまとめて取り除いてくれます。

シンプル売り切れバリエーション非表示の掲載画像。商品ページの売り切れのバリエーションを非表示にできる

料金は月額 $3.49(年額 $34.90)で、7 日間の無料体験があります。詳しくは Shopify App Store の掲載ページをご覧ください。

おすすめ Shopify アプリ

UnReact が開発している、在庫や商品ページの表示に関わるアプリも紹介します。

© 2021 powerd by UnReact