FROM CACHE - jp_header
解決済

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

kosuke_ki
訪問者
2 0 1

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

1 件の受理された解決策

Qcoltd
Shopify Partner
1042 422 405

成功

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

 

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"という名のセクションが追加できるようになっているはずです。

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

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

 

ご参考までに。

キュー田辺

 

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1042 422 405

成功

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

 

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"という名のセクションが追加できるようになっているはずです。

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

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

 

ご参考までに。

キュー田辺

 

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
kosuke_ki
訪問者
2 0 1

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