ShopifyテーマDawnを日本向けにローカライズ（姓名フォーム・抜粋文）

Shopifyはカナダ発のEC構築SaaSということもあり、そのままの形では日本のEC体験にはそぐわない点がいくつかあります。

本記事では、ShopifyのデフォルトテーマであるDawnを例に、Shopifyテーマの下記について日本向けにカスタマイズする方法を説明します。

• 会員登録および住所追加・変更の際の姓名などフォーム項目並び順を日本向けにカスタマイズ
• 住所入力フォームの「国・地域」選択において「日本」を初期選択・デフォルトとしてあらかじめ選択済みにする
• TOPページなど、ほかページで表示されるブログカードの抜粋文の文字数を調整する
• 会員登録後の自動リダイレクト先をTOPページではなくマイページへと変更する

なお、Shopifyのカスタマイズが初めてという方は、 ざっくりつかむShopify2.0のテーマ構造: Dawnを例に の記事にて、Shopifyテーマの全体構造を把握してから本記事をお読みいただくことをオススメします。

会員登録および住所追加・変更の際の姓名などフォーム項目並び順を日本向けにカスタマイズ

まず、Shopifyは会員登録時に姓と名が逆の順番で表示されていたりと、日本対応のフォームになっていません。

そこで、会員情報の入力時において、フォーム項目の並び順を日本らしくカスタマイズしていきます。

編集が必要なファイルは下記の2つ。

• Templates > customers > register.orig.liquid
• Templates > customers > addresses.liquid

具体的なカスタマイズ方法については、 カスタマイズすることにより日本人向けのレイアウトにローカライズする方法をご紹介いたします。 – アド・セイル株式会社 の記事に大変わかりやすく記載してありました。

基本的にはコードの順番を並び替えるだけ。上の記事にしたがってコードの該当箇所を並び替えていきましょう。

住所入力フォームの「国・地域」選択において「日本」を初期選択・デフォルトとしてあらかじめ選択済みにする

Shopifyは越境ECであり、グローバルな商圏に対応していますが、日本国内のみをターゲットにしている事業者の方も多いと思います。

ユーザーは商品注文時に送付先住所を入力する必要があり、「国・地域」の項目をプルダウンで選択する必要があります。

Templates > Customers > addresses.liquid のファイル、「新しい住所を入力する」フォームの「国・地域」選択部分（36行目あたり〜）の選択肢を出力させる部分、{{ all_country_option_tags }} を書き換えます。

下のように、{{ all_country_option_tags }} にreplaceフィルタを用いて「日本」選択肢にselected属性を付与するように書き換えます。

<!-- 国/地域 -->
<div>
  <label for="AddressCountryNew">{{ 'customer.addresses.country' | t }}</label>
  <div class="select">
    <select
      id="AddressCountryNew"
      name="address[country]"
      data-default="{{ form.country }}"
      autocomplete="country"
      selected="{{ form.country }}"
    >
      {{ all_country_option_tags | replace: 'value="Japan"', 'value="Japan" selected' }}
    </select>
    <svg aria-hidden="true" focusable="false" viewBox="0 0 10 6">
      <use href="#icon-caret" />
    </svg>
  </div>
</div>

これで、プルダウン選択において最初から「日本」が選択されている状態となります。

TOPページなど、ほかページで表示されるブログカードの抜粋文の文字数を調整する

Shopifyデフォルトテーマ”Dawn”では、他ページで「ブログ記事」セクション（Featured Blog）を利用した場合、ブログに抜粋文を設定していない場合には「記事本文のすべて」が出力されてしまいます。

これはブログカードの文字詰めが、文字数ではなく「英語の単語単位」で判定されていることが原因。日本語に対応しない形がデフォルトとなってしまっています。

Snippets > article-card.liquid ファイルの119行目、121行目を下記のように書き換えます。

“truncatewords”と指定のある下記2箇所について、”truncate”へと書き換えて、任意の文字数を入力します。

{%- if show_excerpt -%}
  {%- if article.excerpt.size > 0 or article.content.size > 0 -%}
    <p class="article-card__excerpt rte-width">
      {%- if article.excerpt.size > 0 -%}
				<!-- 抜粋文を切り詰める | truncatewords → truncateに -->
        {{ article.excerpt | strip_html | truncate: 70 }}
      {%- else -%}
				<!-- 抜粋文の指定がなく、本文記事を抜粋文として利用し切り詰める | truncatewords → truncateに -->
        {{ article.content | strip_html | truncate: 70 }}
      {%- endif -%}
    </p>
  {%- endif -%}
  <div class="article-card__footer">
    {%- if article.comments_count > 0 and blog.comments_enabled? -%}
      <span>{{ 'blogs.article.comments' | t: count: article.comments_count }}</span>
    {%- endif -%}
  </div>
{%- endif -%}

80, 82行目にもtruncatewordsの記述がありますが、ほかページへの抜粋文出力に関係しているのは上記の119, 121行目の箇所なのでご注意。

参考: [Shopify]特定文字数を超えたら「…」で表示する（テーマ開発）｜まりん | Shopifyフロントエンジニア+SNSマーケティング｜note

参考: Solved: Shorten the text of the blog on the home page Dawn theme - Shopify Community

JavaScriptを利用したカスタマイズとして、 Shopifyブログ本文中に吹き出しコメント挿入を実装するカスタマイズ方法 を記事内で紹介しています。こちらもチェックしてみてください。

会員登録後の自動リダイレクト先をTOPページではなくマイページへと変更する

こちらは日本向けへのローカライズというわけではありませんが、Shopifyのテーマによっては会員登録後のリダイレクト先がサンクスページ・マイページではなくTOPページになっています。 Dawnもリダイレクト先がデフォルトではTOPページとされています。

通常、会員登録をした後はサンクスページあるいは登録した自分の情報が表示されるマイページへと遷移することが想定されるため、何らかの対処をしたほうが良いでしょう。

Shopifyテーマ（Dawn）で会員登録後マイページへ自動リダイレクトさせる の記事では、会員登録後にマイページへ自動リダイレクトさせるテーマカスタマイズについて解説しています。

成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています

成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています。 SEOを意識した制作や、制作後の運用・成果を見据えたWebサイトづくりが得意です。

🍀 Webサイト制作とSEOの専門家 - Marketing Wizard

上リンクには私のプロフィール・実績を掲載しています。ご確認のうえ、お気軽にご相談ください。

Category: 🛒EC

Tags: 🛒Shopify