Shopifyで商品ページにラベルや商品タグを表示するアプリについて徹底解説｜ご利用ガイド

はじめに

今回の記事は、Shopify アプリである「シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定」の解説記事です。

Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームを拡張する機能のようなものです。WordPress のプラグインのようなもの、とご認識頂いて大丈夫です。

「シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定」は、商品ページ上に “商品タグ” をラベルとして表示できるアプリです。
「新商品」「セール」「限定」「送料無料」など、重要な情報をラベルで分かりやすく見せられるため、購入検討中のお客様の判断を後押ししやすくなります。

さらに、色・文字・枠線・余白などをノーコードで調整でき、ブランドに合った見た目をすぐに作れます。

ご興味のある方は、以下の URL からインストールしてみてください。

• インストール URL：https://apps.shopify.com/sa-146-ur-prod-tag-label?locale=ja
• 料金：Basic Plan $2.99/月（1 週間の無料期間あり）

---

「シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定」でできること

Shopify アプリである「シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定」は、商品タグを “見せるラベル” に変換して商品ページ上に表示できるアプリです。

主な特徴は次のとおりです。

1. タグごとの表示・非表示を柔軟に設定できる（見せたいタグだけ表示 / 見せたくないタグだけ隠す）
2. 指定したタグを強調表示できる（「セール」「限定」などを目立たせる）
3. ノーコードで見た目をカスタマイズできる（文字色・背景・枠線・余白など）
4. 1 クリックでテーマに追加できる（手動追加にも対応）

商品タグごとの表示・非表示を柔軟に設定できる

「このタグは見せたい」「このタグは裏側の運用タグなので見せたくない」といった要望に合わせて、タグの出し分けができます。

指定したタグを強調表示できる

「Sale」「New」「Limited」など、特に注目してほしいタグを強調デザインで表示できます。
重要情報が一瞬で伝わるので、商品ページの訴求力アップにつながります。

ノーコードで見た目をカスタマイズできる

文字サイズ・太さ・色・背景色・枠線・角丸・余白などを、管理画面からコードなしで調整できます。テーマの雰囲気に合わせて簡単に馴染ませられます。

1 クリックでテーマに追加できる

アプリを入れたあと、テーマへブロックを追加して有効化するだけで使えます（手動追加も可能）。
コーディング作業は不要です。

---

シンプル商品ページラベル表示アプリのインストール

それでは、実際にアプリをインストールしていきましょう。

• インストール URL：https://apps.shopify.com/sa-146-ur-prod-tag-label?locale=ja
• 料金：Basic Plan $2.99/月（1 週間無料）

ストア管理画面左下の「設定」をクリックします。

「アプリ」をクリックし、「Shopify App Store」に移動してください。

検索窓に「シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定」と入力し、表示されたアプリをクリックします。

アプリ詳細画面の「インストール」ボタンをクリックしてストアにインストールします。

権限の確認画面が表示されたら、内容を確認してインストールを完了してください。

以上で、アプリのインストールは完了です。

---

アプリブロックを商品ページに追加する

このアプリは「アプリブロック」としてテーマに追加して使います。
商品ページ（Product template）にブロックを追加すると、商品タグがラベルとして表示されます。

自動でアプリをテーマに追加（1 クリック）

アプリ管理画面側に「テーマに追加」系の導線がある場合は、案内に沿って進めるとスムーズです。

1. Shopify 管理画面で本アプリを開く
2. 「テーマを選択」から適用したいテーマを選択
3. 「テーマに追加」をクリック
4. テーマエディタが開いたら「保存する」

手動でアプリをテーマに追加

自動追加がうまくいかない場合や、テンプレートを指定して追加したい場合は手動で行います。

1. Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開く
2. 上部のテンプレート選択から「商品」テンプレート（例：デフォルト商品）へ移動
3. 「セクションを追加」または「ブロックを追加」をクリック
4. 「アプリ」タブから 「UR: Product Page Label Display」（本アプリ）を選んで追加
5. 表示位置を調整し「保存する」

---

シンプル商品ページラベル表示アプリのカスタマイズ

テーマにアプリブロックを追加したら、テーマエディタで本アプリのカスタマイズを行えます。
ブロック（UR: Product Page Label Display）をクリックすると、下記のような設定項目が表示されます。

以降は、設定画面（添付画像）に合わせて、各項目を分かりやすく解説します。

---

タグ表示設定

表示モード

タグの出し分け方を決めます。用途に合わせて次のように使い分けるのがおすすめです。

• 指定タグのみを表示：見せたいタグだけを「指定タグ」に入れて ホワイトリスト表示

  • 例：new,sale,limited だけ見せる

• 指定タグ以外を表示：見せたくないタグを「指定タグ」に入れて ブラックリスト非表示

  • 例：internal,hidden は隠して、それ以外を表示

指定タグ

表示または非表示にするタグを、カンマ区切りで入力します。

• 例：sale,new,limited
• 空欄の場合は全タグが表示されます

※ タグ名は、実際に商品に設定されているタグと同じ表記で入力してください（全角/半角などに注意）。

強調タグ

強調表示（目立つデザイン）したいタグを、カンマ区切りで指定します。

• 例：sale,hot
• 「セール」「限定」「人気」など、コンバージョンに直結しやすい情報の強調に便利です。

タグリンクを有効化

有効にすると、ラベル（タグ）をクリックした際に、そのタグで絞り込んだ商品一覧ページへ遷移します。
「同じテイストの商品も見たい」という回遊を促したい場合におすすめです。

タグ接頭辞

タグ名の前に付ける文字を設定できます。

• 例：# / @ など
• ハッシュタグ風の見せ方にしたい場合に便利です。

接頭辞の後にスペースを追加

有効にすると、接頭辞とタグ名の間に半角スペースを自動で入れます。

• 例：#Sale → # Sale

---

デザイン設定

ラベルの見た目を、テーマに合わせて調整できます。

• フォントサイズ：ラベル文字の大きさ（px）
• 文字の太さ：フォントウェイト（例：400/600 など）
• 文字色：通常タグの文字色
• 背景色：通常タグの背景色
• 枠線の色：通常タグの枠線色
• 枠線の太さ：枠線の太さ（px）
• 角の丸み：角丸（px）
• 強調タグの背景色：強調タグ用の背景色
• 強調タグの文字色：強調タグ用の文字色
• 強調タグの枠線色：強調タグ用の枠線色

ポイント：
「通常タグ」は控えめ、「強調タグ」はコントラストを強めると、重要情報が自然に目に入るようになります。

---

余白設定

ラベルの読みやすさ・整列感に直結する項目です。

• タグ内の余白（上下）：ラベル内の上下パディング（px）
• タグ内の余白（左右）：ラベル内の左右パディング（px）
• タグ間の余白：ラベル同士の間隔（px）
• 上部の余白（PC） /（スマホ）：ブロック上の余白（デバイス別）
• 下部の余白（PC） /（スマホ）：ブロック下の余白（デバイス別）

ポイント：
スマホだけ余白を少し広めにすると、指で触りやすく読みやすい UI になりやすいです。

---

その他の設定

追加の CSS

設定項目以外の微調整をしたい場合に、CSS を追記して上書きできます。
検証ツールなどでクラス名を確認し、必要なスタイルを追加してください。

• 例：フォントをさらに細かく調整したい
• 例：ホバー時のスタイルを変えたい
• 例：ラベルの表示位置をテーマ都合で微調整したい

---

おわりに

今回は「シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定」の解説を行いました。

• 商品タグを “ラベル” として分かりやすく表示して訴求力をアップ
• 表示・非表示、強調表示、リンク化まで 柔軟にコントロール
• 色・枠線・余白なども ノーコードで調整でき、テーマにすぐ馴染む
• **月額 $2.99（1 週間無料）**で導入しやすい

「新商品」「セール」「限定」などの情報を目立たせたい方は、ぜひ導入してみてください。

• インストール URL：https://apps.shopify.com/sa-146-ur-prod-tag-label?locale=ja