Howdy新規会員登録フォームアプリ

thumbnail

フォーム入力後のリダイレクト先をコードで指定する方法

Howdy 会員登録フォーム アプリ

Takahashi2026-05-16

テーマ内のコード側で自由なリダイレクト先の設定を行うことができます。

例えば

・ボタンAから会員登録→独自ページXに遷移

・ボタンBから会員登録→独自ページYに遷移

など、そのページごと(ボタンごと)に会員登録後やログイン後の遷移先を指定することができます。

簡単にいうと

コード側でリダイレクト先を指定することで『ボタンごとに最終的な遷移先を変更することが可能』になります。

(ボタンごとに分ける必要がない場合、コーディング不要で「ログイン後のリダイレクト先」「会員登録のリダイレクト先」をアプリの「一般設定」から設定が可能です。)

ちょっと難しいので図解にしました。

具体的なコード指定はこのようになります。

後で解説しますが、ボタンごとに最終的な遷移先を変えることが可能です。

Plaintext
<button
  class="howdy-register-original-trigger-btn"
  data-login-redirect="/"
  data-register-redirect="/pages/thanks"
  data-already-loggedin="{{ routes.account_url }}"
>ボタン</button>

例えば、このようなユースケースが想定できます。

キャンペーンページから、会員登録したお客様には会員登録後にクーポンコードが表示されている独自ページに移動させる

通常の会員登録サイト導線からは、プロフィールページに遷移させる。

という形でボタンによって、最終的な遷移先を変更することが可能になります。

例えば Liquid の {{ request.path }} などを使用して、ログイン後/会員登録後に現在のページに戻すことも可能です。

https://shopify.dev/docs/api/liquid/objects/request

特にカートページ上でログイン必須にしている場合で、カートページからのログインの際などに ログイン後/会員登録後 にカートページにユーザーを戻すなどが実現可能になります。

リダイレクト指定のURLにはパラメータもつけることができるため、ストア分析などにも役立てることができます。

一般設定画面で『コード側で指定』の選択して保存しましょう。

コード側の設定を行います。

(コード編集に慣れていない方は弊社でサポート可能ですので、お問い合わせください。 support@macro-micro.co.jp )

HTML

基本的には上記のコードの形式になります。

・ログインした後のリダイレクト先(data-login-redirect)

・会員登録した後のリダイレクト先(data-register-redirect)

・すでにログインしている顧客の遷移先(data-already-loggedin)

の3点を自由に編集することができます。

具体的に必要な手順は、こちらです。

① howdy-register-original-trigger-btn のクラスを付与

② data-login-redirect でログイン後のリダイレクト先を指定

③ data-register-redirect で会員登録後のリダイレクト先を指定

④ data-already-loggedin ですでにログインしているユーザーの遷移先を指定

ちなみに特にボタンがなかった部分に新規で作成する場合には

HTML

このように作成して良いのですが、例えばチェックアウトボタンなど既存ボタンに対して「ログイン必須実装」で適用する場合には、このように liquid でログイン済みかどうかを判断して、ログインしていなければ、独自ボタンを表示する実装がおすすめです。

HTML