[Shopify]モーダル作りたいけどJS動作しない

Shopifyのページでモーダルを表示したいと思い、JavaScriptでコードを書いたのですが上手く表示されず数日悩んでいました。。。ようやくモーダルを表示させることができたので忘れないように残しておきます！

AssetにJSファイルを作る

Shopifyのコード編集にある「Asset」に「popup.js」ファイルを作成。

JSファイルを作るまでは簡単なのですが、それをページに埋め込むのに「<script>」を入れて動作してませんでした。

ここにAssetを挿入する書き方が記載されていました！

「{{ ‘popup.js’ | asset_url | script_tag }}」をページに入れるだけでした！

「popup.js」はAssetで追加したファイルです。Assetは「asset_url」で指定してあげて、「script_tag」を記載する。この「script_tag」がなければ動きません。

「Templates」に「pages」フォーマットで「popup.liquid」を作成しました。そのページにHTMLとCSSを記載し、一番下に「{{ ‘popup.js’ | asset_url | script_tag }}」を入れたらモーダル表示ができました！

ShopifyでJSを動かすのは結構クセモノですね！

私はこのスキルを身につけて不労所得を得ています