Liquid、JavaScriptなどに関する質問
テンプレートを利用してページを作成し、セクションの設定で「地図」を挿入しGoogle マップのAPIを入力しましたが反映されません。別手段としてgoogle map のiframeコードをHTMLに直接埋め込みたいのですがindex.jsonのどこに埋め込めば良いかわかりません。教えていただけないでしょうか。
解決済! ベストソリューションを見る。
成功
下記のような流れになるかと思います。
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"という名のセクションが追加できるようになっているはずです。
そのセクションを追加し、お好きな位置にドラッグ&ドロップしていただき、保存していただければ、地図の表示ができるはずです。
上記で、コツを掴まれましたら、ご希望の形になるようにさらにカスタマイズを加えていただくと良いかと思います。
ご参考までに。
キュー田辺
成功
下記のような流れになるかと思います。
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"という名のセクションが追加できるようになっているはずです。
そのセクションを追加し、お好きな位置にドラッグ&ドロップしていただき、保存していただければ、地図の表示ができるはずです。
上記で、コツを掴まれましたら、ご希望の形になるようにさらにカスタマイズを加えていただくと良いかと思います。
ご参考までに。
キュー田辺
詳細にご説明いただきありがとうございます!
ついに表示することができました。
勉強になりました。
細かな表示の変更などにもチャレンジしています。
感謝申し上げます。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024