備忘録でっす。

テーマカスタマイズ画面にフォントピッカーを追加する

今回は無料テーマのDebutの「テキストオーバーレイ付き画像」セクションを改造しちゃうぞ～。

1. フォントピッカーを追加したいセクションのテーマファイルを探すよ。
   sectionsフォルダ内にあるはずだよ。「テキストオーバーレイ付き画像」の場合はhero.liquidって名前です。
2. ファイルを開いたら下記を探すよ。

{% schema %}

hoge

{% endschema %}

3. すでにカスタマイズ画面に出ている機能がずらりと並んでいるはず。
4. 括弧の位置に注意しながら、フォントピッカーを追加したいところにコードを書いていくよ。

{
    "name": "Typography",
    "settings": [

        /* ↓↓ ここに入れるよ～ ↓↓ */

        {
            "type":    "font_picker",
            "label":   "Heading font",
            "id":      "heading_font",
            "default": "helvetica_n4"
        }

        /* ↑↑ ここに入れたよ～ ↑↑ */
    ]
}

5. ファイルを保存してshopifyにテーマをアップロード。Shopifyのテーマキット使ってると簡単だよ。
6. もしかしたらスキーマがどうこうってエラーが出るかも。いちどShopifyの管理画面に行きます。
7. 管理画面からテーマのカスタマイズを選ぶよ。
8. フォントピッカーを追加したセクションを開くよ。ちゃんとフォントピッカーが表示されてればおｋ。
9. 適当なフォントを選択して保存するよ。
10. Shopifyのテーマキットを使ってる人は、いちどtheme downloadしときましょう。
11. テーマファイルのconfig/settings_data.jsonを開くよ。
12. さっき追加したフォントピッカーの値がちゃんとあればばっちり！どこにあるかはセクションによって違うよ。「テキストオーバーレイ付き画像」に追加した人はこのへんにあるはず↓

︙
    "sections": {

︙

      "hero": {
        "type": "hero",
        "settings": {
          "heading_font": "itc_stone_informal_n4"
        }
      },
︙

13. これでフォントピッカーを使えるようになったよ。

選んだフォントをデザインに反映するよ～

選んだフォントをデザインに適用してみよう～。

残念なことに、スタイルシート用のtheme.scss.liquidファイルからはセクション内でカスタマイズした値を読めないっぽいんだ 😥
しゃーないので、セクションのテーマファイルの中に直接CSSを書いちゃうよ！

1. さっきフォントピッカーを追加したliquidファイルを開いてね。
2. 下記を適当な位置に入れてあげます。

<style>
{% assign sample_heading_font = section.settings.heading_font %}
{{ sample_heading_font | font_face }}
</style>

3. これでさっき選んだフォントが@font-faceで読み込まれて、指定できるようになるよ。
4. フォントを使いたいタグに下記を入れてあげましょう。classやidでの指定がいい人はそうしてね。

<h2 style="font-family:' {{ sample_heading_font.family }};'">

5. 保存したらテーマをアップロードするよー。
6. さて実際のサイトで表示してみましょう。うまく適用されてるかな？？

めっちゃ参考になるサイト様

Configuring theme settings ・ Shopify Help Center
The font object ・ Shopify Help Center
Fonts ・ Shopify Help Center
Shopify’s font library ・ Shopify Help Center
Liquid Font filters in Shopify ? Avada Commerce
Unable to access section setting in sections.scss file ・ Issue #714 ・ Shopify/slate ・ GitHub

Shopifyのフォントライブラリー、すごい色々選べるから、使いこなせれば管理画面から簡単にデザインの変更できてお客さんハッピーになれるだろうな。
まだまだ奥が深いぜShopify。

Theme Kitとは？

Shopifyが提供している、開発者用のコマンドラインツールです。

https://shopify.github.io/themekit/

Theme Kitをダウンロード

「Installation」のセクションから、お使いの環境に合ったTheme Kitをダウンロードします。
コマンドラインに慣れている素敵な貴方はコマンドラインから。
お願いだからexeファイルください…とヨボヨボな貴方と私は「Manual Installation」しましょうね。

Theme Kitのインスコ

管理人はWindowsユーザーなので、Windowsの解説しますよー。

1. program filesフォルダの中に「Theme Kit」フォルダ作ります。名前はなんでも大丈夫だよ。
2. さっきダウンロードしたtheme.exeを作ったフォルダにぶち込みます。
3. パスを通します。環境変数ってやつだね。英語だけどここがスクショ付きで説明しているのでわかりやすいです。
   pathのところに「C:\Program Files\Theme Kit」が追加されれば大丈夫！
4. Powershell（かコマンドプロンプト）を立ち上げて、下記コマンドを打ってみましょう。
   theme
   theme kitの説明がずら～と表示されればインスコ成功です！

macやlinuxの方は下記を参照にがんばって。

Linux & macOS

Download the themekit binary that works for your system.
Compare checksums of the binary by running md5 theme
Put the binary on your path. We recommend somewhere like /usr/local/bin
Ensure that it works as expected by running theme version

APIアクセス権をもらうよ

Shopifyの管理画面から、APIでアクセスするための設定をします。
Theme Kitのページに、すんごいわかりやすいgifがあるので参考にしてね。

1. 管理画面から「Apps ＞ Manage private apps」
2. 「Create a new private app」をクリック、下の方に小さくあるよ。
3. Private App Name（なんでもいいです。Theme Kit Accessとかでいんじゃない。）と自分のメアドを入力。
4. 「Theme templates and theme assets」の権限を「Read and write」に設定
5. 「Save」を押下。

Shopifyとローカルをつなげちゃうよ

1. Shopifyのテーマを保存したい場所にフォルダを作ります。
2. そのフォルダでPowershellを立ち上げます。フォルダ上で「shift+右クリック＞この場所でpowershellを開く」で開けるよ。
3. つなげてみましょう。下記コマンドを打つよ！
   theme configure --password=[APIのパスワード] --store=[shopifyストアのURL（hoge.myshopify.com）] --themeid=[テーマのID（※）]
   ※ テーマのIDは管理画面でテーマのカスタマイズ開いたときのURLでわかります。数字が並んでいる箇所がテーマIDだよ。
4. config.ymlファイルができているはずです。

Shopifyからテーマをダウンロードしてみよう

1. 下記コマンドを打つよ。
   theme download
2. テーマのダウンロードが始まります。
3. パーセンテージが100%になったらフォルダを確認してみよう。Shopifyからテーマファイルがダウンロードされているはず。

Shopifyと同期してみよう

この機能がマジ神です。
ローカルでファイルを変更すると、Shopifyにダイレクトに反映されます。

1. 下記コマンドを打つよ。
   theme watch
2. ローカルでなにかファイルを変更してみましょう。
3. ファイルを保存すると、自動でファイルがアップロードされます。Powershellにもログが出ているよ。
4. Shopify上で表示を確認してみましょう。変更されたかな？
5. 同期の終了は「ctrl+c」です。

神動画

イケメンがShopify Theme Kitの使い方を手取り足取り教えてくれます。
この人若いっぽいのに有能…すごい…！！