Shopifyで商品ページにSKU（型番）とJANコードを表示できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/10/26

はじめに

型番 1 つ、JAN コード 13 桁。部品・工具・家電・ホビー用品のように「型番で指名買いされる商品」では、この 2 つの数字が商品説明のどんな文章よりも先に見られます。ところが Shopify の標準テーマは、SKU をラベル無しで小さく出すか、まったく出さないかのどちらかで、バーコード（JAN / EAN / UPC）に至ってはどのテーマも表示しません。

「シンプル型番・JANコード表示｜お手軽SKU・商品コード表示」は、Shopify の商品登録画面にすでに入っている SKU とバーコードを読み取り、商品ページに「SKU：ABC-123」「JAN：4901234567894」のように、ラベル付きの文字列で表示する Shopify アプリです。お客様がバリエーション（色・サイズ）を切り替えると、表示される値もその場で切り替わります。テーマのコードを編集する必要は一切ありません。テーマエディタでブロックを 1 つ追加し、ラベル・並び方・色・文字の大きさ・余白を選ぶだけです。設定項目は全部で 17 個、すべてこのガイドで説明します。

Shopify は、ネットショップを誰でも立ち上げられる EC プラットフォームです。基本機能に無いものは「Shopify アプリ」を追加して補います。このアプリもその 1 つで、Shopify App Store からインストールして使います。

料金は月額 $2.99（年額プランなら $29.99 で 2 か月分お得）、インストールから 7 日間は無料でお試しいただけます。無料期間中に削除すれば料金はかかりません。

アプリストアのページはこちらです: https://apps.shopify.com/ur-sku-barcode-display

シンプル型番・JANコード表示のメイン画像。商品ページに型番と JAN コードが表示されている

「シンプル型番・JANコード表示」でできること

このアプリは Shopify の型番・JAN コード表示に絞ったアプリです。できることは次の 5 つです。

商品ページに SKU（型番）とバーコード（JAN / EAN / UPC）を表示する
お客様がバリエーションを切り替えると、表示される値もすぐに切り替わる
ラベルを自由に決める（空にすれば値だけを表示する）
縦並び・横並びのレイアウトと、横並びの区切り文字を選ぶ
色・文字の大きさ・余白をコードを書かずに調整する

商品ページに SKU と JAN コードをラベル付きで並べる

商品ページの好きな位置に、SKU とバーコードの 2 行を表示します。値は Shopify の商品登録画面に入れたものをそのまま使うので、アプリ側で型番を入力し直す必要はありません。

商品ページに「SKU SNB-CMP-ICE」「JAN 4901234567001」が縦に並んで表示されている

アプリストアの掲載画像。商品ページに型番と JAN コードを表示

バリエーションを切り替えると値が追随する

色やサイズを選び直すと、ページを読み込み直さなくても SKU と JAN コードがそのバリエーションの値に変わります。Horizon・Dawn などの Shopify 標準テーマはもちろん、バリエーション切替のイベントを独自に実装しているテーマでも、URL の変化を監視する仕組みで追随します（詳しくは「うまく表示されないときは」をご覧ください）。

同じ商品で「Dawn」を選ぶと「SKU SNB-CMP-DAWN」「JAN 4901234567002」に切り替わる

アプリストアの掲載画像。バリエーションに合わせて値が切り替わる

ラベル・並び方・区切り文字を自由に決める

「SKU」「JAN」のほか「型番」「商品コード」「品番」など、お店の言い方に合わせたラベルを付けられます。ラベルを空にすれば値だけを表示します。縦に 2 行並べるか、「SKU SNB-CMP-ICE ｜ JAN 4901234567001」のように 1 行にまとめるかも選べます。

横並びにして区切り文字「｜」を入れたプレビュー。「SKU SNB-CMP-ICE ｜ JAN 4901234567001」と 1 行に収まっている

色・文字の大きさ・余白をコード無しで調整する

ラベルの色・値の色・文字の大きさ（PC とスマホで別々）・上下の余白（PC とスマホで別々）・テキストの配置を、テーマエディタのスライダーとカラーピッカーで決められます。どうしても細かく直したいときだけ「追加のCSS」が使えます。

中央揃え・値の色を赤・文字の大きさを 20px にしたプレビュー

アプリストアの掲載画像。ノーコードで見た目を自由に調整

テーマへの追加はボタン 1 つ

アプリの管理画面でテーマを選んで「テーマに追加」を押すと、商品ページのテーマエディタがブロックを追加した状態で開きます。あとは「保存」を押すだけです。

アプリストアの掲載画像。テーマへの追加はワンクリック

インストール

インストールは Shopify の他のアプリと同じ手順です。

Shopify 管理画面の左下にある「設定」をクリックします。

Shopify 管理画面の左下にある「設定」

「アプリと販売チャネル」を開き、「Shopify App Store」をクリックします。

設定画面の「アプリと販売チャネル」から Shopify App Store を開く

アプリストアの検索窓に「シンプル型番・JANコード表示」と入力して検索します。アプリストアのページを直接開く場合は https://apps.shopify.com/ur-sku-barcode-display からどうぞ。
アプリのページで「インストール」をクリックします。
権限の確認画面が開きます。内容を確認して「インストール」をクリックすると、アプリの管理画面が開きます。

このアプリが求める権限は「テーマの読み取り」だけです。管理画面でテーマの一覧を出すために使います。商品・顧客・注文のデータにはアクセスしません。SKU とバーコードの値は、ストアフロントの表示時にテーマ（Liquid）が直接読むため、アプリのサーバーへ送られることもありません。

インストールの直後に料金プランの確認画面が表示されます。無料体験期間（7 日間）の中で削除すれば料金はかかりません。プランを選ぶ前の状態では、アプリの管理画面を開くたびに料金プランの画面へ移動します。

まず最初にやる設定（インストールから表示まで 3 ステップ）

インストールしただけでは商品ページに何も出ません。次の 3 つを順番にやると、商品ページに型番と JAN コードが表示されます。

1. 商品に SKU とバーコードを入れる

アプリが表示するのは、Shopify の商品登録画面に入っている値です。Shopify 管理画面の「商品管理」から商品を開き、バリエーションごとの編集画面で「在庫」カードの「詳細を表示」を開くと、「SKU (最小管理単位)」と「バーコード」の欄があります。ここに型番と JAN コードを入れて保存します。バリエーションが無い商品では商品の編集画面にそのまま同じ欄があります。

商品のバリエーション編集画面。「在庫」カードの「詳細を表示」の中に「SKU (最小管理単位)」と「バーコード」の欄がある

すでに入力してある商品はこの手順を飛ばして構いません。SKU とバーコードの両方が空の商品では、ブロックを追加しても何も表示されません（行ごと消えるので、空欄のラベルだけが残ることはありません）。

2. 「テーマに追加」で商品ページにブロックを入れる

アプリの管理画面を開き、「テーマに SKU・JANコード表示を追加」のカードでテーマを選んで「テーマに追加」をクリックします。

アプリ管理画面の「テーマに SKU・JANコード表示を追加」カード。テーマを選択して「テーマに追加」を押す

新しいタブで商品ページのテーマエディタが開き、「商品情報」セクションの末尾に「シンプル型番・JANコード表示｜お手軽SKU・商品コード表示」のブロックが追加された状態になります。

「テーマに追加」で開いたテーマエディタ。左の「商品情報」セクションの末尾にブロックが追加され、選択されている

この時点ではまだ保存されていません。右上の「保存」を押して初めてストアに反映されます。

3. ラベルを入れて保存する

追加した直後は「SKU のラベル」と「バーコードのラベル」が空なので、値だけが表示されます。右の設定パネルの「表示設定」で、「SKU のラベル」に「SKU」や「型番」、「バーコードのラベル」に「JAN」や「JANコード」と入れ、右上の「保存」を押します。

ブロック設定パネルの「表示設定」。SKU のラベルに「SKU」、バーコードのラベルに「JAN」を入れた状態

保存後に商品ページを開くと、SKU と JAN コードが表示されています。表示される位置は「商品情報」セクションの末尾（商品画像と説明文の下）です。価格のすぐ下に置きたいときは、「テーマエディタでの設定」の「ブロックを手動で追加する」をご覧ください。

スマホで見た商品ページ。「今すぐ購入」と説明文の下に「SKU SNB-CMP-ICE」「JAN 4901234567001」が表示されている

管理画面でできること

このアプリの管理画面は「設定」の 1 画面だけです。表示に関する設定はすべてテーマエディタ側で行うので、管理画面でやることは「テーマに追加する」「管理画面の言語を変える」の 2 つに絞られています。

設定画面を開く

Shopify 管理画面の左メニュー「アプリ」から「UR: SKU & Barcode Display」を開くと「設定」画面が表示されます。アプリのサイドバーには「設定」だけが並びます。

Shopify 管理画面の中で開いたアプリの「設定」画面。左のサイドバーにアプリ名と「設定」が並ぶ

画面には上から「テーマに SKU・JANコード表示を追加」カード、自動追加が失敗したときの案内、手動追加の案内、「言語設定」カード、「おすすめアプリ」カードが並びます。

アプリの「設定」画面の全体。テーマに追加のカード、案内バナー、言語設定、おすすめアプリの順に並ぶ

テーマに SKU・JANコード表示を追加

一番上のカードです。テーマを選び、ボタン 1 つでテーマエディタを開きます。

「テーマに SKU・JANコード表示を追加」カード。「テーマを選択」のプルダウン、「テーマに追加」「テーマをプレビュー」のボタン

テーマを選択

ブロックを追加するテーマを選びます。選択肢に出るのは「公開中のテーマ」と「未公開のテーマ」だけで、公開中のテーマには名前の後ろに「（公開中のテーマ）」と付きます。初期状態では公開中のテーマが選ばれています。複製やインポートの処理中のテーマ、Shopify のデモテーマは選択肢に出ません。

カードの説明文にもあるとおり、テーマのバージョンによっては選択欄が空になることがあります。その場合は次の「テーマエディタでの設定」の手順で手動で追加してください。

テーマに追加

押すと新しいタブでテーマエディタが開き、選んだテーマの商品ページ（商品テンプレート）の「商品情報」セクション末尾にブロックが追加された状態になります。追加先は常に商品テンプレートのメインセクションで、ここは変えられません。保存は自動では行われないので、テーマエディタで必ず「保存」を押してください。

すでにブロックを追加済みのテーマでもう一度押すと、2 つ目のブロックが追加されます。二重に表示されてしまったときは、テーマエディタで片方を「ブロックを削除」で消してください。

テーマをプレビュー

押すと新しいタブで、選んだテーマの商品ページをテーマエディタで開きます。ブロックは追加しません。追加済みのブロックの設定を見直したいときや、未公開のテーマで見え方を確かめたいときに使います。

2 つのお知らせ

カードの下に黄色の注意と青色の案内が出ます。黄色の注意は「テーマに追加」での自動追加がうまくいかないときに手動追加を案内するもの、青色の案内は「テーマ編集画面でアプリブロックを手動で追加することで、商品ページに SKU・JANコード表示を追加できます」という補足です。どちらも読むだけのもので、操作はありません。黄色の注意は管理画面の言語が日本語のときだけ表示されます。

言語設定

「言語設定」カード。「言語を選択」のプルダウンと「変更する」ボタン

言語を選択

アプリの管理画面の表示言語を選びます。選べるのは次の 20 言語です: Čeština（チェコ語）/ Dansk（デンマーク語）/ Deutsch（ドイツ語）/ English（英語）/ Español（スペイン語）/ Français（フランス語）/ Italiano（イタリア語）/ Nederlands（オランダ語）/ Norsk (bokmål)（ノルウェー語）/ Polski（ポーランド語）/ Português (Brasil)（ポルトガル語・ブラジル）/ Português (Portugal)（ポルトガル語・ポルトガル）/ Suomi（フィンランド語）/ Svenska（スウェーデン語）/ Türkçe（トルコ語）/ ภาษาไทย（タイ語）/ 日本語 / 简体中文（中国語・簡体字）/ 繁體中文（中国語・繁体字）/ 한국어（韓国語）。

初期状態では、Shopify アカウントの言語設定に合わせて自動で選ばれます。日本語の Shopify アカウントなら最初から日本語です。

変更する

押すとその場で管理画面の言語が切り替わります。選んだ言語はお使いのブラウザに保存されるため、別のパソコンやブラウザで開くと再び Shopify アカウントの言語に戻ります。ストアの言語や、お客様が見るストアフロントの表示には影響しません。

ここで変えられるのはアプリの管理画面だけです。テーマエディタのブロック設定の文言（「SKU（型番）を表示」など）は Shopify アカウントの言語に従い、同じ 20 言語に翻訳されています。

右下の「ご利用ガイド」

管理画面の言語が日本語のとき、画面右下に「ご利用ガイドはこちら」のリンクが固定表示されます。このページへのリンクです。

テーマエディタでの設定（アプリブロック）

表示の見た目はすべてテーマエディタのブロック設定で決めます。設定は「表示設定」「スタイル設定」「余白設定」「追加設定」の 4 グループ、合わせて 17 項目です。設定はテーマ（ブロック設定）に保存されるので、テーマを乗り換えたときはもう一度追加と設定が必要です。

ブロックを手動で追加する

「テーマに追加」が使えないとき、別のテーマに入れたいとき、価格のすぐ下など好きな位置に置きたいときは、テーマエディタから手動で追加します。

Shopify 管理画面の「オンラインストア」>「テーマ」で、対象テーマの「カスタマイズ」を開きます。
画面上部のページ選択で「商品」>「デフォルトの商品」（商品テンプレート）を選びます。
左の「商品情報」セクションを開き、置きたい場所の「ブロックを追加」をクリックします。Horizon テーマでは「詳細」グループの中の「ブロックを追加」を使うと、商品名・価格・購入ボタンと同じ右の列に入ります。
開いた一覧の上にある「ブロック」「アプリ」のタブで「アプリ」を選び、「シンプル型番・JANコード表示｜お手軽SKU・商品コード表示」をクリックします。
右上の「保存」を押します。

テーマエディタで「詳細」グループの「ブロックを追加」を押し、「アプリ」タブを選んだところ。一覧にアプリのブロックが出ている

アプリのブロックを「詳細」グループに追加した直後のテーマエディタ。右の列の先頭（商品名の上）に値が表示されている

追加した直後はグループの先頭（商品名の上）に入ります。左のブロック一覧で「シンプル型番・JANコード表示｜お手軽SKU・商品コード表示」をドラッグして、価格の下・購入ボタンの下など好きな位置へ並べ替えてください。

このブロックは商品テンプレートにだけ追加できます。コレクションページやホームページの「ブロックを追加」には出てきません。また、追加した直後はラベルが空なので値だけが表示されます。ラベルは次の「表示設定」で入れます。

設定パネルを開く

左のブロック一覧で「シンプル型番・JANコード表示｜お手軽SKU・商品コード表示」をクリックするか、プレビューの表示をクリックすると、左下に設定パネルが開きます。

テーマエディタでブロックを選択した状態。左下に「表示設定」から始まる設定パネルが開いている

ブロックを選択したときのプレビュー。ラベルを「SKU」「JAN」にした初期の縦並び表示

設定を変えるとプレビューはすぐに変わりますが、ストアには「保存」を押すまで反映されません。テキスト欄に入力したまま「保存」を押すと、入力の確定だけで終わって保存されないことがあります。入力後は一度パネルの別の場所をクリックしてから「保存」を押してください。

表示設定

ブロック設定パネルの「表示設定」グループ

SKU（型番）を表示

SKU の行を出すかどうかのスイッチです。初期状態は ON です。OFF にすると、SKU が入っている商品でも SKU の行は出ません。

SKU のラベル

SKU の値の前に付ける文字です。初期状態は空で、空のままだと値だけが表示されます。「SKU」「型番」「品番」「商品コード」など、お店で使っている呼び方を入れてください。「SKU：」のようにコロンを含めても構いません（ラベルと値の間には自動で少し間隔が空きます）。ラベルには言語ごとの初期値がないので、日本語のストアでも英語のストアでも必ず自分で入れます。

バーコード（JANコード）を表示

バーコードの行を出すかどうかのスイッチです。初期状態は ON です。JAN コードはお客様に見せず型番だけ出したい、というときは OFF にします。

バーコードのラベル

バーコードの値の前に付ける文字です。初期状態は空です。「JAN」「JANコード」のほか、海外向けなら「EAN」「UPC」、Shopify の欄の名前に合わせて「バーコード」としても構いません。表示されるのは Shopify の「バーコード」欄の文字列そのままで、JAN / EAN / UPC の形式の判定やチェックディジットの検証、バーコード画像への変換は行いません。

並び方

「縦並び」と「横並び」の 2 択で、初期状態は「縦並び」です。縦並びは SKU とバーコードを 2 行に、横並びは 1 行に並べて間に区切り文字を入れます。横並びでも、画面の幅に収まらないときは自動で折り返します。

横並びの区切り文字

横並びのときに SKU とバーコードの間に入れる文字です。初期値は「/」で、「｜」「・」「／」など好きな文字に変えられます。空にすると「/」に戻ります。縦並びのときは使われません。また、どちらか片方の行しか表示されないとき（バーコードが空の商品など）は区切り文字も出ません。

未入力のときテーマエディタに案内を表示

SKU もバーコードも入っていない商品をテーマエディタで開いたとき、ブロックの位置に「SKU・JANコードが未入力の商品です（この案内はテーマエディタでのみ表示されます）」という点線の枠を出すかどうかです。初期状態は ON です。この案内はテーマエディタの中でだけ表示され、お客様が見るストアには出ません。「ブロックを置いたのに何も出ない」とテーマエディタで迷わないためのもので、不要なら OFF にしてください。

案内文はストアのメイン言語で表示されます。メイン言語が英語のストアでは「This product has no SKU or barcode (this notice is only shown in the theme editor)」となります。

スタイル設定

ブロック設定パネルの「スタイル設定」グループ

テキスト配置

「左揃え」「中央揃え」「右揃え」の 3 択で、初期状態は「左揃え」です。縦並び・横並びのどちらにも効きます。

ラベルの色

ラベル（「SKU」「JAN」の部分）と区切り文字の色です。初期状態は未指定で、テーマの文字色をそのまま使い、ラベルだけを 70% の濃さに薄めて値と区別します。色を指定すると薄める処理は行われず、指定した色がそのまま付きます。「選択する」を押すとカラーピッカーが開き、色の面・色相バー・カラーパレットから選ぶか、「なし」と書かれた欄に「#D72638」のようにカラーコードを直接入力できます。

「値の色」の「選択する」を押して開いたカラーピッカー。色の面、カラーコード入力欄、色相バー、カラーパレット

値の色

値（型番や JAN コードの数字）の色です。初期状態は未指定でテーマの文字色を使います。暗い背景のセクションに置いても、未指定ならテーマの文字色を継承するので沈みません。

文字の大きさ（PC）

画面幅 768px 以上で使う文字の大きさです。10〜32px の範囲を 1px 刻みで指定でき、初期値は 14px です。ラベルと値は同じ大きさになります。

文字の大きさ（スマホ）

画面幅 768px 未満で使う文字の大きさです。範囲は同じく 10〜32px、初期値は 13px です。

余白設定

ブロック設定パネルの「余白設定」グループ

上部余白（PC）・上部余白（スマホ）

ブロックの上に空ける余白です。-100〜100px の範囲を 2px 刻みで指定でき、初期値はどちらも 8px です。マイナスにすると上の要素に重なる方向へ詰められます。PC は画面幅 768px 以上、スマホは 768px 未満で使われます。

下部余白（PC）・下部余白（スマホ）

ブロックの下に空ける余白です。範囲・刻み・初期値は上部余白と同じです。

追加設定

ブロック設定パネルの「追加設定」グループ。「追加のCSS」の入力欄、「アプリを管理」のリンク、「ブロックを削除」

追加のCSS

上の設定で足りないときに CSS を直接書く欄です。書いた CSS はこのブロックの中だけに適用され、テーマの他の部分には影響しません。要素のクラス名は、ラベルが「ur-sku-barcode__label」、値が「ur-sku-barcode__value」、区切り文字が「ur-sku-barcode__separator」、SKU の行が「ur-sku-barcode__row--sku」、バーコードの行が「ur-sku-barcode__row--barcode」です。たとえば値だけ太字にしたいなら次のように書きます。

.ur-sku-barcode__value { font-weight: 700; }

ブラウザの検証機能（右クリック > 検証）で要素を確かめながら書くのがおすすめです。安全のため「<」の文字は取り除かれます。

アプリを管理 / ブロックを削除

「アプリを管理」は Shopify 管理画面のアプリ一覧へのリンクです。「ブロックを削除」でこのブロックをテーマから外せます（保存するまで確定しません）。

保存する

画面右上の「保存」を押すとストアに反映されます。保存の直後は、ストアの表示が少しのあいだ古いままのことがあります（Shopify 側のキャッシュ）。数分待つか、ブラウザを再読み込みして確かめてください。

こんなときはこう設定する

1 行にまとめて省スペースにしたいとき

「並び方」を「横並び」にし、「横並びの区切り文字」を「｜」にします。商品名のすぐ下など、縦に場所を取りたくない位置に向いています。

横並び・区切り文字「｜」にしたプレビュー

ラベル無しで値だけ見せたいとき

「SKU のラベル」と「バーコードのラベル」を両方とも空にします。型番だけで通じる業種や、商品説明の中で「型番」と書いてある場合に。

ラベルを空にして値だけを縦に並べたプレビュー

JAN は出さず型番だけ見せたいとき

「バーコード（JANコード）を表示」を OFF にします。値を消す必要はなく、スイッチ 1 つで戻せます。

「バーコード（JANコード）を表示」を OFF にして SKU の行だけにしたプレビュー

型番を目立たせたいとき

「テキスト配置」を「中央揃え」、「値の色」にブランドカラー、「文字の大きさ（PC）」を 18〜20px にします。ラベルは未指定のままにしておくと、ラベルが薄く・値が濃く出るので視線が値に集まります。

スタイル設定で中央揃え・値の色 #D72638・文字の大きさ 20px にした設定パネル

その設定でのプレビュー。赤い値が中央に大きく表示される

価格のすぐ下に置きたいとき

「テーマに追加」で入れたブロックは「商品情報」セクションの末尾（画像と説明文の下）に入ります。Horizon テーマで価格や購入ボタンと同じ列に出したいときは、「ブロックを手動で追加する」の手順で「詳細」グループの中に追加し、左のブロック一覧でドラッグして価格の下へ動かします。すでに入れてあるブロックを、一覧で「詳細」グループの中へドラッグしても構いません。

「詳細」グループに追加したブロック。商品名・価格と同じ右の列に表示される

スマホで小さくしたい・詰めたいとき

「文字の大きさ（スマホ）」「上部余白（スマホ）」「下部余白（スマホ）」は PC とは別に効きます。スマホでは画面が縦に長くなりがちなので、文字を 12px、余白を 4px にするなど、PC より控えめにするのがおすすめです。テーマエディタ上部のスマホアイコンでスマホ表示のプレビューに切り替えて確かめられます。

スマホ幅の商品ページ。文字の大きさ（スマホ）と余白（スマホ）の設定が効く

うまく表示されないときは

商品ページに何も出ない

次の順に確かめてください。

ブロックを追加して保存したか。 「テーマに追加」で開いたテーマエディタで「保存」を押していないと反映されません。テーマエディタを開き直して「最後のセッションを復元しますか？」と出るときは、保存されていなかった印です。
その商品に SKU かバーコードが入っているか。 両方とも空の商品ではブロックごと非表示になります（テーマエディタでは点線の案内枠が出ます）。商品のバリエーション編集画面の「在庫」>「詳細を表示」で入力してください。
「SKU（型番）を表示」「バーコード（JANコード）を表示」が両方 OFF になっていないか。 両方 OFF だと何も出ません。
公開中のテーマに追加したか。 未公開のテーマに追加した場合、公開中のストアには出ません。「テーマを選択」で「（公開中のテーマ）」の付いたものを選んでください。
商品テンプレートを複数使っていないか。 ブロックは追加したテンプレート（例: 「デフォルトの商品」）にだけ入ります。別のテンプレートを割り当てた商品には、そのテンプレートでも追加が必要です。

SKU は出るのに JAN が出ない（またはその逆）

その商品のバーコード欄が空です。未入力の行は出さない仕様なので、エラーにはなりません。

バーコードが空の商品では SKU の行だけが表示される

バリエーションを切り替えても値が変わらない

商品ページでは、次の 3 つのいずれかで切り替えを検知しています。

Shopify 標準のバリエーション選択イベント（Horizon、最新の Dawn）
テーマ独自のイベント（主要な有料テーマ、旧バージョンの Dawn）
ページの URL の「?variant=」の変化（URL を更新するテーマ全般）

テーマがこの 3 つのどれにも当てはまらない場合、切り替えに追随できません。その場合は商品ページを再読み込みすると正しい値になります。また、ホームページの「注目商品」セクションや、コレクションページの「クイック追加」の中では URL が変わらないため、追随を保証していません。確実に動くのは商品ページだけです。

バリエーションが 251 個以上ある商品では、251 個目以降の値はページにあらかじめ埋め込まれていないため、切り替えたときに Shopify から取り直して表示します。通信に失敗したときは直前の表示のまま残ります。

保存したのに反映されない

テキスト欄に入力したまま「保存」を押すと、クリックが入力の確定に使われて保存されないことがあります。入力後に一度別の場所をクリックしてから「保存」を押し、「保存」ボタンが灰色（押せない状態）になったことを確かめてください。保存されていてもストアの表示が古いままなら、Shopify 側のキャッシュです。数分待つか、再読み込みしてください。

ラベルが薄く見える

「ラベルの色」が未指定のときは、値と区別するためにラベルを 70% の濃さで表示する仕様です。はっきり出したいときは「ラベルの色」にテーマの文字色と同じ色を指定してください。

位置が画像の下になってしまう

「テーマに追加」は「商品情報」セクションの末尾に入れるため、Horizon などの 2 列レイアウトでは画像と説明文の下に表示されます。価格の近くに出したいときは、テーマエディタでブロックを「詳細」グループの中へ移動してください（「価格のすぐ下に置きたいとき」参照）。

長い型番がはみ出す

値は折り返して表示する設定になっているので、通常ははみ出しません。横並びで長くなるときは「縦並び」に変えるか、「文字の大きさ（スマホ）」を小さくしてください。

よくある質問

SKU と JAN コードはどこに入力しますか？

Shopify 管理画面の「商品管理」で商品を開き、バリエーションごとの編集画面の「在庫」>「詳細を表示」にある「SKU (最小管理単位)」と「バーコード」の欄に入力します。アプリ側に入力画面はありません。CSV で商品を一括登録している場合は、CSV の「Variant SKU」「Variant Barcode」列がそのまま使われます。