実店舗がある場合は、ストアページにGoogle マップを埋め込むと、顧客が店舗の場所を確認しやすくなります。
本記事では、ストアページに地図を埋め込む方法をご説明します。
１、Google マップの埋め込みコードを使用する
STEP 1. 店舗の場所を探す
Google マップで店舗の場所を検索します。
STEP 2. 地図を共有する
埋め込みたい場所が地図に表示されていることを確認し、「共有」をクリックします。
STEP 3. 埋め込みコードをコピーする
表示された画面で「地図を埋め込む」タブを選び、埋め込みコードをコピーします。地図のサイズは、大・中・小・カスタムから選択できます。
STEP 4. テキストページを作成する
SHOPLINEの管理画面で「オンラインストアデザイン > ページ」を開き、「テキストページ」を選択してページタイトルを入力します。
STEP 5. 埋め込みコードを貼り付ける
ページの内容を編集する画面で「Toggle HTML」をクリックし、先ほどコピーした埋め込みコードを貼り付けます。その後、「保存」をクリックします。
補足：「Toggle HTML」をクリックすると、入力欄の内容がHTMLコードで表示されます。詳しくは、テキストエディタでHTMLを表示する方法をご覧ください。
STEP 6. 必要に応じてナビゲーションに追加する
管理画面の「オンラインストアデザイン」から、必要に応じて新しいページをナビゲーションに追加します。メインナビゲーションとストアのフッターの両方に追加できます。
２、カスタムページのエディタで地図を追加する
STEP 1. カスタムページを作成する
SHOPLINEの管理画面で「オンラインストアデザイン > ページ」を開き、「カスタムページ」を選択してテンプレートを選びます。
STEP 2. ページタイトルを設定する
「デザイン」をクリックし、ページタイトルを設定します。
補足：複数の言語でストアを運営している場合は、各言語のタイトルを同時に入力しておくと、後から設定する手間を省けます。
STEP 3. Google マップを配置する
「Google Map」ボタンを中央の編集エリアへドラッグします。
ドラッグ後の画面は次のとおりです。
STEP 4. 店舗の住所を選択する
店舗の住所を検索して選択します。
補足：カスタムページのエディタから地図を追加する場合、地図のサイズは変更できません。
STEP 5. タイトルと説明を設定する
必要に応じて「設定」タブでタイトルと説明を入力し、「確定」をクリックします。
STEP 6. ページを保存する
必要に応じて「ページをプレビュー」で表示を確認します。画面右下の「保存」をクリックした後、左上の「ストア管理画面に戻る」をクリックします。
STEP 7. 必要に応じてナビゲーションに追加する
管理画面の「オンラインストアデザイン」から、必要に応じて新しいページをナビゲーションに追加します。メインナビゲーションとストアのフッターの両方に追加できます。
３、SHOP Builder
＊ご注意：
- SHOP Builderは現在、 Ultra Chic、Kingsman、Varm、Philia のテンプレートでのみ利用できます。
- SHOP Builderでページを作成した後に別のストアテンプレートへ切り替えても、ページは表示されます。ただし、編集できなくなり、レイアウトが崩れる場合があります。ページを公開する前にご確認ください。
SHOP Builderについて詳しくは、SHOP Builderの概要をご覧ください。
STEP 1. カスタムページを開く
SHOPLINEの管理画面で「オンラインストアデザイン > ページ」を開き、「カスタムページ／編集」をクリックして設定画面を開きます。
STEP 2. ブロックを開く
「ブロック」をクリックします。
STEP 3. カスタムスクリプトブロックを選択する
「応用機能」から「カスタムスクリプトブロック」を選択します。
カスタムスクリプトの設定方法については、カスタムスクリプトブロック｜SHOP Builderをご覧ください。
最終更新日：2026 年 9 月 16 日
コメント