Shopifyで会員登録フォームに独自CSSを適用する方法｜スタイル追加の手順

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

この記事の手順を終えると、会員登録フォームのページだけに独自のCSS・JavaScriptが読み込まれ、ストアの他のページに影響を与えずにフォームの見た目や挙動を調整できる状態になります。適用にはHowdyアプリの表示タイミング設定と、テーマコードの編集の両方が関係します。会員登録フォーム自体の設置手順は、新しいお客様アカウントに会員登録フォームを設置する手順（Howdy）で説明しています。

独自CSS・JavaScriptを適用できるのはどのような場合ですか？

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

表示タイミングの設定は、Howdyアプリの管理画面の一般設定から確認・変更します。独自CSS・JavaScriptの設定に進む前に、まず表示タイミングが「ログイン前」になっているかを確認します。表示タイミングの2つの選択肢の違いは、Shop・Google・Facebookログインと会員登録フォームを併用する設定で説明しています。

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

Shopify管理画面のロゴ・色設定とは何が違いますか？

「設定」→「チェックアウト」の編集画面では、チェックアウトページ・お客様アカウントページ・ログインページのロゴ・色・画像を設定します。Howdyの独自CSS・JavaScriptは、テーマのファイルに書いて会員登録フォームのページに読み込みます。

ログインページは、編集画面のページセレクターで「ログイン」ページを選び、「メイン」の「ロゴ」セクションでロゴを、「色」セクションで背景色とアクセントカラーを、「メディア」セクションでヒーロー画像を設定して保存します。ヒーロー画像はデスクトップデバイスでのみ表示されます。設定の詳しい手順は、Shopifyでログイン画面をブランドカラーに設定する方法で説明しています。

Howdyの独自CSS・JavaScriptは、会員登録フォームの表示タイミングが「ログイン前」のときに使え、テーマコードに作成したファイルを、theme.liquidでHowdyのアプリページだけに読み込みます。ログインした後のリダイレクト先を変える場合も、Shopifyヘルプでは、テーマにLiquidコードを追加する方法が案内されています。ログイン画面の変更範囲全体は、新しいお客様アカウントのログイン画面はどこまで変えられる？にまとめています。

出典: Shopifyヘルプ「お客様アカウントページのカスタマイズ」／Howdyヘルプ「独自のCSS, JavaScriptを適用する方法」

カスタムファイルはどう作成しますか？

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

作成したファイル名は、次のステップでtheme.liquidに追記するコードのファイル名と正確に対応させる必要があります。ファイル名を変える場合は、コード内の該当箇所もあわせて書き換えます。CSSファイルとJavaScriptファイルは別々に作成し、それぞれ別のコードでtheme.liquidに読み込ませます。テーマコードの編集画面は、会員登録フォームをテーマに埋め込むときに開く「コード編集画面」と同じ画面です。埋め込み手順は新しいお客様アカウントに会員登録フォームを設置する手順（Howdy）で説明しています。

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

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

テーマのコードを直接編集する作業では、編集前にテーマのコピーを取っておくことが推奨されています。コピーを残しておくと、theme.liquidの追記やファイルの作成で意図しない表示になった場合に、コピーしておいたテーマに戻して状態を確認できます。

この準備は、独自CSS・JavaScriptの適用に限らず、Howdyの会員登録フォームをテーマに埋め込む作業全体で共通する進め方です。

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

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

theme.liquid上に、作成したCSS・JavaScriptファイルを読み込むLiquidコードを追記します。JavaScriptファイルの読み込みには次のコードを使います。

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

CSSファイルの読み込みには次のコードを使います。

{% if request.path contains "howdy-apps" %}
  {{ 'custom-howdy.css' | asset_url | stylesheet_tag }}
{% endif %}

コード中のcustom-howdy.jsとcustom-howdy.cssの部分は、実際に作成したファイル名に置き換えます。

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

なぜHowdyのページだけに適用されるのですか？

2つのコードに共通する{% if request.path contains "howdy-apps" %}という条件式が、読み込み先をHowdy関連ページに限定しています。この条件式は、アクセスしているページのパスに「howdy-apps」という文字列が含まれる場合だけ、CSS・JavaScriptを読み込みます。JavaScript用のコードとCSS用のコードは別々のブロックになっていますが、どちらも同じ条件式を使います。

この仕組みによって、追加したスタイルやスクリプトは会員登録フォームのページにだけ反映され、ストアの他のページの見た目や動作には影響しません。条件式を付けずにtheme.liquid全体にCSS・JavaScriptを読み込む場合と異なり、会員登録フォーム以外のページの表示速度や見た目に影響を与えずに済みます。テーマ全体のカスタマイズとの違いは、新しいお客様アカウントへの移行でテーマのカスタマイズはどうなる？にまとめています。

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

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

theme.liquidを保存したあと、会員登録フォームのページを開き、追加したCSS・JavaScriptの内容が反映されているかを確認します。反映されていない場合は、theme.liquidに書いたファイル名と、テーマコード内に作成したファイル名が一致しているかを確認します。

ファイル名の対応がずれていると、asset_urlフィルタが指すファイルが存在しないため、CSS・JavaScriptは読み込まれません。ファイル名を変更した場合は、CSSファイルとJavaScriptファイルの両方について、作成したファイルとtheme.liquid内の記述を同時に見直します。

会員登録フォーム以外のページを開いても、この記事の手順で追加したCSS・JavaScriptは表示に影響しません。反映の確認は、表示タイミングが「ログイン前」に設定された状態の会員登録フォームのページで行います。

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

設定を進める順番

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

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

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

関連記事

• 新しいお客様アカウントのログイン画面はどこまで変えられる？｜ロゴ・文言・CSSの変更範囲
• Shopifyでログイン画面をブランドカラーに設定する方法｜ロゴ・色・画像

よくある質問