MILという動画サービスをShopifyのサイトで活用したい

[ミウラタクヤ商店]

はじめまして。ミウラタクヤ商店の三浦と申します。

当店でMILというインタラクティブ動画配信サービスの導入を検討しております。

MILサービスについて

動画内にリンクを設定できるというサービスです。

（動画内のボタンをクリックすると商品がポップアップされる。）

設定の流れとしてはMILの管理画面で動画のiframeを発行し

Shopifyの管理画面でサイトに埋め込むという流れになります。

Shopifyだとポップアップされません

楽天や他のECサイトに埋め込むと問題なくポップアップが

発生するのですがShopifyの場合ホワイトアウトして適切にポップアップが表示されません。

Shopify側でなにかポップアップの規制などがあるのでしょうか？

もしAPIだったり対策などありましたらご教授いただければ幸いでございます。

よろしくお願い致します。

[junichiokamura]

現象が発生している時に、ブラウザコンソールにエラーやアラートは出ていませんでしょうか？

画面で右クリックで「要素の検証」などのメニューで開発ツールが表示されるので、そのコンソールタブの内容を共有いただければと思います。
テーマに依存する問題かもしれませんので、お使いのテーマも教えていただければと思います。

[ミウラタクヤ商店 · Accepted solution]

ご返信ありがとうございます。

ページについてはこちらになります。

https://miuratakuya.store/pages/miltest

また要素の検証でのconsole画面はこちらになります。

ブラウザでアラートが出ております。

なお

YOUTUBEやGoogleMapはポップアップされShopifyは表示されません。

MIL動画上にポップアップしたらshopifyサイトを表示したいのですが、

どうすれば宜しいでしょうか？

テーマはdebutになります。

[junichiokamura]

情報のご提供ありがとうございます。

状況がわかりました。結論から言うと、Shopifyのストアフロントは、frameからの呼び出しを禁止するために、X-Frame-Options=DENYをヘッダーとして送っているので、frame内からリンクさせるのは仕様的にできません。

この事象の解説と対応策が英語のコミュニティにあったのでご確認ください。
https://community.shopify.com/c/Shopify-APIs-SDKs/X-FRAME/td-p/598332

Shopifyのテーマ（フレーム）＞動画サービス　の埋め込みはOKですが、この動作しないボタンに関しては、

動画サービス（フレーム）＞Shopify　の埋め込みになっているのでNGとなっております。

試しにフレームを外して単独で表示しましたが、ソースをみるとボタン自体がフレームで実装されているようです。
http://interactive.mil.movie/whdUYZ/

上記のフォーラムに解決策として書いてあるのは、Shopifyのショップを直接リンクするのではなく、storefront APIを使って、独自にショップの情報を表示することかと思います。
以下の「テーマを使わない外部ストアフロントの構築」の部分にそのアプローチの情報が載っているのでご参照いただけますか？
https://www.shopify.jp/blog/partner-shopify-app-development

[ミウラタクヤ商店]

ご丁寧にありがとうございます！

承知しました。こちらで1度確認させていただきます！

ありがとうございます。