Cdnの正しい記載方法について

theme.liquidのの閉じタグ間際に外部のscript CDNを記載しているのですが、

VS Code上で以下のエラーメッセージが出てしまいます。

Shopifyではどのように記載するのは正しいのでしょうか?

■CDNのコード

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

■エラーメッセージ

Avoid parser blocking scripts by adding `defer` or `async` on this tag

試しにjQueryのCDNタグに「defer」を追記してみたのですが、

今度はブラウザの検証ツール上で「jQuery is not defined」というエラーメッセージが出てしまいます…

■CDNのコード

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" defer></script>

■エラーメッセージ

Uncaught ReferenceError: jQuery is not defined

Shopify構築が初心者のため、かなり基本的なことかもしれないのですが、

皆さまのお知恵をいただけると助かります。

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

ShopifyやCDN特有のものではないと思いますので、HTMLやJSに関して学ばれることをお勧めします。

加えてasyncやdefer、それらとjQueryの関係(ライブラリと実行コードが書かれたファイルの読み込み順序)に関しましても検索すれば色々と出てくるかなと思います。

参考:

https://developer.mozilla.org/ja/docs/Web/HTML/Element/script#defer

ご回答いただき、ありがとうございます!

なるほど、Shopifyの仕様などに関係なかったのですね…

参考URLの共有までご丁寧にありがとうございます。こちら、調査してみます!