Shopifyで商品ページに原産国・製造国を国旗バッジで表示できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/09/23

はじめに

「この商品、どこで作られているの？」——商品ページでそう聞かれても、Shopify の標準機能だけでは答えを載せる場所がありません。商品の編集画面にある「原産国/地域」は通関（税関の申告）のためのデータで、どれだけ正しく入力しても、ストアの商品ページには一切表示されません。

Shopify は、ネットショップを作って運営するためのサービスです。そこへ機能を足すのが「Shopify アプリ」で、ストアオーナーは App Store から必要なアプリを選んで追加できます。

シンプル原産国表示｜お手軽製造国・原産地ラベル（英語名: UR: Country of Origin Label）は、商品ごとに生産国・設計国・組立国・発送国を選び、国旗つきのバッジとして商品ページに表示する Shopify の原産国表示アプリです。国はリストから選ぶ形なので、「日本」「Japan」「JP」のような表記ゆれが起きません。

「Made in Japan」をきちんと伝えたいストアや、素材や工房へのこだわりを買い手に知ってほしいストアに向いています。

料金

月額 $2.49（年払いなら $24.90 / 年。実質 2 か月分お得です）
インストールから 7 日間は無料でお試しいただけます
無料プランはありません。お試し期間のあとも使い続けるには、Basic Plan への加入が必要です

App Store でアプリを見る

シンプル原産国表示のメイン画像。商品ページに国旗つきの原産国バッジが並んでいる

「シンプル原産国表示」でできること

できることは次の 5 つです。

生産国・設計国・組立国・発送国の 4 項目を、商品ページにバッジで表示できる
国はリストから選ぶだけ。商品ごとの表記ゆれを防げる
通関用に登録済みの原産国を、生産国の初期値としてそのまま使える
ラベルは英語表記のまま、またはストアの言語に合わせて表示できる
ボタンからテーマに追加でき、色・サイズ・並び方もテーマエディタで調整できる

商品ページに「Made in ○○」のバッジを出す

設定した項目だけが、国旗＋ラベル＋国名のバッジになって商品ページに並びます。下の例では 4 項目すべてを設定しています。生産国だけを設定した商品なら、「Made in ○○」のバッジが 1 つだけ出ます。

商品ページのカートボタンの下に、Made in Canada・Designed in Albania・Assembled in Bahrain・Ships from Canada の4つのバッジが並んでいる

国をリストから選んで表記ゆれをなくす

国名は入力せず、約 250 の国と地域の一覧から選びます。商品が何百点あっても、同じ国は必ず同じ表記で出ます。

掲載画像。国はリストから選ぶだけで表記ゆれがない

デザインをコードを書かずに調整する

バッジのスタイル（枠線あり・塗りつぶし・枠線・背景なし）、文字サイズ、色、並び方は、テーマエディタの設定だけで変えられます。

掲載画像。色やレイアウトをコーディングなしで調整できる

インストールする

アプリのインストールは、Shopify のどのアプリでも同じ手順です。

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

Shopify 管理画面の左下にある設定メニュー

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

設定のアプリと販売チャネル画面にある Shopify App Store ボタン

App Store の検索窓に「Country of Origin Label」と入れて検索し、結果の中から「UR: Country of Origin Label」をクリックします。

アプリの詳細ページで「インストール」をクリックします。

UR: Country of Origin Label のアプリ詳細ページ。左側にインストールボタンがある

アプリが使う権限の確認画面が出るので、内容を確かめてインストールします。このアプリが求める権限は、テーマの閲覧と商品の編集にあたる 2 つだけです。テーマの閲覧は設定画面のテーマ一覧を出すため、商品の編集は原産国を商品に保存するために使います。顧客や注文のデータには触れません。

インストールが終わると、料金プランの選択画面に移ります。プランを選ぶと 7 日間の無料体験が始まり、アプリの画面が開きます。

まず最初にやる設定

インストールしただけでは、商品ページには何も出ません。「バッジを置く場所」と「バッジに出す国」の 2 つを決めて、はじめて表示されます。 最短の手順は次のとおりです。

アプリの「設定」を開き、「テーマに追加」をクリックします（新しいタブでテーマエディタが開きます）
テーマエディタの右上にある「保存」をクリックします
アプリの「商品ごとの原産国設定」で商品をクリックし、Made in（必須）で国を選んで「保存」をクリックします
ストアでその商品のページを開き、バッジが出ていることを確かめます

🚨 「テーマに追加」で追加されるのは、商品ページ（商品テンプレート）のメインセクション（Dawn 系のテーマでは「商品情報」）です。 トップページやコレクションページには追加されません。このブロックは商品のデータを読んで表示するため、商品ページ以外に置いても何も出ません。

🚨 手順 2 の「保存」を押さずにテーマエディタを閉じると、ブロックは追加されません。

商品に原産国を設定する（商品ごとの原産国設定）

アプリを開くと最初に出るのが「商品ごとの原産国設定」の画面です。左のメニューでは、アプリ名の下に「商品ごとの原産国設定」と「設定」の 2 つが並びます。

商品一覧で設定状況を確かめる

商品が一覧で並び、右端の「設定状況」列に次のどちらかが出ます。

表示	意味
設定済み（緑）	Made in（生産国）が保存されている商品です。ストアにバッジが出ます
未設定（グレー）	Made in がまだ保存されていない商品です

設定済みかどうかは Made in だけで判定しています。 Designed in や Ships from だけを入れた商品はありえない（Made in が必須のため）ので、「設定済み」なら少なくとも生産国のバッジは出る、と読んでかまいません。

商品ごとの原産国設定の画面。商品名の右に、設定済み・未設定のバッジが並んでいる

一覧は 20 件ずつ、商品名のアルファベット・五十音順に並びます
一覧の下にある矢印（＜＞）で前後のページへ移れます
商品の行をクリックすると、その商品の原産国を設定する画面が開きます
下書き・アーカイブ済みの商品も一覧に出ます（ギフトカードも出ます）

商品名で検索して絞り込む

上部の「商品名で検索」に文字を入れ、入力欄の外をクリックすると検索が実行されます（Enter キーでは実行されません）。商品名の一部が一致する商品だけに絞り込まれ、ページ送りは 1 ページ目に戻ります。

入力欄の右端に出る × を押すと、検索が解除されて全商品の一覧に戻ります。一致する商品がないときは「商品が見つかりませんでした」と表示されます。

原産地ラベルの 4 項目を選ぶ

商品をクリックすると、その商品の「原産地ラベル」の画面が開きます。項目は 4 つで、どれも国の一覧から選びます。選択肢は管理画面の言語（日本語なら五十音順）で並びます。

項目	必須	ストアでの表示（常に英語表記のとき）	向いている使い方
Made in（必須）	必須	Made in ○○	生産国・製造国。いちばん聞かれる情報です
Designed in（任意）	任意	Designed in ○○	デザインした国。「日本でデザイン、海外で製造」を正直に伝えたいとき
Assembled in（任意）	任意	Assembled in ○○	組み立てた国。部品の生産国と組立国が違う商品に
Ships from（任意）	任意	Ships from ○○	発送元の国。海外倉庫から届く商品で、到着日数の目安を伝えたいとき

Made in の初期表示は「国を選択してください」です
任意の 3 項目の初期値は「選択しない」です。「選択しない」のまま保存した項目は、ストアに出ません
一度選んだ任意項目を「選択しない」に戻して保存すると、その項目の設定は消え、ストアのバッジも消えます
ストアでは、選んだ順ではなく Made in → Designed in → Assembled in → Ships from の順に並びます

画面の見出しの下には「原産国の表示内容はマーチャント様の判断による入力です。当アプリは表示内容の正確性を保証しません。」と書かれています。原産国の表示は、日本では任意ですが、表示する場合は景品表示法などの対象になりえます。何をもって「生産国」とするかは、ストアオーナーご自身で判断してください。

原産地ラベルの画面。Made in にカナダ、Designed in にアルバニア、Assembled in にバーレーン、Ships from にカナダが選ばれている

設定を保存する

国を選んだら、下の「保存」をクリックします。保存できると、画面の下に「保存しました」と出ます。保存を押さずに画面を離れると、選んだ内容は保存されません（離れるときの確認も出ません）。

保存をクリックしたあと、画面の下に保存しましたと表示されている

Made in を選ばずに保存しようとすると、Made in の欄が赤くなり「原産国を選択してください」と出て、保存されません。

Made in が国を選択してくださいのまま保存し、原産国を選択してくださいというエラーが出ている

保存した内容は、商品のメタフィールド（sa_228_country_origin という名前空間）に国コードで入ります。一度に 1 商品ずつの設定で、CSV などでまとめて入れる機能はありません。

通関用の原産国を初期値として使う

Shopify の商品編集画面では、「配送」欄の「その他の詳細」に「原産国/地域」を入れられます。これは通関のためのデータで、そのままではストアに出ません。

Shopify の商品編集画面。配送のその他の詳細にある原産国/地域で日本を選んでいる

この「原産国/地域」が入っている商品をアプリで開くと、Made in にその国が最初から入った状態で表示され、上に次の青いバナーが出ます。

通関用に設定済みの原産国「日本」を Made in の初期値として使用しています。内容を確認し、必要に応じて変更してください。

通関用の原産国が日本の商品を開き、Made in に日本が入った状態で案内のバナーが表示されている

ここは「提案」なので、「保存」を押すまでストアには出ません。 内容を確かめてから保存してください。

実装から分かる注意点が 3 つあります。

提案が出るのは Made in がまだ保存されていない商品だけです。すでに Made in を保存した商品では、通関用の原産国を変えても Made in は変わりません
通関用の原産国とアプリの設定は連動しません。保存したあとにどちらかを変えても、もう片方は変わりません
バリエーションが複数ある商品では、一覧の先頭のバリエーションの「原産国/地域」だけを見ます

アプリの設定画面

左のメニューの「設定」を開くと、上から次のカードが並びます。

商品ページに機能を追加
自動追加が失敗したときの案内（黄色のバナー。管理画面が日本語のときだけ出ます）
決まった位置以外に表示したい場合（青いバナー）
原産国ラベルの表示言語
言語設定
おすすめアプリ

設定画面。商品ページに機能を追加、注意のバナー、決まった位置以外に表示したい場合、原産国ラベルの表示言語が並んでいる

テーマに追加する（商品ページに機能を追加）

「テーマを選択」で、バッジを置くテーマを選びます。初期値は公開中のテーマで、名前の後ろに「（公開中のテーマ）」と付いています。公開前のテーマで見た目を整えたいときは、ここで別のテーマを選んでください。

テーマに追加: 新しいタブでテーマエディタが開き、選んだテーマの商品ページのメインセクションにブロックが追加された状態になります。右上の「保存」を押すと確定します
テーマをプレビュー: 新しいタブで、選んだテーマの商品ページのプレビューが開きます。ブロックを追加したあとの見え方を確かめるのに使います

テーマのバージョンによっては、選択欄が空欄になることがあります。そのときや、「テーマに追加」を押してもブロックが入らなかったときは、次の「ストアフロントの設定」にある手順で、テーマエディタから手動で追加してください。

青いバナー「決まった位置以外に表示したい場合」にあるとおり、自動で入る場所は商品ページのメインセクション内です。カートボタンの上など別の位置にしたいときは、テーマエディタでブロックをドラッグして動かします。

ラベルを英語で出すか、ストアの言語に合わせるか（原産国ラベルの表示言語）

商品ページのバッジの「Made in」などのラベルと国名を、どの言語で出すかを決めます。この設定はストア全体で 1 つで、商品ごとには変えられません。

表示言語	ストアでの見え方	向いているストア
常に英語表記（初期値）	どの言語のページでも「Made in Japan」	国際的な表記に揃えたいブランド、英語表記に慣れた客層
自動（ストアの言語に合わせる）	日本語のページなら「生産国日本」、フランス語のページならフランス語	日本語で分かりやすく伝えたいストア、多言語で販売しているストア

「自動（ストアの言語に合わせる）」のときの日本語のラベルは、Made in が「生産国」、Designed in が「設計国」、Assembled in が「組立国」、Ships from が「発送国」です。ラベルは 20 言語に対応していて、国名もその言語で出ます。

選んだら「保存」をクリックします。

原産国ラベルの表示言語で常に英語表記が選ばれ、その下に言語設定とおすすめアプリが並んでいる

アプリの管理画面の言語を変える（言語設定）

「言語を選択」で、このアプリの管理画面の表示言語を 20 言語から選び、「変更する」をクリックします。変わるのは管理画面だけで、ストアのバッジには影響しません（ストアの表示は上の「原産国ラベルの表示言語」で決まります）。

この設定はお使いのブラウザに保存されます。別のパソコンやブラウザで開いたときは、もう一度選び直してください。

ストアフロントの設定（テーマエディタ）

バッジの見た目は、テーマエディタのブロック設定で調整します。ブロックの名前は「原産地・製造国表示」です。

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

「テーマに追加」が使えなかったときや、別の位置に置きたいときの手順です。

Shopify 管理画面で「オンラインストア」→「テーマ」を開き、「カスタマイズ」をクリックします
画面上部の中央でページの種類を「商品」（デフォルトの商品）に切り替えます
左の一覧で「商品情報」を開き、「ブロックを追加」をクリックします
「アプリ」タブに切り替え、「原産地・製造国表示」をクリックします
右上の「保存」をクリックします

テーマエディタで商品情報のブロックを追加を開き、アプリタブに原産地・製造国表示が表示されている

追加したブロックは、左の一覧でドラッグすると位置を変えられます。プレビューに出るのはアプリで原産国を設定した商品だけなので、左上の「プレビュー」で設定済みの商品に切り替えると確かめやすくなります。

コンテンツ設定

設定	何を決めるか	選択肢・範囲	初期値
国旗を表示	バッジの左に国旗を出すか	オン / オフ	オン
国旗のサイズ	国旗の大きさ	10〜40px（1px 刻み）	16px

国旗を消すと、ラベルと国名だけのすっきりしたバッジになります。国旗のサイズは文字サイズと別に決められるので、国旗だけ大きくして目を引くこともできます。

レイアウト

設定	何を決めるか	選択肢・範囲	初期値
並び方	バッジを横に並べるか、縦に積むか	横並び / 縦並び	横並び
配置	バッジを寄せる位置	左 / 中央 / 右	左
バッジ同士の間隔	バッジとバッジのすき間	0〜40px（1px 刻み）	8px

横並びにしても、置いた場所の幅に収まらないバッジは次の行へ折り返します。 商品ページの右カラムのように幅が狭い場所では、4 つのバッジが縦に積まれたように見えることがあります。

ブロック設定のコンテンツ設定とレイアウト。国旗を表示、国旗のサイズ、並び方、配置、バッジ同士の間隔が並んでいる

デザイン

設定	何を決めるか	選択肢・範囲	初期値
バッジのスタイル	枠線と背景の有無	枠線あり / 塗りつぶし / 枠線・背景なし	枠線あり
文字サイズ	ラベルと国名の大きさ	10〜30px（1px 刻み）	14px
文字色	ラベルと国名の色	色を選ぶ / 空欄	空欄
背景色	バッジの背景の色	色を選ぶ / 空欄	空欄
枠線の色	バッジの枠線の色	色を選ぶ / 空欄	空欄
角の丸み	バッジの角の丸さ	0〜40px（1px 刻み）	6px
余白（上下）	バッジの内側の上下の余白	0〜40px（1px 刻み）	6px
余白（左右）	バッジの内側の左右の余白	0〜40px（1px 刻み）	10px

バッジのスタイルごとに、効く色の設定が違います。

バッジのスタイル	見た目	背景色	枠線の色
枠線あり	細い枠線＋ごく薄い背景	効く	効く
塗りつぶし	枠線なし＋背景色	効く	効かない
枠線・背景なし	文字と国旗だけ	効かない	効かない

色はすべて空欄が初期値です。空欄のときは、枠線と背景に半透明のグレーを使い、文字色はテーマの文字色をそのまま使います。白い背景のテーマでも暗い背景のテーマでも読めるようにするためです。色を指定するときは、文字色と背景色のコントラストに気をつけてください。設定画面の注記にあるとおり、ラベル部分（「Made in」など）は国名より少し薄く表示されます。

角の丸みを大きくすると丸いピル型に、0 にすると四角いタグ型になります。

ブロック設定のデザイン。バッジのスタイル、文字サイズ、文字色、背景色、枠線の色、角の丸み、余白が並んでいる

ラベルごとの色

生産国・設計国・組立国・発送国の 4 つのバッジそれぞれに、背景色と文字色を個別に指定できます。

生産国: 背景色 / 生産国: 文字色
設計国: 背景色 / 設計国: 文字色
組立国: 背景色 / 組立国: 文字色
発送国: 背景色 / 発送国: 文字色

空欄のバッジには、上の「デザイン」の共通設定が使われます。ここで指定した色はバッジのスタイルより優先されるため、「枠線・背景なし」のスタイルでも、ここで背景色を入れたバッジには背景が付きます。

「生産国だけを目立たせて、ほかは控えめに」という使い方に向いています。

ブロック設定のラベルごとの色。生産国から発送国まで、背景色と文字色の欄が並んでいる

追加設定（追加のCSS）

設定項目で足りない見た目の調整を、CSS で書き足せます。書いた CSS はこのブロックの中だけに効き、ページのほかの部分には影響しません。バッジに使われている主なクラス名は次のとおりです。

クラス名	対象
`.sa-228-country-origin__item`	バッジ 1 つ分
`.sa-228-country-origin__item--made_in` など	項目ごとのバッジ（`made_in` / `designed_in` / `assembled_in` / `ships_from`）
`.sa-228-country-origin__flag`	国旗
`.sa-228-country-origin__label`	ラベル（「Made in」など）
`.sa-228-country-origin__country`	国名

たとえば国名を太字にしたくない場合は、次のように書きます。

.sa-228-country-origin__country { font-weight: normal; }

入力した < の文字は、安全のため取り除かれます。

ブロック設定の追加設定。追加のCSSの入力欄と、その下の注記が表示されている

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

ストアの雰囲気に馴染ませたいとき

バッジのスタイルを「枠線・背景なし」にすると、国旗と文字だけになり、商品説明の一部のように自然に並びます。ミニマルなデザインのストアや、情報を控えめに添えたいときに向いています。

バッジのスタイルを枠線・背景なしにした商品ページ。国旗と Made in Canada などの文字だけが並んでいる

「Made in ○○」をいちばん目立たせたいとき

バッジのスタイルを「塗りつぶし」にし、「ラベルごとの色」で生産国: 背景色に濃い色、生産国: 文字色に白を入れます。生産国のバッジだけに色が付き、ほかの 3 つは薄いグレーのまま残るので、視線が生産国に集まります。国産を売りにしているストアにおすすめです。

バッジのスタイルを塗りつぶしにし、生産国だけ背景を赤、文字を白にした商品ページ

日本語のストアで分かりやすく伝えたいとき

アプリの「設定」で原産国ラベルの表示言語を「自動（ストアの言語に合わせる）」にして保存します。日本語のページでは「生産国日本」のように出るので、英語表記に慣れていないお客様にも伝わります。海外向けに英語のページも持っているストアなら、英語のページでは自動で「Made in Japan」になります。

バッジが表示されないときは

商品ページに何も出ない

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

その商品に原産国を保存しているか: アプリの商品一覧で「設定済み」になっているかを見ます。4 項目がどれも未保存の商品では、ブロックは何も出力しません（空の枠も出ません）
ブロックが商品ページにあり、テーマを保存したか: テーマエディタで商品ページを開き、「商品情報」の中に「原産地・製造国表示」があるかを見ます。追加したあと右上の「保存」を押していないと、ストアには出ません
公開中のテーマに追加したか: 設定画面の「テーマを選択」で別のテーマを選んで追加した場合、公開中のテーマには入っていません
ブロックが非表示になっていないか: テーマエディタの一覧で、ブロック名の右の目のアイコンが斜線になっていたら非表示です
料金プランが有効か: 無料体験が終わったあとにプランに加入していない場合、ストアのバッジは自動で非表示になります。アプリを開くとプランの選択画面に移るので、そこで加入してください

一瞬表示されてから消える

料金プランが有効でないストアでは、ページを開くとアプリのサーバーへ契約状態を問い合わせ、確認できたところでバッジを隠します。そのため一瞬見えてから消えます。プランに加入すれば消えなくなります（同じお客様のブラウザでは、確認結果を最大 30 分覚えています）。

なお、通信に失敗したときはバッジを出したままにします。プランに加入しているストアで、通信の都合でバッジが消えることはありません。

設定を変えたのにストアの見た目が変わらない

テーマエディタで設定を変えたあと、右上の「保存」を押しているか確かめてください
アプリの「原産国ラベルの表示言語」は、選んだあと「保存」を押すまで反映されません
ストアのページはブラウザや Shopify 側にしばらく残ることがあります。少し時間をおいてから、ページを再読み込みしてください

色の指定が効かない

「枠線の色」は、バッジのスタイルが「枠線あり」のときだけ効きます
「背景色」は、バッジのスタイルが「枠線・背景なし」のときは効きません（ラベルごとの色は例外で、どのスタイルでも効きます）
ラベルごとの色を入れているバッジでは、共通の文字色・背景色より、ラベルごとの色が優先されます

「テーマに追加」を押してもブロックが入らない

テーマによっては、自動追加がうまくいかないことがあります。「ストアフロントの設定」の「ブロックを手動で追加する」の手順で追加してください。

よくある質問

Shopify で登録した「原産国/地域」は、そのまま商品ページに出せないのですか？

出せません。Shopify の「原産国/地域」は通関用の管理画面だけのデータで、テーマからは読めない仕組みになっています。このアプリは、商品ごとに独自の項目として原産国を保存し、それを商品ページに表示します。すでに「原産国/地域」を入れている商品は、アプリで開くと Made in の初期値として使えます。