【2026年】Shopify画像ホットスポット吹き出しを業種別に使いこなす導入ガイド｜アプリと自作コードを比較
目次
- はじめに
- なぜ今、画像から直接売る「ショッパブル画像」なのか
- 業種・ストアタイプ別の活用シーン
- 自分のストアはどっちで作る？アプリ導入とコード自作の比較
- ノーコードで設置するなら「シンプル画像ホットスポット｜お手軽画像吹き出し」
- アプリのインストール手順
- アプリをテーマに追加（有効化）
- 業種別シーンを実現する設定項目の使い方
- 効果を底上げする組み合わせ施策
- テーマのコードで自作する場合のサンプルコード
- よくある疑問に答えます
- まとめ
- 参考記事
はじめに
「この服の襟元はオーガニックコットンなんです」「このソファの脚はアジャスター付きなんです」——商品ページの説明文にそう書いても、ユーザーが画像のどこを指しているのか分からないまま読み飛ばしてしまう。Shopify ストアを運営していると、こうした「画像と言葉のズレ」に悩む場面は意外と多いものです。
この問題を解決するのが Shopify 画像ホットスポット吹き出し です。商品画像の特定の座標にマーカーを置き、ユーザーがクリックやホバーした瞬間に説明テキストを吹き出し（ツールチップ）として表示する仕組みで、「画像のここを見てほしい」という意図をそのまま画像の上に重ねて伝えられます。
ただ、いざ導入しようとすると「結局うちの商材だとどう使えばいいのか」が一番のつまずきポイントになります。アパレルと食品とコスメでは、ホットスポットで伝えるべき情報がまったく違うからです。そこでこの記事では、業種・ストアのタイプ別に「どんな画像にどんな吹き出しを置くか」 という具体的な活用シーンを軸にして、Shopify 画像ホットスポット吹き出しの導入方法を解説します。あわせて、ノーコードで設置できる画像ホットスポットアプリの手順と、コードで自作する場合のサンプルも掲載しています。
この記事は以下の記事を参考にしています。
なぜ今、画像から直接売る「ショッパブル画像」なのか
業種別の使い方に入る前に、画像ホットスポット吹き出しがなぜ売上に効くのかを数字で確認しておきましょう。ここを押さえておくと、自分のストアでどこに投資すべきかの判断がしやすくなります。
ショッパブルコンテンツ（画像から直接商品に触れられるコンテンツ）の効果については、ReelTok の調査で、ショッパブルコンテンツは静止画と比べて転換率が 25〜80% 向上 したと報告されています。Shopify 全体の静止画平均 CVR が約 1.4% という水準を踏まえると、この差は決して小さくありません。
さらに視覚コンテンツによる転換率向上は商材によって幅があり、HubSpot のデータ（ShopiDevs 引用）では、アパレルで 6.4%、ジュエリーで 2.4 倍、フットウェアで 1.7 倍、ビューティー・家電で 1.6 倍という結果が出ています。つまり「商品のどこをどう見せるか」が転換率を左右する商材ほど、画像ホットスポット吹き出しの恩恵が大きいということです。
ここで重要なのは、ただマーカーを置けばいいわけではないという点です。アパレルなら素材とシルエット、家具なら構造と仕上げ、食品なら産地とこだわり——商材ごとに「指し示すべきポイント」はまったく違います。次の章から、業種別にどう使い分けるかを具体的に見ていきます。
業種・ストアタイプ別の活用シーン
ここからが本題です。「シンプル画像ホットスポット｜お手軽画像吹き出し」のようなアプリでも、自作コードでも、考え方は共通します。自分のストアに近いものを参考にしてください。
アパレル・ファッション：素材とディテールを着用イメージに重ねる
アパレル商品を販売するストアでは、素材・ディテール・シルエットの特長を着用画像の上に重ねて見せると効果的です。先ほどの統計でもアパレルは視覚コンテンツによる転換率向上が 6.4% と高く、まさに画像ホットスポット吹き出しが活きる商材です。
- 画像: 商品全体が見えるフロント画像（モデル着用画像がベスト）
- ホットスポット 1: 襟元の位置 → 「オーガニックコットン100%の滑らかな肌触り」
- ホットスポット 2: 胸ポケットの位置 → 「便利な内ポケット付き」
- ホットスポット 3: 裾の位置 → 「リブ編みで程よいフィット感」
- マーカーカラー: ブランドのアクセントカラー
モデル着用画像の各パーツにマーカーを配置すると、商品の特長を着用イメージとセットで伝えられます。筆者が運用支援で見てきた範囲でも、ホットスポットを欲張って 7 個も 8 個も置くと逆にクリック率が落ちる傾向があります。「3〜4 個に絞り、最も訴求したいポイントだけに限定する」 のがコツです。
複数アイテムのコーディネートをまとめて売りたい場合は、後述する「ルックブック（shop the look）」型のアプリ選びも視野に入れてください。
家具・インテリア：手に取れない不安を構造の説明で埋める
家具やインテリア商品では、構造・素材・使い勝手といった「触ってみないと分からない情報」を吹き出しで補うと、購入の後押しになります。
- 画像: 商品単体のスタジオ撮影画像、またはインテリアに配置したライフスタイル画像
- ホットスポット 1: 天板の位置 → 「天然ウォールナット無垢材を使用」
- ホットスポット 2: 脚部の位置 → 「スチール製の丈夫な脚。アジャスター付きでガタつき防止」
- ホットスポット 3: 引き出しの位置 → 「フルオープンスライドレールでスムーズに開閉」
- マーカーカラー: ダークグレーまたはブラック
家具はオンラインだと実物を確かめられないため、素材感や機能面の情報がそのまま購入の決め手になります。「触れてわかる情報を画像の上で言語化する」 という発想で吹き出しを設計すると、商品ページの説得力が一段上がります。
食品・グルメ：産地とこだわりでシズル感に説明を足す
食品を販売するストアでは、原材料のこだわりや調理のポイントを盛り付け画像の上で伝えると、食欲と信頼感の両方を刺激できます。
- 画像: 盛り付け後の料理画像、またはパッケージ画像
- ホットスポット 1: メイン食材の位置 → 「北海道産の新鮮なサーモンを使用」
- ホットスポット 2: ソースの位置 → 「自家製の特製醤油ダレ」
- ホットスポット 3: 付け合わせの位置 → 「季節の有機野菜を厳選」
- マーカーカラー: 暖色系（オレンジやゴールド）
食品では 「何が入っているか・どこの産地か・どんなこだわりがあるか」 を伝えることが信頼につながります。シズル感のある画像にホットスポットを重ねると、見た目で食欲を刺激しながら、産地や製法の情報まで自然に届けられます。
コスメ・ビューティー：試せない使用感をテクスチャー画像で補う
コスメや美容商品では、成分・使用感・容器の使い勝手をホットスポットで補完できます。ビューティーは前述の統計でも視覚コンテンツによる転換率向上が 1.6 倍と報告されており、見せ方の工夫が効く分野です。
- 画像: 商品パッケージのクローズアップ画像、またはテクスチャー画像
- ホットスポット 1: パッケージの位置 → 「エアレスポンプで最後まで清潔に使える」
- ホットスポット 2: テクスチャー部分 → 「みずみずしいジェルテクスチャーでべたつかない」
- ホットスポット 3: 成分表示の位置 → 「ヒアルロン酸Na・セラミド配合で保湿力UP」
- マーカーカラー: パステルカラーやブランドカラー
コスメは手に取って試せないというオンラインの弱点を、テクスチャー画像 + 吹き出しで埋められます。「みずみずしい」 といった使用感のニュアンスを、該当箇所を指し示しながら伝えられるのがホットスポットの強みです。
ルックブック・複数アイテム提案：画像から一括購入につなげる
モデルの全身コーディネート画像から、個々のアイテムを直接売りたい——いわゆる shop the look 型の運用では、各アイテムの位置にホットスポットを置き、商品名・価格・素材を吹き出しで表示します。ユーザーは気になるアイテムをクリックするだけで情報を確認し、そのまま商品ページへ遷移できます。
この用途を本格的に運用するなら、吹き出し内から複数アイテムをまとめてカートに入れられるアプリを選ぶと体験が変わります。たとえば「Byte Lookbook & Shop The Look」は、吹き出し内から すべてカートに追加（add-all-to-cart） できる点が差別化要素で、月額 $10 のほかに買い切り $199（ライフタイム）プランも用意されています。コーデ一括購入を重視するストアにとっては、こうした「shop the look の有無」が選定軸になります。
自分のストアはどっちで作る？アプリ導入とコード自作の比較
業種別の使い方がイメージできたら、次の分岐は「アプリで設置するか、テーマのコードで自作するか」です。前提として、Shopify の標準テーマには画像ホットスポット吹き出し機能は搭載されていません。実際、標準テーマ「Dawn」にもホットスポット／ツールチップ機能は標準では入っておらず、自作する場合は Liquid のカスタムセクションを用意し、PC はホバーで吹き出し表示・モバイルはタップで表示と挙動を分岐させ、選択した商品の画像・タイトル・ベンダー・価格を吹き出し内に自動表示する、といった実装まで自前で組む必要があります（参考: note.com/tech_malin の Dawn 対応セクション解説）。
それぞれの向き不向きを整理します。
| 比較軸 | テーマのコード自作 | アプリ導入 |
|---|---|---|
| ランニングコスト | 無料（月額なし） | 月額料金が発生 |
| 必要スキル | HTML / CSS / JavaScript の知識が必須 | コーディング不要 |
| レスポンシブ・タッチ対応 | 自分で実装 | 標準搭載 |
| 位置調整 | コード上で座標を手入力 | GUI でドラッグ・数値入力 |
| テーマ更新時 | 上書きで消えるリスクあり | 影響を受けにくい |
| サポート | 自力で解決 | 開発元のサポートあり |
ホットスポットの肝はマーカーの位置合わせです。コード編集だとパーセント座標を手入力で詰めていく作業になりますが、アプリならテーマエディタ上で数値を変えながらプレビューで確認できます。「まず無料体験のあるアプリで小さく設置し、効果が見えたら必要に応じてコードでの作り込みを検討する」 という順序が、リスクを抑えつつ成果を出しやすい進め方です。
価格感をつかむために、代表的な画像ホットスポット／ルックブックアプリの相場も挙げておきます。最安級は Coduzion「Image Hotspot (Lookbook Gallery)」で月額 $2.99（14 日無料）、完全無料で使えるものとしては「Spot ‑ Shoppable Image」（開発元 Lucas Berger Software）があります。テンプレートが豊富なのは「Essential Grid Gallery」（ShopiDevs）で、無料プラン + $5.99〜$29.99/月、80 以上のテンプレートを同梱しています。「価格・テンプレート数」 のどれを重視するかで選ぶアプリは変わってきます。吹き出しの見た目を作り込みたい場合は、ピンとツールチップを個別にカスタマイズできる「Nitro Lookbook & Image Gallery」（$5.59/月）のように、カスタマイズ性を売りにしたアプリも候補になります。
ノーコードで設置するなら「シンプル画像ホットスポット｜お手軽画像吹き出し」
ここまでの業種別シーンを日本語の管理画面でそのまま実装したいなら、最初に試したい一本が「シンプル画像ホットスポット｜お手軽画像吹き出し」です。
このアプリは、商品画像やライフスタイル画像の上にホットスポットマーカーを配置し、クリック時に吹き出しで説明テキストを表示できるノーコードアプリです。管理画面から直感的に操作でき、コード不要でストア内の任意のページに画像ホットスポット吹き出しを設置できます。先ほどのアパレルや食品の設置例を、座標と吹き出しテキストを入力するだけで再現できるイメージです。
アプリの基本情報
- アプリ名: シンプル画像ホットスポット｜お手軽画像吹き出し
- 価格: 月額 $5.99（7 日間無料体験あり）
- カテゴリー: 画像とメディア
- 対応言語: 日本語を含む多言語
海外の比較記事は英語前提のものが多く、設定画面のニュアンスでつまずきがちです。その点、管理画面と吹き出しの設定が日本語で完結する点は、日本のストア運営者にとって地味ですが効いてくる実務上のメリットです。
できること
画像上の任意の位置にホットスポットを配置
商品画像やライフスタイル画像の上に、好きな位置にマーカーを置けます。位置はパーセント座標で指定するため、画面サイズが変わっても相対的な位置が維持されます。1 つの画像に複数のホットスポットを設置できるので、商品の複数の特長をまとめて紹介できます。
クリックで吹き出し表示
マーカーをクリックすると、設定したテキストが吹き出し（ツールチップ）として表示されます。素材情報・機能説明・サイズの目安など、画像の特定箇所に紐づけた情報を伝えられます。
マーカーとスタイルのカスタマイズ
マーカーのサイズ・カラー、吹き出しの背景色・文字色を調整できます。ストアのブランドカラーに合わせれば、ホットスポットだけが浮かない統一感のある見た目に仕上がります。
ワンクリックでテーマに追加
インストール後、テーマエディタから「アプリブロック」としてワンクリックで追加できます。コード編集は不要で、すぐにストアへ反映できます。
アプリのインストール手順
ここからは「シンプル画像ホットスポット｜お手軽画像吹き出し」の具体的なインストール手順を解説します。
ステップ 1: Shopify 管理画面から「設定」をクリック
Shopify の管理画面にログインし、左下の「設定」をクリックします。
ステップ 2: 「アプリと販売チャネル」から Shopify App Store に移動
設定画面の左メニューから「アプリと販売チャネル」を選び、「Shopify App Store」ボタンをクリックして App Store に移動します。
ステップ 3: アプリを検索する
App Store の検索バーに「シンプル画像ホットスポット」と入力して検索します。検索結果に表示された「シンプル画像ホットスポット｜お手軽画像吹き出し」をクリックして詳細ページに移動します。
ステップ 4: 「インストール」ボタンをクリック
詳細ページで「インストール」ボタンをクリックします。アクセス権限の確認画面が表示されたら、内容を確認して「インストール」をクリックします。
ステップ 5: アプリの管理画面が表示される
インストールが完了すると、アプリの管理画面が表示されます。ここから各種設定を行います。次のステップで、テーマへの追加（有効化）を行います。
アプリをテーマに追加（有効化）
インストールしただけでは、ストアのページにホットスポット吹き出しは表示されません。テーマエディタからアプリブロックを追加して有効化します。
ステップ 1: テーマエディタでアプリブロックを追加
Shopify 管理画面から「オンラインストア」>「テーマ」>「カスタマイズ」をクリックしてテーマエディタを開きます。ホットスポット吹き出しを表示したいページのセクションで「ブロックを追加」をクリックし、「アプリ」カテゴリーから「シンプル画像ホットスポット」を選択します。
ステップ 2: 設定を確認して「保存」をクリック
アプリブロックが追加されたら、プレビューで表示を確認します。問題がなければ画面右上の「保存」ボタンをクリックします。これでストアのページに画像ホットスポット吹き出しが表示されるようになります。
業種別シーンを実現する設定項目の使い方
「シンプル画像ホットスポット｜お手軽画像吹き出し」の設定項目を、前半で挙げた業種別シーンに引きつけて解説します。どの項目をどう触れば、アパレルや食品の設置例を再現できるのかという視点で見てください。
画像設定：シーンに合うベース画像を選ぶ
画像設定では、ホットスポットを配置するベース画像を登録します。
ベース画像は Shopify のメディアライブラリからアップロードして選びます。アパレルならモデル着用画像、食品なら盛り付け画像、コスメならテクスチャー画像、というように、業種別シーンで挙げた画像をここで指定します。解像度が高いほどディテールはきれいに表示されますが、ファイルサイズが大きすぎると読み込みが遅くなるため、WebP 形式でリサイズしてからアップロードしましょう。
ホットスポット設定：座標と吹き出しテキストを入力する
ホットスポット設定では、マーカーの位置と吹き出しテキストを設定します。前半の「ホットスポット 1 → 襟元」「ホットスポット 2 → 胸ポケット」といった設計を、ここで数値に落とし込みます。
マーカーの位置（横位置・縦位置）
マーカーの位置を、横位置（X 座標）と縦位置（Y 座標）それぞれ 0〜100 の範囲でパーセント指定します。画像の左上が基準で、右方向が横位置の正方向、下方向が縦位置の正方向です。横位置 50・縦位置 30 なら、横方向の中央・縦方向の 30% の位置にマーカーが置かれます。パーセント指定なので、画面サイズが変わっても相対的な位置が維持されます。
吹き出しのテキスト
マーカークリック時に表示されるテキストを入力します。「北海道産の新鮮なサーモンを使用」 のように、画像の該当箇所に紐づく情報を簡潔に書きます。長すぎると読みにくいので 1〜2 行に収め、詳細が必要なら商品説明テキストへの誘導を添えるのがおすすめです。
スタイル設定：ブランドカラーで浮かせない
スタイル設定では、マーカーや吹き出しの見た目を調整します。
マーカーのカラー
マーカーの色を設定します。前半のシーン例ではアパレルはブランドのアクセントカラー、家具はダークグレーやブラック、食品は暖色系を挙げました。背景に対してコントラストの高い色を選ぶと視認性が上がります。
マーカーのサイズ
マーカーの大きさを調整します。大きすぎると画像を隠し、小さすぎるとクリックしづらくなるため、画像サイズとマーカー数を見ながらバランスを取ります。
吹き出しの背景色・文字色
吹き出しの背景色と文字色を設定します。暗い背景色に明るい文字色、または明るい背景色に暗い文字色という、コントラストのある組み合わせが読みやすいとされています。
余白設定：前後セクションとのリズムを整える
セクション全体の余白（パディング）を調整します。
上下の余白を広めに取ると、ホットスポット画像がセクションとして独立して見え、視覚的なメリハリが生まれます。逆に余白を狭くすると、前後のコンテンツと密に連携した印象になります。商品ページの流れに合わせて調整してください。
効果を底上げする組み合わせ施策
画像ホットスポット吹き出しは単体でも効きますが、他の施策と組み合わせると成果がさらに伸びます。業種別シーンと相性の良い組み合わせを紹介します。
商品ページの情報設計に組み込む
ホットスポットは、商品ページの情報密度を高めるツールです。説明文・スペック表・レビューに加えて設置することで、ユーザーが商品を多角的に理解できます。
- 商品画像ギャラリー + ホットスポット: メイン画像にホットスポットを置き、サブ画像でディテールを拡大表示する
- 商品説明テキスト + ホットスポット: テキストで全体像、ホットスポットで画像上の具体ポイントを補足する
- サイズガイド + ホットスポット: サイズ表とは別に、着用画像上にサイズ感のホットスポットを置く
ルックブック施策と連携する
アパレルやルックブックのシーンでは、全身コーディネート画像にホットスポットを置き、各アイテムの商品名・価格・素材を吹き出しで表示します。ユーザーは気になるアイテムをクリックして情報を確認し、そのまま商品ページへ遷移する導線を設計できます。
Before After スライダーと組み合わせる
コスメのシーンでは、ホットスポットで成分や特長を説明しつつ、Before After スライダーで使用前後の変化を見せると、「なぜ効果があるのか」 と 「実際にどう変わるのか」 の両方を伝えられ、購入への納得感が高まります。
FAQ セクションと連携する
吹き出しは短いテキストで要点を伝えるのに向いていますが、詳しい説明には文字数が足りません。吹き出しでは要点だけを伝え、「詳しくはページ下部の FAQ をご覧ください」と誘導すると、情報を階層化できます。
テーマのコードで自作する場合のサンプルコード
アプリを使わず、テーマのコード編集で実装したい方向けにサンプルコードを掲載します。以下は HTML・CSS・JavaScript で構成する、シンプルな画像ホットスポット吹き出し機能です。前半の比較表で触れたとおり、Dawn のような標準テーマには機能がないため、これらを自分で組み込む形になります。
実装の流れ
- テーマの Liquid ファイルに HTML を追加する
- CSS を追加してマーカーと吹き出しのスタイルを定義する
- JavaScript を追加してクリック時の吹き出し表示を実装する
HTML を追加
テーマエディタから「テーマコードを編集」を開き、ホットスポットを表示したいテンプレートファイル（例: product.liquid や page.liquid）の、画像を表示したい位置に以下の HTML を貼り付けます。<div class="hotspot-container"> のまとまりをそのまま挿入する形です。
<div class="hotspot-container">
<div class="hotspot-wrapper" id="hotspotWrapper">
<img
src="画像のURLをここに入力"
alt="商品画像"
class="hotspot-image"
/>
<!-- ホットスポット1 -->
<div
class="hotspot-marker"
data-tooltip="オーガニックコットン100%の滑らかな肌触り"
style="left: 50%; top: 20%"
>
<span class="hotspot-marker__icon">+</span>
</div>
<!-- ホットスポット2 -->
<div
class="hotspot-marker"
data-tooltip="便利な内ポケット付き"
style="left: 30%; top: 45%"
>
<span class="hotspot-marker__icon">+</span>
</div>
<!-- ホットスポット3 -->
<div
class="hotspot-marker"
data-tooltip="リブ編みで程よいフィット感"
style="left: 50%; top: 85%"
>
<span class="hotspot-marker__icon">+</span>
</div>
</div>
</div>
画像のURLをここに入力 の部分を、実際の画像 URL に置き換えてください。マーカーの位置は style 属性の left（横位置）と top（縦位置）の値で調整します。吹き出しに表示するテキストは data-tooltip 属性に設定します。前半の業種別シーンの吹き出し文をそのまま data-tooltip に入れれば、アパレルの設置例を再現できます。
CSS を追加
テーマの CSS ファイル（base.css や theme.css など）の末尾に、以下のスタイルを追記します。マーカーの形・色・ホバー挙動と、吹き出しの見た目をまとめて定義しています。
.hotspot-container {
max-width: 800px;
margin: 40px auto;
padding: 0 16px;
}
.hotspot-wrapper {
position: relative;
display: inline-block;
width: 100%;
}
.hotspot-image {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
}
.hotspot-marker {
position: absolute;
width: 32px;
height: 32px;
background: #ff6b35;
border-radius: 50%;
cursor: pointer;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
z-index: 2;
}
.hotspot-marker:hover {
transform: translate(-50%, -50%) scale(1.15);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.hotspot-marker__icon {
color: #ffffff;
font-size: 18px;
font-weight: bold;
line-height: 1;
user-select: none;
}
.hotspot-tooltip {
position: absolute;
bottom: calc(100% + 12px);
left: 50%;
transform: translateX(-50%);
background: #333333;
color: #ffffff;
padding: 10px 16px;
border-radius: 6px;
font-size: 14px;
line-height: 1.5;
white-space: nowrap;
max-width: 240px;
white-space: normal;
text-align: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
z-index: 10;
pointer-events: none;
}
.hotspot-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #333333;
}
.hotspot-marker.is-active .hotspot-tooltip {
opacity: 1;
visibility: visible;
}
@media (max-width: 768px) {
.hotspot-container {
margin: 24px auto;
}
.hotspot-marker {
width: 26px;
height: 26px;
}
.hotspot-marker__icon {
font-size: 15px;
}
.hotspot-tooltip {
font-size: 12px;
padding: 8px 12px;
max-width: 180px;
}
}
末尾のメディアクエリで、768px 以下の画面ではマーカーと吹き出しを小さくしています。モバイルでマーカーが大きすぎて画像を覆ってしまうのを防ぐ部分なので、スマートフォンでの見え方を確認しながら数値を調整してください。
JavaScript を追加
テーマの JavaScript ファイル、またはテンプレート内の <script> タグの中に、以下のコードを追加します。クリックで吹き出しの表示・非表示を切り替える処理です。HTML 内の .hotspot-marker を読み取って動くため、先の HTML を設置したページで読み込まれる必要があります。
document.addEventListener('DOMContentLoaded', function () {
const markers = document.querySelectorAll('.hotspot-marker');
markers.forEach(function (marker) {
// ツールチップ要素を生成
const tooltipText = marker.getAttribute('data-tooltip');
if (!tooltipText) return;
const tooltip = document.createElement('div');
tooltip.className = 'hotspot-tooltip';
tooltip.textContent = tooltipText;
marker.appendChild(tooltip);
// クリックで表示・非表示を切り替え
marker.addEventListener('click', function (e) {
e.stopPropagation();
const isActive = marker.classList.contains('is-active');
// 他のマーカーのツールチップを閉じる
markers.forEach(function (m) {
m.classList.remove('is-active');
});
// クリックしたマーカーのツールチップを切り替え
if (!isActive) {
marker.classList.add('is-active');
}
});
});
// 画像外をクリックしたらすべてのツールチップを閉じる
document.addEventListener('click', function () {
markers.forEach(function (m) {
m.classList.remove('is-active');
});
});
});
このコードは data-tooltip の値からツールチップ要素を動的に生成し、クリックで開閉します。複数マーカーを置いても、別のマーカーを押せば先に開いていた吹き出しは自動で閉じる作りです。Dawn 系テーマで商品情報（タイトル・価格・ベンダー）を吹き出しに自動表示したい場合は、data-tooltip の中身を Liquid の商品オブジェクトから出力する形に拡張する必要があります。
コード実装の注意点
テーマのコード編集で実装する場合は、以下に注意してください。
テーマのバックアップを取る
編集前に必ずテーマのバックアップ（複製）を取りましょう。エラーが起きても複製から復元できます。
画像サイズを最適化する
ベース画像は WebP 形式で保存し、リサイズしてからアップロードします。推奨は幅 1200px 以下、ファイルサイズ 200KB 以下が目安です。
パーセント座標で位置指定する
ホットスポットの位置はピクセルではなくパーセント値（left: 50%; top: 30%）で指定します。これでレスポンシブ対応が容易になります。
ツールチップの位置に注意する
画像の上端付近にマーカーを置くと、吹き出しが画像の外にはみ出すことがあります。上端のマーカーでは吹き出しを下方向に表示するなど、位置に応じた調整が必要です。
テーマアップデートに注意
テーマをアップデートすると、追加したカスタムコードが上書きされて消えることがあります。アップデート前にカスタムコードのバックアップを取りましょう。
よくある疑問に答えます
Q: 画像ホットスポット吹き出しは無料で導入できますか？
A: テーマのコード編集で実装する場合は無料です。ただし HTML / CSS / JavaScript の知識が必要です。アプリを使う場合は月額料金が発生しますが、「シンプル画像ホットスポット｜お手軽画像吹き出し」は 7 日間の無料体験があるため、まずは無料で試せます。完全無料のアプリを探すなら、前述の「Spot ‑ Shoppable Image」のような無料プランのある選択肢もあります。
Q: スマートフォンでもホットスポットは正しく表示されますか？
A: はい。「シンプル画像ホットスポット｜お手軽画像吹き出し」はレスポンシブ対応が標準で、スマートフォンやタブレットでもマーカーの位置が適切に調整されます。位置はパーセント座標で管理されるため、画面サイズが変わっても相対的な位置が維持されます。自作する場合は、PC はホバー・モバイルはタップで吹き出しを出すよう挙動を分岐させる実装が必要です。
Q: 1 つの画像に何個までホットスポットを配置できますか？
A: 技術的な制限はありませんが、ユーザビリティの観点から 3〜5 個程度に絞ることをおすすめします。マーカーが多すぎると画像がマーカーだらけになり、かえって混乱を招きます。本当に伝えたいポイントだけを厳選しましょう。
Q: 画像ホットスポット吹き出しはどのページに設置できますか？
A: アプリブロックに対応した Shopify テーマ（OS 2.0 以降）であれば、商品ページ・コレクションページ・固定ページ・ブログ記事ページなど、テーマエディタで編集できるあらゆるページに設置できます。トップページでブランドの世界観を伝えたり、商品ページで購入を後押ししたりと、目的に応じて使えます。
Q: ホットスポットの位置を後から変更できますか？
A: はい、いつでも変更できます。アプリの場合はテーマエディタのアプリブロック設定から横位置・縦位置の値を変えるだけで、変更はリアルタイムでプレビューに反映されます。コード編集の場合は HTML の style 属性の left と top の値を変更します。
Q: 既存のテーマを変更せずにホットスポットを導入できますか？
A: はい、アプリを使えばテーマのコードを変更せずに導入できます。「シンプル画像ホットスポット｜お手軽画像吹き出し」はアプリブロックとして追加するだけなので、既存のテーマファイルに影響を与えません。アンインストールすればテーマは元の状態に戻ります。
まとめ
Shopify 画像ホットスポット吹き出しは、業種ごとに「指し示すべきポイント」が変わる施策です。最後に要点を整理します。
- Shopify の標準機能（Dawn を含む標準テーマ）にはホットスポット吹き出しがないため、テーマのコード自作 か アプリ導入 のどちらかで実装する
- ショッパブルコンテンツは静止画より転換率が 25〜80% 高いとされ、アパレル・ジュエリー・フットウェアなど視覚で売る商材ほど効果が出やすい
- アパレルは素材とシルエット、家具は構造と仕上げ、食品は産地とこだわり、コスメは使用感、と 業種別に吹き出しの中身を設計する ことが成果の分かれ目
- コーディング不要で日本語の管理画面から設置するなら「シンプル画像ホットスポット｜お手軽画像吹き出し」が始めやすく、月額 $5.99・7 日間の無料体験 で効果を検証できる
- shop the look の一括購入やテンプレートの豊富さなど、重視する軸によっては他アプリも比較対象になる
- ホットスポットは 3〜5 個に絞り、吹き出しは 1〜2 行で簡潔にまとめる
まずは自分のストアに近い業種のシーンを参考に、無料体験で一枚の画像から試してみてください。画像の中の「ここを見てほしい」が伝わるようになると、商品ページの説得力は確実に変わります。
