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

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

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

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

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

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

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

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

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

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

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

しかし、Shopifyの国・地域項目プルダウン選択において、世界中の国の中から「日本」を選択してもらうのはユーザーにとって手間を掛かかる行為。この面倒臭さは、カート上での必要項目入力時の離脱、いわゆる「カゴ落ち」を発生させる要因になりかねません。

カゴ落ちを防ぐ大切さ、売上への影響などについては

Shopify導入のメリットは「売上が伸びる」「保守不要で高いセキュリティ」

をご確認ください。

ユーザーの利便性を考えると、国・地域のプルダウン選択においては、最初から「日本」が選択されている形にしてあげるのが親切です。

海外配送に対応しているストアでも、日本ユーザーが多い場合には初期選択として「日本」を選択済みの形にしてあげるのがオススメ。

海外の特定の国がユーザーが多い場合にも同様です。日本の代わりにターゲット国を初期選択として選択済みの状態にしておいてあげましょう。

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>

addresses.liquid 36行目付近。書き換え後

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

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 -%}

article-card.liquid

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ブログ本文中に吹き出しコメント挿入を実装するカスタマイズ方法

を記事内で紹介しています。こちらもチェックしてみてください。

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

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

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

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

この記事の気になった箇所を読み返す:

会員登録および住所追加・変更の際の姓名などフォーム項目並び順を日本向けにカスタマイズ
住所入力フォームの「国・地域」選択において「日本」を初期選択・デフォルトとしてあらかじめ選択済みにする
TOPページなど、ほかページで表示されるブログカードの抜粋文の文字数を調整する
成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています

Category:

🛒

Tags:

🛒

Shopify