google map のiframeコードをHTMLに埋め込む場所を教えてください。

[kosuke_ki]

テンプレートを利用してページを作成し、セクションの設定で「地図」を挿入しGoogle マップのAPIを入力しましたが反映されません。別手段としてgoogle map のiframeコードをHTMLに直接埋め込みたいのですがindex.jsonのどこに埋め込めば良いかわかりません。教えていただけないでしょうか。

[Qcoltd · Accepted solution]

下記のような流れになるかと思います。

Step 1.

ご希望のHTMLを持ったセクションを作成する。

Step 2.

直接index.jsonを編集して、作成したセクションを追加する。

or

管理画面 > オンラインストア > テーマ > カスタマイズ にて、作成したセクションをトップページに追加する。

セクションの追加方法は下記です。

https://www.shopify.com/jp/blog/partner-how-to-create-your-first-shopify-theme-section

と言われても困ってしまうかもしれませんので、

簡単にやり方をご説明します。

まず、sectionsに、shop-map.liquid のようなファイルを作成します。

shop-map.liquidに、下記を記述します。(Googleマップのコードは、"Googleマップのiframeコードを記載　ここから" から "Googleマップのiframeコードを記載　ここまで" の間に挿入してください。)

<div class="shop-map">
<!-- Googleマップのiframeコードを記載　ここから -->
<!-- Googleマップのiframeコードを記載　ここまで -->
</div>

{% schema %}
  {
    "name": "Shop Map",
    "presets": [
      {
        "name": "Shop Map"
      }
    ]
  }
{% endschema %}

そうしますと、

管理画面 > オンラインストア > テーマ > カスタマイズ にて、

「セクションを追加」をクリックすると、

"Shop Map"という名のセクションが追加できるようになっているはずです。

そのセクションを追加し、お好きな位置にドラッグ&ドロップしていただき、保存していただければ、地図の表示ができるはずです。

上記で、コツを掴まれましたら、ご希望の形になるようにさらにカスタマイズを加えていただくと良いかと思います。

ご参考までに。

キュー田辺

[kosuke_ki]

詳細にご説明いただきありがとうございます！
ついに表示することができました。
勉強になりました。
細かな表示の変更などにもチャレンジしています。
感謝申し上げます。