Shopify テーマ「Prestige」の日本語化

こち今回この記事を書いたのは自分の忘備録です！少しでも参考になった！いい情報だ！と思っていただけたらスキ！&フォローお願いします！笑

そんな訳でこの記事は下記のような方向けに書いております。Shopify構築経験が豊富な方や、コード読んだ方が早い！という方には必要ありません！
・Shopifyを使ったサイト構築経験があまりない方
・Prestigeを初めて使う方

Shopifyの基本的な日本語化設定について

まず、shopifyの基本的な日本語化設定についてふれておきます。shopifyでは、管理画面の[オンラインストア]、[テーマ]、[アクション]、[言語を編集する]を使って編集することができます。

クリックすると言語編集画面に遷移しますので、そちらで好きな言葉へ変換する設定が可能です。

画像はDebutというテーマですが、Prestigeでも同じです。

ソートの日本語化について

これで完了！と思いきや、確認してみると細かい部分で日本語化ができていない箇所が見つかります。その一つがソートです。Prestigeのソートはコードに直書きされているため、コードを変更する事で日本語化することができます。※コードの編集は自己責任でお願いします！

コードを操作するには管理画面からコードをいじるか、Theme Kitを使ってください！エディタ使って編集する人はTheme Kitがおすすめです。セットアップも簡単で重宝してます。
Theme Kitのセットアップ参考記事はこちら

コードを編集するには管理画面から[オンラインストア]、[テーマ]、[アクション]、[コードを編集する]と操作する事で可能です。

話を戻します。ソートの変更箇所は2箇所です。
1. コレクションリスト
2. 検索結果画面

コレクションリスト

コレクションリストはsections/collection-template.liquidというファイルを編集します。ソースの294行目くらいにある下のソースの部分を探し、"Best Selling"、"Featured"などなど11項目あるので編集してください。ソートを作る事はできないので、あるものを翻訳し、書き換えてください。

var boostPFSThemeConfig = {
  label: {
    sorting: {% assign temp = 'collections.sorting.title' | t  %} {% unless temp contains 'translation missing'  %} "{{ temp }}" {% else %} "Sorting" {% endunless %},
    sorting_best_selling: {% assign temp = 'collections.sorting.best_selling' | t %} {% unless temp contains 'translation missing'  %} "{{ temp }}" {% else %} "Best Selling" {% endunless %},
    ...
    ...

​検索結果画面

検索結果画面はtemplates/search.liquidというファイルを編集します。ソースの106行目くらいにある下のソースの部分を探し、"Best Selling"、"Featured"などなど11項目あるので編集してください。

var boostPFSThemeConfig = {
	label: {
		sorting: {% assign temp = 'collections.sorting.title' | t  %} {% unless temp contains 'translation missing'  %} "{{ temp }}" {% else %} "Sorting" {% endunless %},
		sorting_best_selling: {% assign temp = 'collections.sorting.best_selling' | t %} {% unless temp contains 'translation missing'  %} "{{ temp }}" {% else %} "Best Selling <= ここを書き換える" {% endunless %},
        ...
        ...

この2箇所を編集して保存したらソート部分の日本語化は完了です。

テーマのコンテンツ

続いて、Prestigeで設定できるコンテンツの見出しを日本語設定していきます。このセクションの設定はすべて管理画面の[オンラインストア]、[テーマ]、[カスタマイズ]から行います。

まずはブログ関連のページです。shopifyのブログ関連のページは2ページあります。記事ページと記事一覧ページです。どちらもメインコンテンツの下にshop nowという商品を紹介するセクションを表示する事ができます。

カスタマイズ画面から[ページを選択]から[ブログ記事]を選択します。
左側のセクションメニューの中から[Shop now]を選択し、Titleの内容に変更を加えます。

同じように[ページを選択]から[ブログ]を選択し[Shop Now]のタイトルを日本語に書き換えておきましょう。

[商品ページ]には[Product recommendations]、[Recently viewed products]があります。こちらも同じようにタイトルを編集する事で設定する事が可能です。

ここまでで日本語化は完了です。他はメニューや、コレクションのタイトルなので、商品登録をしていくうちに完了します。

いかがでしたでしょうか？ここ日本語化できないよ！とかがもしありましたらTwitterからツッコミください。加筆させていただきます。これからもshopifyに関する記事をアップしていきますのでよかったらフォローよろしくお願いします！