【徹底解説】Shopify アプリ「シンプル型番・JANコード表示｜お手軽SKU・商品コード表示」でできること

【徹底解説】Shopify アプリ「シンプル型番・JANコード表示｜お手軽SKU・商品コード表示」でできること

メーカー型番で商品を探しているお客様にとって、商品ページで最初に確かめたいのは写真でも説明文でもなく「型番が合っているか」です。Shopify の商品登録画面には SKU とバーコードの欄が最初から用意されているのに、商品ページにその値を出す手段はテーマ任せで、多くのテーマは SKU を小さく出すだけ、バーコードに至っては一切表示しません。

「シンプル型番・JANコード表示｜お手軽SKU・商品コード表示」は、この「登録してあるのに見せられない」状態を解消するために当社（UnReact）が開発した Shopify アプリです。商品登録画面に入っている SKU とバーコードをそのまま読み取り、「SKU：SNB-CMP-ICE」「JAN：4901234567001」のようにラベル付きで商品ページに並べます。お客様がバリエーションを選び直すと、表示される番号もその場で変わります。

この記事では、アプリの管理画面を画面ごと、テーマエディタの設定を 17 項目すべて、スクリーンショット付きで解説します。設置の手順そのものは Shopifyで商品ページにSKU（型番）とJANコードを表示できるアプリについて徹底解説｜ご利用ガイド に譲り、ここでは「各項目が何を決めていて、どんな場面でどう使い分けるか」「コードを読まないと分からない制約」に比重を置きます。後半には Liquid と JavaScript で自作する場合の手順と、SKU を生成・印刷するアプリとの使い分けもまとめました。

「シンプル型番・JANコード表示」とは

「シンプル型番・JANコード表示」は、商品ページに選択中のバリエーションの SKU（型番）と JAN コードを表示する Shopify アプリです。英語名は UR: SKU & Barcode Display で、Shopify App Store からインストールできます。

Shopify のバリエーションには、お店の在庫管理に使う「SKU（最小管理単位）」と、JAN / EAN / UPC / ISBN といった世の中で共通の「バーコード」の 2 つの欄があります。このアプリが扱うのはこの 2 つだけで、どちらもアプリ側に入力画面はありません。すでに Shopify に入っている値を表示するだけなので、導入の日にやることは「ブロックをテーマに入れてラベルを決める」ことに絞られます。

アプリの構成は 3 つに分かれています。

• 管理画面 … 「設定」の 1 画面だけです。テーマへの追加、管理画面の言語切り替え、当社の他アプリの案内があります。表示に関する設定はここにはありません
• テーマ拡張（アプリブロック） … 商品ページに型番と JAN コードを描く本体です。ラベル・並び方・色・文字の大きさ・余白の 17 項目はすべてテーマエディタの中で決めます
• データの保存先 … 商品ごとの値は Shopify の商品データそのもの、見た目の設定はテーマのブロック設定です。アプリ専用のデータベースを持たないので、アプリ側の障害で型番が消えることはありません

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

「シンプル型番・JANコード表示」のメリット

二重入力が無く、登録済みの値がそのまま出る

型番を表示するアプリの中には、アプリ側の画面に商品ごとの値を入れ直すものがあります。このアプリは Shopify の SKU 欄とバーコード欄を直接読むため、商品を増やしても追加の作業は発生しません。CSV で一括登録しているストアなら、「Variant SKU」「Variant Barcode」の列がそのまま商品ページに反映されます。

バリエーションの切り替えに 3 段構えで追随する

色やサイズを選び直したときに型番が最初のまま残ると、お客様は間違った番号を控えてしまいます。このアプリは Shopify 標準のバリエーション選択イベント、テーマ独自のイベント、ページ URL の変化という 3 つの経路で切り替えを検知し、どれか 1 つでも届けば値を差し替えます。Horizon と Dawn の両方で動作を確認済みです。

見た目はプレビューを見ながら決められる

ラベルの文言、縦並びか横並びか、区切り文字、文字の色と大きさ、上下の余白は、テーマエディタの設定パネルで変えた瞬間にプレビューへ反映されます。CSS を書く必要はなく、どうしても細かく直したいときだけ「追加のCSS」の欄が使えます。

空の行は消え、両方空ならブロックごと消える

バーコードを入れていない商品では JAN の行だけが消え、SKU もバーコードも空の商品ではブロック全体が非表示になります。「JAN：」というラベルの後ろが空白のまま残ることはありません。入力が揃っていない商品が混ざっていても、商品ページの見た目が崩れないのは運用上かなり楽です。

ストアの表示速度にほとんど影響しない

ストアフロントで動くのは数 KB の小さなスクリプト 1 つで、外部のサーバーとは通信しません。表示に必要な値はページに埋め込まれているので、切り替えのたびに読み込みを待つこともありません。

「シンプル型番・JANコード表示」のデメリット

バーコードの画像は描かない

表示するのは数字と文字だけです。縞模様のバーコード画像を生成したり、ラベル用紙に印刷したりする機能はありません。店頭でスキャンするためのラベルが欲しい場合は、印刷専用のアプリと役割を分けることになります。

表示元は SKU 欄とバーコード欄の 2 つだけ

メタフィールドに入れた独自の品番や、販売元・商品タイプのような他の項目を同じ枠に並べることはできません。「型番」と「JAN」以外の行を足したいときは、テーマの標準ブロックや別の手段を組み合わせる必要があります。

商品ごとの表示 ON / OFF が無い

管理画面に商品一覧を持たない設計なので、「この商品だけ型番を隠す」というスイッチはありません。隠したい商品は SKU とバーコードの欄を空にするか、その商品にだけ別の商品テンプレートを割り当ててブロックを置かない、という方法になります。

追随を保証するのは商品ページだけ

ホームページの「注目商品」セクションや、コレクション一覧の「クイック追加」の中では、バリエーションを切り替えても URL が変わらないため、値が更新されないことがあります。商品ページでは 3 つの検知経路が揃いますが、それ以外の場所は保証の外です。

ラベルに既定値が無い

ブロックを追加した直後はラベルが空で、値だけが表示されます。「SKU」「JAN」といった文言は必ず自分で入れる必要があり、言語ごとに自動で切り替わる仕組みもありません。多言語ストアで言語ごとにラベルを変えたいときは、テーマの翻訳機能でブロック設定の文字列を翻訳する運用になります。

料金プラン

料金はプラン 1 つだけです。

• 月額プラン … $2.99 / 月
• 年額プラン … $29.99 / 年（月額で 12 か月払うより 2 か月分お得）
• 無料体験 … インストールから 7 日間。期間内に削除すれば料金はかかりません

機能の制限によるプランの違いはなく、設定項目はどちらのプランでも同じです。インストールの直後に料金プランの確認画面が出ます。プランを選ばないまま管理画面を開くと、毎回この画面へ移動します。

インストール

Shopify の他のアプリと同じ流れです。

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

2. 「アプリと販売チャネル」からアプリストアへ進みます

3. 検索窓に「シンプル型番・JANコード表示」と入れて探すか、Shopify App Store のアプリページを直接開きます
4. 「インストール」を押し、権限の確認画面でもう一度「インストール」を押します
5. 料金プランの画面で無料体験を始めると、アプリの「設定」画面が開きます

インストールしただけでは商品ページに何も出ません。次の「テーマへの追加」でブロックを入れ、「保存」を押した時点で表示が始まります。

アプリ管理画面の構成

管理画面は「設定」の 1 画面だけで、サイドバーにもこの項目しか並びません。画面の中は上から、テーマに追加するカード、2 つのお知らせバナー、言語設定のカード、おすすめアプリのカードの順です。

型番の表示そのものに関する設定は、この画面には 1 つもありません。管理画面の役割は「テーマエディタへ連れて行くこと」と「管理画面の言語を変えること」の 2 つです。

各画面の説明

「設定」画面のテーマに SKU・JANコード表示を追加

画面のいちばん上にあるカードで、操作は 3 つです。

• テーマを選択 … ブロックを入れる先のテーマを選びます。並ぶのは公開中のテーマと未公開のテーマだけで、公開中のものには名前の後ろに「（公開中のテーマ）」が付き、最初からそれが選ばれています。複製やインポートの処理中のテーマと、Shopify のデモテーマは候補に出ません
• テーマに追加 … 新しいタブでテーマエディタが開き、選んだテーマの商品テンプレートにある「商品情報」セクションの末尾へブロックが入った状態になります。追加先はこのメインセクションに固定で、別のセクションへは入りません。保存は自動ではないので、テーマエディタで「保存」を押すまでストアには反映されません
• テーマをプレビュー … ブロックを追加せずに、選んだテーマの商品ページをテーマエディタで開きます。設定の見直しや、未公開テーマでの見え方の確認に使います

すでにブロックが入っているテーマで「テーマに追加」をもう一度押すと、2 つ目のブロックが追加されます。商品ページに型番が二重に出たときは、テーマエディタで片方を「ブロックを削除」で消してください。

「設定」画面の 2 つのお知らせバナー

カードの下に、黄色の警告と青色の案内が出ます。黄色は「テーマに追加」での自動追加が失敗したときに手動追加を促すもので、管理画面の言語が日本語のときだけ表示されます。青色は、テーマエディタからアプリブロックを手動で追加しても同じ結果になるという補足です。どちらも読むだけで、押す操作はありません。

「設定」画面の言語設定

• 言語を選択 … アプリの管理画面の表示言語です。チェコ語・デンマーク語・ドイツ語・英語・スペイン語・フランス語・イタリア語・オランダ語・ノルウェー語・ポーランド語・ポルトガル語（ブラジル / ポルトガル）・フィンランド語・スウェーデン語・トルコ語・タイ語・日本語・簡体字中国語・繁体字中国語・韓国語の 20 言語から選べます。初期状態では Shopify アカウントの言語に自動で合わせます
• 変更する … 押した瞬間に管理画面の言語が切り替わります。選んだ言語はブラウザに保存されるので、別のパソコンで開くと再び Shopify アカウントの言語に戻ります

ここで変わるのはアプリの管理画面だけです。お客様が見るストアフロントの表示には影響せず、テーマエディタの設定項目の文言（「SKU（型番）を表示」など）は Shopify アカウントの言語に従います。こちらも同じ 20 言語に翻訳されています。

「設定」画面のおすすめアプリ

• おすすめアプリ … 当社の他のアプリの一覧です。クリックするとそのアプリのストアページが新しいタブで開きます。右上の「×」で閉じると 24 時間は表示されず、翌日以降に開き直すと戻ります

管理画面の外にある「入力画面」

型番と JAN コードの入力場所はアプリの中ではなく、Shopify の商品編集画面です。「商品管理」から商品を開き、バリエーションごとの編集画面で「在庫」カードの「詳細を表示」を開くと、「SKU (最小管理単位)」と「バーコード」の欄があります。バリエーションの無い商品では、商品の編集画面に同じ欄が直接並びます。

ここに入れた値が、そのまま商品ページに出ます。アプリを削除しても欄の値は残ります。読み取っているだけで、書き換えも複製もしていないからです。

テーマへの追加

「テーマに追加」を押すと、商品ページのテーマエディタがブロックを入れた状態で開きます。

ここで右上の「保存」を押すと、商品画像と説明文の下に型番と JAN コードが表示されます。テーマエディタを閉じるときに「最後のセッションを復元しますか？」と聞かれたら、保存されていなかった印なので、もう一度開いて保存してください。

価格のすぐ下など、別の位置に置きたいときは手動で追加します。テーマエディタで「商品」>「デフォルトの商品」を開き、「商品情報」セクションの中で置きたい場所の「ブロックを追加」を押して「アプリ」タブを選びます。Horizon テーマでは「詳細」グループの中の「ブロックを追加」を使うと、商品名・価格・購入ボタンと同じ右の列に入ります。

追加した直後はグループの先頭に入るので、左のブロック一覧でドラッグして価格の下や購入ボタンの下へ動かします。このブロックは商品テンプレートにしか追加できず、コレクションページやホームページの「ブロックを追加」には出てきません。

商品テンプレートを複数使っているストアでは、ブロックは追加したテンプレートにだけ入ります。「デフォルトの商品」に入れても、別のテンプレートを割り当てた商品には出ないので、そちらにも同じ手順で追加してください。

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

左のブロック一覧でアプリのブロックを押すと、設定パネルが開きます。設定は「表示設定」「スタイル設定」「余白設定」「追加設定」の 4 グループに分かれ、合わせて 17 項目です。

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

表示設定

• SKU（型番）を表示（既定: ON）… SKU の行を出すかどうかです。OFF にすると、SKU が入っている商品でも SKU の行は出ません。JAN コードだけを見せたい業種向けのスイッチです
• SKU のラベル（既定: 空）… SKU の値の前に付ける文字です。空のままだと値だけが並びます。「型番」「品番」「商品コード」「SKU：」のように、お店の呼び方をそのまま入れてください。ラベルと値の間には自動で少し間隔が空くので、末尾に空白を足す必要はありません
• バーコード（JANコード）を表示（既定: ON）… バーコードの行を出すかどうかです。お客様には型番だけ見せたいときに OFF にします。値を消さずに済むので、あとから戻すのも一瞬です
• バーコードのラベル（既定: 空）… バーコードの値の前に付ける文字です。「JAN」「JANコード」のほか、海外向けなら「EAN」「UPC」、書籍なら「ISBN」と、扱うコードの種類に合わせます。欄の中身は文字列としてそのまま出るので、形式の判定やチェックディジットの検証は行いません
• 並び方（既定: 縦並び）… 「縦並び」は SKU とバーコードを 2 行に、「横並び」は 1 行に並べて間に区切り文字を挟みます。横並びでも画面幅に収まらないときは自動で折り返します
• 横並びの区切り文字（既定: /）… 横並びのときに 2 つの値の間へ入れる文字です。「｜」「・」「／」など好きな文字に変えられます。空にすると「/」に戻り、縦並びのときは使われません。片方の行しか表示されない商品では区切り文字も出ません
• 未入力のときテーマエディタに案内を表示（既定: ON）… SKU もバーコードも空の商品をテーマエディタで開いたときに、ブロックの位置へ点線の案内枠を出すかどうかです。この枠はテーマエディタの中だけに出て、公開ストアには一切出ません。「ブロックを置いたのに何も出ない」と迷わないためのもので、不要なら OFF にできます

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

スタイル設定

• テキスト配置（既定: 左揃え）… 「左揃え」「中央揃え」「右揃え」の 3 択です。縦並びでも横並びでも効きます。商品名を中央揃えにしているテーマなら、ここも中央にすると収まりがよくなります
• ラベルの色（既定: 未指定）… ラベルと区切り文字の色です。未指定のときはテーマの文字色を継承したうえで、ラベルだけを 70% の濃さに薄めて値と区別します。色を指定すると薄める処理は行われず、指定した色がそのまま付きます。「選択する」を押すとカラーピッカーが開き、色の面・色相バー・パレットから選ぶか、「#D72638」のようにカラーコードを直接入れられます
• 値の色（既定: 未指定）… 型番と JAN コードの数字の色です。未指定ならテーマの文字色をそのまま使うので、暗い背景のセクションに置いても沈みません。ブランドカラーを入れて目立たせる使い方もできます
• 文字の大きさ（PC）（既定: 14px）… 画面幅 768px 以上で使う文字の大きさです。10〜32px を 1px 刻みで指定でき、ラベルと値は同じ大きさになります
• 文字の大きさ（スマホ）（既定: 13px）… 画面幅 768px 未満で使う文字の大きさです。範囲は PC と同じ 10〜32px です

ラベルを薄く・値を濃くという初期状態の差は、視線を数字に集めるための設計です。ラベルをはっきり出したいときは、ラベルの色にテーマの文字色と同じ値を指定すると薄める処理が外れます。

余白設定

• 上部余白（PC）（既定: 8px）… ブロックの上に空ける余白です。-100〜100px を 2px 刻みで指定できます。マイナスにすると上の要素へ重なる方向に詰められます
• 上部余白（スマホ）（既定: 8px）… 画面幅 768px 未満で使う上側の余白です。PC とは独立して効きます
• 下部余白（PC）（既定: 8px）… ブロックの下に空ける余白です。範囲と刻みは上部余白と同じです
• 下部余白（スマホ）（既定: 8px）… スマホ幅で使う下側の余白です

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

追加設定

• 追加の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 です。たとえば値だけを太字にし、SKU の行とバーコードの行の間を少し広げたいときは、次のように書きます。

.ur-sku-barcode__value { font-weight: 700; }
.ur-sku-barcode__row--barcode { margin-top: 4px; }

1 行目が値の太字化、2 行目がバーコードの行の上に 4px の隙間を足す指定です。ブラウザの検証機能（右クリック > 検証）で要素を確かめながら書くと、どのクラスに当てればよいかがすぐに分かります。

同じグループの「アプリを管理」は Shopify 管理画面のアプリ一覧へのリンク、「ブロックを削除」はこのブロックをテーマから外すボタンです。削除も「保存」を押すまで確定しません。

商品ページでの見え方と用途別の設定例

公開ストアの PC 表示では、「テーマに追加」で入れた位置（商品画像と説明文の下）に 2 行で表示されます。

ここからは、業種や置き場所に合わせた設定の組み合わせを 4 つ挙げます。

1 行にまとめて場所を取らない … 「並び方」を横並び、「横並びの区切り文字」を「｜」にします。商品名のすぐ下のように縦の余裕が無い位置に向いています。

型番だけで通じる業種では値だけ … 「SKU のラベル」と「バーコードのラベル」を両方空にします。商品説明の中で「型番」と書いているストアや、数字を見れば分かるお客様が多い BtoB 向けの構成です。

JAN は社内用で見せない … 「バーコード（JANコード）を表示」を OFF にします。SKU の行だけが残り、JAN の値は商品データに入れたまま隠せます。

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

バリエーション切り替えの仕組みと 250 件の壁

Shopify のテーマは、バリエーションを切り替えたときにアプリブロックの中身を描き直しません。描き直されるのは価格や在庫などテーマ自身のブロックだけです。そこでこのアプリは、商品の全バリエーションの ID・SKU・バーコードをページに埋め込んでおき、切り替えを検知したらスクリプトが値を差し替えます。検知の経路は次の 3 つで、どれか 1 つでも届けば動きます。

• Shopify 標準のバリエーション選択イベント … Horizon と最新の Dawn が発火します
• テーマ独自のイベント … 主要な有料テーマや旧バージョンの Dawn が使っている独自の通知です
• ページ URL の「?variant=」の変化 … 切り替え時に URL を書き換えるテーマ全般に効きます

3 つのどれにも当てはまらないテーマでは追随できず、商品ページを読み込み直すと正しい値になります。また、埋め込めるバリエーションは 250 件までです。251 件目以降を選んだときは、その場で Shopify からブロックの HTML を取り直して差し替えます。通信に失敗したときは直前の表示が残ります。

長い型番は折り返して表示するので、横にはみ出すことはありません。横並びで窮屈になるときは縦並びに戻すか、「文字の大きさ（スマホ）」を小さくしてください。

コードで自作する場合

アプリを使わずに同じことをするなら、テーマの商品セクションに Liquid を足し、切り替えの追随は JavaScript で書きます。仕組みを知っておくと、アプリが何を肩代わりしているかが見えてきます。

まず表示の部分です。Dawn なら sections/main-product.liquid の中で、価格ブロックの近くに次のコードを置きます。選択中のバリエーションの SKU とバーコードを読み、空でない行だけを出します。

{%- assign current = product.selected_or_first_available_variant -%}
{%- assign sku = current.sku | default: '' -%}
{%- assign barcode = current.barcode | default: '' -%}
{%- if sku != blank or barcode != blank -%}
  <div class="my-sku-barcode" data-sku-barcode>
    {%- if sku != blank -%}
      <div data-row="sku"><span>型番</span> <span data-value>{{ sku }}</span></div>
    {%- endif -%}
    {%- if barcode != blank -%}
      <div data-row="barcode"><span>JAN</span> <span data-value>{{ barcode }}</span></div>
    {%- endif -%}
  </div>
{%- endif -%}

SKU が空のときは空文字、バーコードが空のときは null が返るという違いがあるため、両方を default フィルタで空文字に寄せてから比べています。これを忘れると、バーコード未入力の商品で「JAN null」と表示される事故が起きます。

次に切り替えの追随です。テーマはバリエーションを変えてもこの要素を描き直してくれないので、全バリエーションの値を JSON で埋め込み、Shopify 標準のイベントを聞いて差し替えます。

<script type="application/json" data-sku-barcode-variants>
  {"ids": {{ product.variants | map: 'id' | json }},
   "skus": {{ product.variants | map: 'sku' | json }},
   "barcodes": {{ product.variants | map: 'barcode' | json }}}
</script>

for ループではなく map フィルタで 3 本の配列を作っているのは、ループの上限と出力量を抑えるためです。この JSON を読んで差し替えるスクリプトが次です。

document.addEventListener('shopify:product:select', function (event) {
  event.promise.then(function (result) {
    var id = String(result.variant.id).replace(/.*\//, '');
    var box = document.querySelector('[data-sku-barcode]');
    var data = JSON.parse(document.querySelector('[data-sku-barcode-variants]').textContent);
    var index = data.ids.map(String).indexOf(id);
    if (!box || index < 0) return;
    var sku = data.skus[index] || '';
    var barcode = data.barcodes[index] || '';
    box.querySelector('[data-row="sku"] [data-value]').textContent = sku;
    box.querySelector('[data-row="barcode"] [data-value]').textContent = barcode;
    box.querySelector('[data-row="sku"]').hidden = !sku;
    box.querySelector('[data-row="barcode"]').hidden = !barcode;
    box.hidden = !sku && !barcode;
  });
});

イベントが返すバリエーション ID は、テーマによって gid の形で来ることも数字だけで来ることもあるため、末尾の数字だけを取り出して比べています。値を書き換えたあとに空の行を hidden で隠し、両方空ならまとめて隠すのは、表示側の Liquid と同じ判定をブラウザ側でも繰り返す必要があるからです。

ここまでで Horizon と最新の Dawn では動きますが、このイベントを発火しないテーマでは何も起きません。旧バージョンの Dawn や有料テーマの独自イベント、URL の変化を監視する処理をそれぞれ足し、テーマを更新するたびに main-product.liquid へ同じ変更を移し替える保守が続きます。ラベルの文言や色・余白をテーマエディタから変えられるようにするには、さらに schema とスタイルの記述が要ります。アプリは、これらを 1 つのブロックに閉じ込め、テーマを乗り換えても同じ手順で入るようにしたものです。

SKU を作るアプリ・印刷するアプリとの違いと使い分け

App Store で「SKU」「barcode」と探すと、SKUGen や Quick SKU Barcode のような「SKU を自動で採番するアプリ」「バーコードの画像を作ってラベルに印刷するアプリ」が多く並びます。名前は似ていますが、商品ページに値を見せるアプリとは役割が違います。ここでは、同じストアに両方入れるときの順番と設定の決め方を整理します。

「作る・印刷する」と「見せる」は別の仕事

採番アプリは、商品名やオプションから規則的な SKU を生成して Shopify の SKU 欄に書き込みます。印刷アプリは、バーコード欄の数字を縞模様の画像に変換してラベル用紙に出力します。どちらも値を「作る」「出す」側で、お客様が見る商品ページには何も表示しません。

「シンプル型番・JANコード表示」はその逆で、欄に入っている値を「見せる」側です。自分では値を作らず、Shopify の欄だけを読みます。つまり採番アプリが SKU 欄に書いた値は、そのまま商品ページに現れます。

両方入れるときは採番を先に済ませる

順番は「採番アプリで欄を埋める → 表示アプリでブロックを入れる」です。表示アプリは欄が空の商品で行ごと消す設計なので、先に入れても壊れはしませんが、商品によって型番が出たり出なかったりする期間ができます。採番を一括で済ませてから表示を始めると、公開ストアに中途半端な状態を見せずに済みます。

採番の規則を途中で変えて SKU 欄を書き換えた場合も、表示側の設定は触らなくて構いません。次にページが開かれた時点で新しい値が出ます。

商品タイトルに型番を足す方法と併用するとき

バリエーション名や SKU を商品タイトルの末尾に足すタイプのアプリ（Variant Title: Color, SKU など）を使っているストアもあります。タイトル側に型番が出ている状態でこのアプリも入れると、商品ページに同じ型番が 2 回並びます。

併用するなら役割を分けます。タイトル側には SKU を出さずバリエーション名だけにして、このアプリで型番と JAN コードを商品情報の行として出すのがいちばん自然です。逆にタイトルに型番を残したいなら、こちらは「SKU（型番）を表示」を OFF にして JAN コードの行だけを担当させると、情報が重なりません。

どちらを先に入れるかの判断

次のどれかに当てはまるなら、表示アプリから入れる価値があります。

• すでに SKU とバーコードが入力されている … 値はあるのに見せていない状態がいちばんもったいないので、入れた日から効きます
• 型番での問い合わせや誤注文が起きている … 商品ページに番号があれば、お客様が注文前に自分で確かめられます
• バリエーションの多い商品を扱っている … 切り替えに追随する表示は、手書きの説明文では代替できません

まだ SKU の付け方が決まっていないストアは、先に採番アプリで規則を決めて欄を埋めるほうが近道です。店頭の在庫管理が主目的でラベル印刷が要るなら、印刷アプリを先に入れ、商品ページの表示は後から足しても遅くありません。

まとめ

「シンプル型番・JANコード表示｜お手軽SKU・商品コード表示」は、Shopify に登録済みの SKU とバーコードを、ラベル付きで商品ページに出すことだけに絞った Shopify アプリです。管理画面は「設定」の 1 画面、テーマエディタの設定は 4 グループ 17 項目で、ラベル・並び方・区切り文字・色・文字の大きさ・余白をプレビューを見ながら決められます。

バリエーションの切り替えには 3 つの経路で追随し、空の行は自動で消え、権限はテーマの読み取りだけ、外部との通信はありません。できないことも明確で、バーコード画像の描画、SKU 欄とバーコード欄以外の表示、商品ごとの ON / OFF は対象外です。

月額 $2.99（年額 $29.99）、7 日間の無料体験付きです。型番で指名買いされる商品を扱っているなら、まず Shopify App Store から入れて、商品ページに型番と JAN コードが並ぶ状態を試してみてください。

おすすめ Shopify アプリ

当社では、商品ページの情報を充実させるアプリや、運営の手間を減らすアプリを多数公開しています。型番表示と組み合わせやすいものを挙げます。

• シンプル再入荷日表示｜入荷予定日・在庫復活日告知 … 売り切れ商品のページに入荷予定日を表示します。型番で指名買いされる商品が欠品したときに、お客様を待たせずに済みます
• シンプル栄養成分・アレルギー表示｜食品表示 … 商品ページに栄養成分とアレルゲン情報を出します。食品を扱うストアで、JAN コードと並べて商品情報を揃えられます
• シンプルQRコード｜お手軽QRコード作成・印刷アプリ … 商品やコレクションの QR コードを作って、値札やチラシに印刷できます。店頭と商品ページを型番でつなぐ使い方に向いています
• シンプルチェックアウト注文制限｜お手軽購入制限ルール … カートとチェックアウトで条件に合わない注文をブロックします。BtoB 向けに数量や地域の制限を掛けたいときに使えます
• シンプルメガメニュー｜お手軽ヘッダー階層ナビゲーション … 画像付きの複数カラムのドロップダウンナビを、コードに触れずに作れます。品番の多いカタログ型のストアで、カテゴリの入口を整理できます