今回は、Shopifyのマイページのカスタマイズヒントになる事例をいくつか紹介したいと思います。例えば、注文履歴に商品名を入れる、発送状況の修正など
Shopifyストアにおいて「マイページ」の重要性は非常に高いです。特に、顧客体験の向上、リピート購入の促進、信頼性の向上において重要な役割を果たします。
顧客にとっては、過去の購入履歴やお気に入り商品、推奨商品などの個別化された情報が提供されるので、ストアに対して親しみを感じます。
また、住所や決済情報を保存しておくことで、次回以降の購入が簡単になり、利便性が向上。リピート率の向上にも貢献します。
このように非常に重要な役割を果たす一方、機能が多いため、運営者にとってはカスタマイズのハードルが高いのも事実。
今回は、Shopifyのマイページのカスタマイズヒントになる事例をいくつか紹介したいと思います。
※本記事で紹介する、カスタマイズ対象テンプレートは「Sense」テーマのmain-account.liquidになります。liquidの修正などは細心の注意を払って行ってください。
注文履歴に商品名を入れる
デフォルトの注文履歴一覧には、商品名が入っておらず、以下のように表示されます。
注文履歴一覧に商品名を入れたい場合は、コードを編集 > セクション > main-account.liquidを修正します。
注文履歴一覧は、フォーム作成のHTMLを用いるので、「th」と「td」を追加すればOK。
<thead role="rowgroup">
<tr role="row">
<th id="ColumnOrder" scope="col" role="columnheader">商品名</th> //追加した項目
<th id="ColumnOrder" scope="col" role="columnheader">{{ 'customer.orders.order_number' | t }}</th>
<th id="ColumnDate" scope="col" role="columnheader">購入{{ 'customer.orders.date' | t }}</th>
<th id="ColumnPayment" scope="col" role="columnheader">{{ 'customer.orders.payment_status' | t }}</th>
<th id="ColumnFulfillment" scope="col" role="columnheader">
{{ 'customer.orders.fulfillment_status' | t }}
</th>
<th id="ColumnTotal" scope="col" role="columnheader">{{ 'customer.orders.total' | t }}</th>
</tr>
</thead><tbody role="rowgroup">
{%- for order in customer.orders -%}
<tr role="row" class="orderListOriginal">
//商品名を取得・表示
<td
id="RowOrder orderTitle"
role="cell"
headers="ColumnOrder"
data-label="商品名"
>
{{ line_item.title }}
</td>一注文に商品の数が多く、代表商品だけ表示し、他は「（他〇個）」みたいな表示がしたい場合は、以下のliquidコードをご活用ください。
※一番最後にカートに入れた商品が代表商品になります。代表商品の指定はできません。
<tbody role="rowgroup">
{%- for order in customer.orders -%}
<tr role="row" class="orderListOriginal">
//商品名を取得・表示
<td
id="RowOrder orderTitle"
role="cell"
headers="ColumnOrder"
data-label="商品名"
>
{% assign display_count = 0 %}
{% for line_item in order.line_items %}
{% if display_count < 1 %}
{{ line_item.title }}
{% endif %}
{% assign display_count = display_count | plus: 1 %}
{% endfor %}
{% if order.line_items.size > 1 %}
（他{{ order.line_items.size | minus: 1 }}の商品）
{% endif %}
</td>メルマガ登録の促す
すでに会員登録していただいているのに、メルマガ登録をしていない会員もいると思います。
メルマガは広報・宣伝の機能もありますが、
・サブスクリプションの自動決済の日にちのお知らせ
・ストアの特別休日と配送遅延について
のような一斉メールの役割もあると思います。
そのため、会員全員にメルマガ登録をしてもらいたいものです。
マイページにて、メルマガ登録を促す方法は２つ。Liquidコードなどでの自主実装とアプリでの実装があります。
Liquidコードなどでの実装は、AjaxリクエストやCustomerのAccount APIの用いて可能だそうですが、上級開発者でなければ、少しハードルの高い作業になります。
私がおすすめする方法は、会員登録アプリ「Helium Customer Fields」での実装です。
チェックボックス付きのメルマガ登録フォーム作成 > セクション作成 > テーマエディターでマイページに追加という手順で作成できます。
詳しい手順は、以下の記事をご参考ください。
Helium Customer Fieldsを使ってストア会員にメルマガ登録を促すボックスを作る
＜追記＞
本記事で「アプリなしでのカスタマイズは、AjaxリクエストやCustomerのAccount APIの用いる必要があるため難しい」という趣旨の説明をしました。
が、最近アプリなしでも簡単にカスタマイスできる方法を見つけたので、その方法を以下の記事でまとめたので、ぜひチェックしてみてください。
【Shopify小技】アプリなしでストア会員にメルマガ登録を促すボックスを作る
発送状況を修正
最近のECサイトでは、必ずしも発送が必要な商品だけを取り扱う事ありません。
電子チケットなどのデジタルコンテンツや有料ファンクラブの会員資格、引換券(店舗引き渡し商品)など、発送不要商品を取り扱う事もあります。
また、複数の商品を一度に注文される場合、発送不要商品と発送が必要な商品が混在する事も。
もちろん、発送状況を自在にカスタマイズするのは、Liquidオブジェクトに関する知識がないと難しいと思います。
私の場合は、せめてお客様に「何か送られるのか？」という誤解を招く表現は避けたいという思いで、修正を試みました。
修正の修正箇所と方法については、以下の記事にまとめたので、ぜひご一読ください。
Shopify マイページ 発送不要商品の「発送状況」文言をカスタマイズ
繰り返しになりますが、発送状況を自在にカスタマイズするのは、現在自分のレベルでは“至難の業”なので、あくまでも参考程度に留めてください。
キャンセル・返金済み注文
もし、何等かの理由でキャンセルされた注文を一覧上に表示させたい場合は、以下のif文で実装できます。
{%- if order.cancelled -%}
<span>キャンセル</span>
{%- endif -%}もし、返金済みの場合、返金額を表示させたい場合は、Liquidの注文オブジェクトtotal_refunded_amountを使用します。
{%- if order.cancelled -%}
<span>キャンセル</span>
<span>返金額：{{ order.total_refunded_amount| money }}</span>
{%- endif -%}もし、キャンセルの注文だけど、返金がされていない(もしくは返金の必要がない)場合は、
{%- if order.cancelled -%}
<span>キャンセル</span>
<span>
{% if order.total_refunded_amount > 0 %}
返金済み 返金額：{{ order.total_refunded_amount | money }}
{% endif %}
</span>
{%- endif -%}のように「返金済み額が0より大きければ」という条件分岐を使って実装できると思います。
会員情報をユーザーが直接編集できる有用なアプリ
Shopifyのデフォルト機能では、ユーザー自身が修正できる情報は、パスワードや発送先住所くらいに限られています。
そのため、例えばメールアドレスなどの変更を希望する会員がいた場合、運営スタッフに変更を依頼し、スタッフが手動で対応する必要があり、手間がかかってしまいます。
そこで役立つのが、先述の「Helium Customer Fields」というアプリです。設置方法など以下の記事をぜひご一読ください。
Shopify 会員登録とプロフィールセルフ修正アプリなら「Helium Customer Fields」設置方法を解説
また、会員に任意のタグを付ける事ができるフォーム設置もできるため、抽選や申し込み、退会申請などにも活用できます。
