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

セクション対応のテーマとセクション非対応のテーマ
セクション対応のテーマの手順
商品ページに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番号を追加します:[保存] をクリックします。