無料体験を始める

商品ページにSKU番号を表示する

SKU (最小管理単位) とは数字 (通常は英数字) であり、商品を識別して在庫を追跡できるようにするために使用されます。ストアでSKUを使用している場合、各商品バリエーションに対して個別に固有の番号が割り当てられます。テーマコードを編集して、商品ページにバリエーションのSKU番号を表示できます。

バリエーションSKUの例

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

メモ

このチュートリアルの手順は、「セクション対応」または「セクション非対応」のテーマのどちらを使用しているかによって異なります。セクション対応のテーマを使用している場合は、ドラッグアンドドロップでホームページのレイアウトを配置できます。セクション非対応のテーマを使用している場合は、ドラッグアンドドロップができません。

お使いのテーマがセクションに対応しているかを確認するには、テーマのコードを編集するのページに移動します。セクションディレクトリーにファイルがある場合、セクション対応のテーマを使用していることになります。セクション非対応のテーマは、2016年10月より前にリリースされており、[セクション] ディレクトリにはファイルがありません。

セクション対応のテーマを使用している場合は、[セクション対応のテーマ] ボタンをクリックして表示される手順に従ってください。セクション非対応の古いテーマを使用している場合は、[セクション非対応のテーマ] ボタンをクリックして表示される手順に従ってください。

目次

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

商品ページにSKU番号を表示する

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
[セクション] ディレクトリで、product.liquidまたはproduct-template.liquidをクリックします。
次のLiquidタグを探します。

{{ product.title }}

このコードは、商品ページで商品名をレンダリングします。

{{ product.title }}を含むコード列の下の新しい行に、次のコードを貼り付けます。

{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>

[保存] をクリックします。

テーマの選択

このカスタマイズの次のステップは、テーマによって異なります。テーマのボタンをクリックし、手順に従ってください。

Boundless

Boundlessの手順

アセットディレクトリーで、theme.js.liquidをクリックします。
variant.skuを探します。
- variant.skuが見つかったなら、カスタマイズは完了です。
- variant.skuが見つからなかったなら、次のステップに進みます。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(function() {
    const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
    if (productJson.length > 0) {
      productJson.forEach((product) => {
        const sectionId = product.id.replace("ProductJson-", "shopify-section-");
        const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
        const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
        const productInfo = JSON.parse(product.innerHTML);
        const inputValues = [];
        const optionValues = [];
        let count = 0;
        inputSelects.forEach((input) => {
          inputValues.push(input.value);
          optionValues.push(count);
          input.addEventListener('change', (evt) => {
            const currentValue = evt.currentTarget.value.toString();
            const changedIndex = inputSelects.indexOf(evt.target);
            inputValues[changedIndex] = currentValue;
            variantSKU.innerText = ' ';
            productInfo.variants.forEach((variant) => {
              if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
                variantSKU.innerText = variant.sku;
              }
            });
          });
          count += 1;
        });
      });
    }
  }, 100);
});

[保存] をクリックします。

Brooklyn

Brooklynの手順

アセットディレクトリーで、theme.js.liquidをクリックします。
variant.skuを探します。
- variant.skuが見つかったなら、カスタマイズは完了です。
- variant.skuが見つからなかったなら、次のステップに進みます。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const productInfo = JSON.parse(product.innerHTML);
      const radioButtons = document.querySelector('.single-option-radio');
      let inputSelects;
      if (radioButtons !== null) {
        inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-radio')];
      } else {
        inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector__radio')];
      }
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        if (radioButtons !== null) {
          inputValues.push(input.firstElementChild.value);
        } else {
          inputValues.push(input.value);
        }
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.target.value.toString();
          const changedIndex = inputSelects.indexOf(evt.currentTarget);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
      count += 1;
      });
    });
  }
});

[保存] をクリックします。

Debut

Debutの手順

アセットディレクトリーで、theme.jsをクリックします。
variant.skuを探します。
- variant.skuが見つかったなら、カスタマイズは完了です。
- variant.skuが見つからなかったなら、次のステップに進みます。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

[保存] をクリックします。

Express

Expressの手順

[レイアウト] ディレクトリーで、theme.liquidをクリックします。
</body>終了タグを探します。
</body>終了タグのすぐ上の行に、次のコードを貼り付けます。

<script>
document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[data-product-json]')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = "shopify-section-" + product.closest('[data-section-id]').dataset.sectionId;
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .form__input--select')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});
</script>

[保存] をクリックします。

Minimal

Minimalの手順

アセットディレクトリーで、theme.jsをクリックします。
variant.skuを探します。
- variant.skuが見つかったなら、カスタマイズは完了です。
- variant.skuが見つからなかったなら、次のステップに進みます。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

[保存] をクリックします。

Narrative

Narrativeの手順

アセットディレクトリーで、custom.jsをクリックします。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[data-product-json]')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = "shopify-section-" + product.closest('[data-section-id]').dataset.sectionId;
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

[保存] をクリックします。

Simple

Simpleの手順

アセットディレクトリーで、theme.js.liquidをクリックします。
variant.skuを探します。
- variant.skuが見つかったなら、カスタマイズは完了です。
- variant.skuが見つからなかったなら、次のステップに進みます。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

[保存] をクリックします。

Supply

Supplyの手順

アセットディレクトリーで、theme.js.liquidをクリックします。
variant.skuを探します。
- variant.skuが見つかったなら、カスタマイズは完了です。
- variant.skuが見つからなかったなら、次のステップに進みます。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

[保存] をクリックします。

Venture

Ventureの手順

アセットディレクトリーで、theme.jsをクリックします。
variant.skuを探します。
- variant.skuが見つかったなら、カスタマイズは完了です。
- variant.skuが見つからなかったなら、次のステップに進みます。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

[保存] をクリックします。

管理画面から商品バリエーションにSKU番号を追加する

商品ページにSKUを表示するには、管理画面から商品バリエーションにSKU番号を追加する必要があります。

管理画面から [商品管理] に移動します。
編集する商品をクリックします。
複数のバリエーションがある商品については、[バリエーション] セクションで次のようにSKU番号を追加します。
[保存] をクリックします。

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

商品ページにSKU番号を表示する

手順

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
テンプレートディレクトリーで、product.liquidをクリックします。
次のLiquidタグを探します。

{{ product.title }}

このコードは、商品ページで商品名をレンダリングします。

{{ product.title }}を含むコード列の下の新しい行に、次のコードを貼り付けます。

{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>

[保存] をクリックします。
BrooklynやVentureではない無料のShopifyテーマを使用している場合は、以下のコード列を探します。

var selectCallback = function(variant, selector) {

上記のコード列がproduct.liquidで見つからない場合、[レイアウト] ディレクトリーのtheme.liquidで見つかります。

BrooklynとVenture：BrooklynやVentureを使用している場合、別のコード列を見つけて編集する必要があります。[アセット] ディレクトリで、theme.js.liquidをクリックし、以下のコード列を探します。

theme.productVariantCallback = function (variant, selector) {

下の新しい行に、次のコードを貼り付けます。

if (variant) {
      document.querySelector('.variant-sku').innerText = variant.sku;
    }
    else {
      document.querySelector('.variant-sku').innerText = '';
    }

コードは次のように表示されます。

var selectCallback = function(variant, selector) {

      if (variant) {
        document.querySelector('.variant-sku').innerText = variant.sku;
      }
      else {
        document.querySelector('.variant-sku').innerText = '';
      }

        self.productPage({
          money_format: theme.moneyFormat,
          variant: variant,
          selector: selector,
          translations: {
            add_to_cart : theme.productStrings.addToCart,
            sold_out : theme.productStrings.soldOut,
            unavailable : theme.productStrings.unavailable
          }
        });
      };

[保存] をクリックします。

管理画面から商品バリエーションにSKU番号を追加する

商品ページにSKUを表示するには、管理画面から商品バリエーションにSKU番号を追加する必要があります。

管理画面から [商品管理] に移動します。
編集する商品をクリックします。
複数のバリエーションがある商品については、[バリエーション] セクションで以下のようにSKU番号を追加します：
バリエーションがない商品については、[在庫] セクションで、以下のようにSKU番号を追加します：
[保存] をクリックします。

お探しの情報が見つかりませんか？いつでもお気軽にお問い合わせください。

ヘルプセンターアシスタント