Shopifyで会員登録フォームに独自JavaScriptを追加する方法｜設置手順

結論: Howdyの会員登録フォームに独自のJavaScriptを追加するには、表示タイミングを「ログイン前」に設定したうえで、テーマコードにJavaScriptファイルを作成し、theme.liquidにLiquidの条件分岐コードを追記します。表示タイミングが「ログイン後」の場合はこの方法を使えません。独自CSSを追加する場合も、同じtheme.liquidの編集作業の中で行えます。

独自JavaScriptを追加できるのはどのような場合ですか？

会員登録フォームの表示タイミングが「ログイン前」に設定されている場合に限り、独自のJavaScriptを追加できます。表示タイミングを「ログイン後」に設定している場合は、この方法を利用できません。

表示タイミングには「ログイン前」と「ログイン後」の2種類があります。「ログイン前」は、ログインアイコンを押してメールアドレスを入力したあとに登録フォームへ遷移する流れで、従来のお客様アカウントに近い形式です。「ログイン後」は、ログインが行われたあとに登録フォームへ遷移する流れで、Shopifyの新基準に近い形式です。独自のJavaScriptを追加できるのは、このうち「ログイン前」を選んでいる場合だけです。

表示タイミングの設定は、Howdyアプリの管理画面の一般設定から確認・変更します。独自JavaScriptの追加に進む前に、まず表示タイミングが「ログイン前」になっているかを確認します。会員登録フォーム自体の設置手順は、新しいお客様アカウントに会員登録フォームを設置する手順（Howdy）で説明しています。

出典: Howdyヘルプ「独自のCSS, JavaScriptを適用する方法」／「新規会員登録フォームの表示タイミング」

JavaScriptファイルはどう作成しますか？

テーマコード内に、独自のJavaScriptファイルを作成します。ファイル名は自由に決められ、Howdyヘルプの例ではcustom-howdy.jsという名前が使われています。

作成したファイル名は、次のステップでtheme.liquidに追記するコードのファイル名と正確に対応させる必要があります。ファイル名を変える場合は、コード内の該当箇所もあわせて書き換えます。テーマコードの編集画面は、会員登録フォームをテーマに埋め込むときに開く「コード編集画面」と同じ画面です。独自CSSのファイルも同時に作成する場合は、JavaScriptファイルとは別のファイルとして作成し、それぞれのファイル名をあとの手順で使い分けます。

出典: Howdyヘルプ「独自のCSS, JavaScriptを適用する方法」

テーマコードを編集する前に準備することはありますか？

テーマのコードを直接編集する作業では、編集前にテーマのコピーを取っておくことが推奨されています。コピーを残しておくと、意図しない表示になった場合に、コピーしておいたテーマに戻して確認できます。

この準備は、独自JavaScriptの追加に限らず、独自CSSの追加やHowdyの会員登録フォームをテーマに埋め込む作業など、テーマのコードを直接編集する作業全体で共通する進め方です。テーマのカスタマイズと新しいお客様アカウントの関係は、新しいお客様アカウントへの移行でテーマのカスタマイズはどうなる？にまとめています。

出典: Howdyヘルプ「非対応のテーマにHowdy新規会員登録アプリを設置する方法」

作成したJavaScriptファイルをテーマに読み込むにはどうしますか？

theme.liquid上に、作成したJavaScriptファイルを読み込むLiquidコードを追記します。追記するtheme.liquidは、独自CSSのコードを追記する場合と同じファイルです。読み込みには次のコードを使います。

{% if request.path contains "howdy-apps" %}
   <script src="{{ 'custom-howdy.js' | asset_url }}" defer="defer"></script>
{% endif %}

コード中のcustom-howdy.jsの部分は、実際に作成したファイル名に置き換えます。このコードをtheme.liquidに追記する作業は、独自CSSのコードを追記する作業と同じ編集の中で行えます。コード中のdefer="defer"という部分も、Howdyヘルプが示すコードにそのまま含まれています。

出典: Howdyヘルプ「独自のCSS, JavaScriptを適用する方法」

なぜHowdyのページだけに読み込まれるのですか？

{% if request.path contains "howdy-apps" %}という条件式が、JavaScriptの読み込み先をHowdy関連ページだけに限定しています。

この条件式は、アクセスしているページのパスに「howdy-apps」という文字列が含まれる場合だけ、JavaScriptを読み込みます。この仕組みによって、追加したスクリプトは会員登録フォームのページにだけ反映され、ストアの他のページの動作には影響しません。条件式を付けずにtheme.liquid全体にJavaScriptを読み込む場合と異なり、会員登録フォーム以外のページの表示速度や動作に影響を与えずに済みます。

出典: Howdyヘルプ「独自のCSS, JavaScriptを適用する方法」

独自CSSも同じ方法で追加できますか？

同じtheme.liquidの条件式{% if request.path contains "howdy-apps" %}をそのまま使って、独自のCSSファイルも合わせて追加できます。

CSSファイルの読み込みには、JavaScript用とは別のコードを使います。Howdyヘルプの手順では、JavaScriptファイルの読み込みコードとCSSファイルの読み込みコードが、同じtheme.liquidの編集作業の中でまとめて案内されています。JavaScriptとCSSを両方追加する場合は、それぞれの読み込みコードをtheme.liquidに並べて追記します。追記する順番は決まっておらず、JavaScript用のコードとCSS用のコードのどちらを先に書いても構いません。

CSSファイルの作成から読み込みまでの手順は、Shopifyで会員登録フォームに独自CSSを適用する方法で説明しています。

出典: Howdyヘルプ「独自のCSS, JavaScriptを適用する方法」

追加したJavaScriptが反映されているかはどう確認しますか？

theme.liquidを保存したあと、会員登録フォームのページを開き、追加したJavaScriptの内容が反映されているかを確認します。確認は、表示タイミングが「ログイン前」に設定された状態の会員登録フォームのページで行います。

反映されていない場合は、theme.liquidに書いたファイル名と、テーマコード内に作成したファイル名が一致しているかを確認します。ファイル名の対応がずれていると、asset_urlフィルタが指すファイルが存在しないため、JavaScriptは読み込まれません。会員登録フォーム以外のページを開いても、この記事の手順で追加したJavaScriptは表示に影響しません。確認の方法は、独自CSSを追加した場合も同じです。JavaScriptとCSSを同時に追加したときは、両方について反映されているかを確認します。

出典: Howdyヘルプ「独自のCSS, JavaScriptを適用する方法」

設定を進める順番

Howdyヘルプの手順では、会員登録フォームの表示タイミングが「ログイン前」であることを確かめてから、テーマコードにファイルを作成し、theme.liquidで読み込みます。この記事の作業を順に並べると次のとおりです。

1. Howdyアプリの管理画面の一般設定を開き、会員登録フォームの表示タイミングが「ログイン前」になっているかを確認する
2. 「ログイン後」に設定されている場合は、一般設定で「ログイン前」に変更して保存する
3. テーマのコードを編集する前に、意図しない表示になった場合に戻せるよう、テーマのコピーを取る
4. テーマコード内に独自のJavaScriptファイルを作成する（例: custom-howdy.js。ファイル名は自由に決められる）
5. theme.liquidに、作成したファイル名に合わせたLiquidコードを追記して保存する
6. 会員登録フォームのページを開き、追加したJavaScriptが反映されているかを確認する
7. 独自CSSも追加する場合は、同じtheme.liquidにCSS用の読み込みコードを並べて追記する

出典: Howdyヘルプ「独自のCSS, JavaScriptを適用する方法」／「新規会員登録フォームの表示タイミング」／「非対応のテーマにHowdy新規会員登録アプリを設置する方法」

関連記事

• Shopifyで会員登録フォームに独自CSSを適用する方法｜スタイル追加の手順
• Shopifyで会員登録フォームを本番環境に影響させず試す方法｜テーマ複製と開発ストア

よくある質問