Shopifyテーマ（Dawn）で会員登録後マイページへ自動リダイレクトさせる

ShopifyのデフォルトテーマであるDawnでは、デフォルトの挙動として会員登録に成功した場合のリダイレクト先がTOPページに指定されています。

これでは、お客様は会員登録に成功したのか分からず、好ましい挙動ではありません。

フォームタグやJavaScriptを利用したリダイレクトは不安が残る

return_toプロパティとroutesオブジェクトを利用して会員登録後にマイページへリダイレクトさせる

そこで、Shopify公式が提供しているreturn_toプロパティとroutesオブジェクトを利用して、会員登録が成功した場合にはマイページへ自動的にリダイレクトさせるように設定を変更します。

会員登録フォームタグにreturn_toプロパティを追加

register.liquidで会員登録フォームを出力しているのは下記のタグ。

  {%- form 'create_customer', novalidate: 'novalidate' -%}

このタグに関して、公式Shopify Docs: customers/register （Redirect customers on account creation） のページには下記のように記述があります。

By default, when a customer creates an account, they're directed to the home page. However, you can specify a page to direct customers to using the return_to parameter of the Liquid form tag.

たとえば、商品一覧ページへとリダイレクトさせたい場合には、下記のようにreturn_toパラメータを追加するとよいとのこと。

{% form 'create_customer', return_to: routes.all_products_collection_url %}
  <!-- form content -->
{% endform %}

ここで使われているroutesオブジェクトを利用することで、リダイレクト先を指定可能です。

routesオブジェクトでマイページへのURLを生成・設定

routes object

Allows you to generate standard URLs for the storefront. Using the routes object instead of hardcoding URLs helps ensure that your theme supports multiple languages, as well as any possible changes in URL format.

routesオブジェクトのうち、マイページへのURLを生成するのは account_url というプロパティ。Ｄawnテーマで次のように実装することで、会員登録後の自動リダイレクト先をマイページへと設定することができました。

  {%- form 'create_customer', novalidate: 'novalidate', return_to: routes.account_url -%}

ほか参考: Re-direct after account creation DAWN - Shopify Community