売り切れたバリエーションを非表示にする

商品ページでそれらのバリエーションを削除するか、無効にすることで、お客様が売り切れたバリエーションを選択しないようにできます。

制限事項

このページで説明されているカスタマイズは、以下の場合には機能しません。

  • 商品に複数の商品オプションがある
  • Expressテーマを使用し、商品ページの商品をオーバーレイで表示するように設定している

セクション対応のテーマとセクション非対応のテーマ

セクション対応のテーマの手順

テーマの選択

テーマによってカスタマイズの手順は異なります。以下の指示に従う前にテーマのボタンをクリックしてください。

セクション非対応のテーマの手順

売り切れたバリエーションを非表示にする

セクション非対応のテーマを使用している場合、これらの手順に従って商品ページで売り切れたバリエーションを非表示にします。

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  3. スニペットディレクトリーで、[新しいスニペットを追加する] をクリックします。
  4. 新しいスニペットにremove-sold-outと名付けます。
    Add new snippet
  5. 新しいスニペットファイルに、次のコードを貼り付けます。
{% if product.options.size == 1 %}
<script>
  const addToCartForm = document.querySelector('form[action="/cart/add"]');
  if (window.MutationObserver && addToCartForm !== null) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() {
      let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
      {% for variant in product.variants %}
      {% unless variant.available %}
      variantOptions.forEach(function(element) {
        if (element.value === {{ variant.title | json }}) {
            element.remove();
        }
      });
      {% endunless %}
      {% endfor %}
      observer.disconnect();
    });
    observer.observe(addToCartForm, config);
  }
</script>
{% endif %}
  1. [保存] をクリックします。
  2. レイアウトディレクトリーで、theme.liquidをクリックします。
  3. ファイルの末尾近くで、</body>終了タグの直前に、次のコードを貼り付けます。
{% render 'remove-sold-out' %}
  1. [保存] をクリックします。

売り切れたバリエーションを無効にする

セクション非対応のテーマを使用している場合、これらの手順に従って売り切れたバリエーションを無効にします。バリエーションは商品ページに引き続き表示されますが、選択できません。

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  3. スニペットディレクトリーで、[新しいスニペットを追加する] をクリックします。
  4. 新しいスニペットにdisable-sold-outと名付けます。
    Add new snippet
  5. 新しいスニペットファイルに、次のコードを貼り付けます。
{% if product.options.size == 1 %}
<script>
  const addToCartForm = document.querySelector('form[action="/cart/add"]');
  if (window.MutationObserver && addToCartForm !== null) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() {
      let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
      {% for variant in product.variants %}
      {% unless variant.available %}
      variantOptions.forEach(function(element) {
        if (element.value === {{ variant.title | json }}) {
            element.setAttribute('disabled', '');
        }
      });
      {% endunless %}
      {% endfor %}
      observer.disconnect();
    });
    observer.observe(addToCartForm, config);
  }
</script>
{% endif %}
  1. [保存] をクリックします。
  2. レイアウトディレクトリーで、theme.liquidをクリックします。
  3. ファイルの末尾近くで、</body>終了タグの直前に、次のコードを貼り付けます。
{% render 'disable-sold-out' %}
  1. [保存] をクリックします。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す