ストア構築時、クライアントの要件を聞くといつもjqueryが必要になってしまう...。使う頻度が高いので手順を記事として残しておこうと思いました。なお、この記事の解説で使用しているshopifyテーマは「Dawn」ですが、基本的にどのテーマでもやり方は同じです。

手順#

1.shopify管理画面からtheme.liquidを開く
2.jqueryのCDNをtheme.liquidにコピペする

1.shopify管理画面からtheme.liquidを開く

shopifyのストア管理画面のホームで「コードを編集」をクリック。

切り替わった画面で「theme.liquid」ファイルを検索して開く。（Layoutフォルダの中にある）

2.jqueryのCDNをtheme.liquidへコピペする

jqueryの公式サイトでjqueryのCDNをコピーしてtheme.liquidへ貼り付ける。自分が使った時は以下のコードが最新だった。

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

貼り付ける位置はheadの閉じタグ(/head)のすぐ上です。Dawnテーマの場合は210行目くらいに閉じタグの記載がありました。

これでファイルを上書き保存すれば準備完了。jqueryが使えるようになります。